artdialog 异步加载一个页面
需求：例如现在好多网站的登录或注册 都是点击弹出一个层出来 然后在上面登录、注册
这个登录可能在网站的每个页面都会有，但是我们又不能在每个页面都这一段html加载出来不显示，到需要用的时候，在给shou出来，这样做于情于理都说!不！！过！！！去！！！！！！
恰好以前接触过artdialog 不多说上代码，(注意思维，代码是死的方法是活，解决需求不一定非要这个方法 )
1、页面html代码
1 <head runat="server"> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3 <title></title> 4 <script src="js/jquery-1.10.1.min.js"></script> 5 <script src="js/artdialog/jquery.artDialog.js"></script> 6 <script src="js/artdialog/iframeTools.js"></script> 7 <script src="js/site.js"></script> 8 <link href="js/artdialog/skins/default.css" rel="stylesheet" /> 9 </head> 10 <body> 11 <form id="form1" runat="server"> 12 <div> 13 </div> 14 </form> 15 <button id="shouurl">点我弹出层</button> 16 17 </body> 18 </html>
2、js代码
$(document).ready(function () { $("#shouurl").click(function () { var tit = ""; //这里可以换成$.get $.post $ajax 等异步加载的方法 $.get("WebForm1.aspx", function (d) { //要注意这个里的写法 $.dialog 和art.dialog的区别， //本人就是在这里纠结了一个多小时,js闭包的概念 art.dialog({ id: 'N3690', title: typeof (tit) == "string" ? (tit.length == 0 ? "正在加载" : tit) : tit, lock: true, background: '#FFF', //锁屏背景色 opacity: 0.87, //锁屏透明度 '500px', height: 240, content: d, cache: false }); }); }); });
3、异步加载的页面(笔者在这个加载出来的页面做了一个验证码的功能)
1 <head runat="server"> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3 <script src="js/jquery-1.10.1.min.js"></script> 4 <title></title> 5 <script type="text/javascript"> 6 $(document).ready(function () { 7 $("#vc").click(function () { 8 $(this).attr("src", "/Handler.ashx?act=vc"); 9 }); 10 }); 11 12 </script> 13 </head> 14 <body> 15 <form id="form1" runat="server"> 16 <div> 17 <img src="" id="vc" width="80" height="50"/> 18 </div> 19 </form> 20 </body>
4、后台代码(验证码C#)
1 public void ProcessRequest(HttpContext context) 2 { 3 context.Response.ContentType = "text/plain"; 4 5 if (context.Request["act"] == "vc")//获取查询列表 6 { 7 GetValidateCode(); 8 } 9 } 10 public void GetValidateCode() 11 { 12 Comm.ValidateCode code = new Comm.ValidateCode(); 13 string chkCode = code.CreateValidateCode(4); 14 //Session["CheckCode"] = chkCode; 15 //Session["TimeOut"] = DateTime.Now; 16 HttpContext.Current.Response.BinaryWrite(code.CreateValidateGraphic(chkCode)); 17 }
5、验证码生成类
1 /// <summary> 2 /// 生成验证码的类 3 /// </summary> 4 public class ValidateCode 5 { 6 public ValidateCode() 7 { 8 } 9 /// <summary> 10 /// 验证码的最大长度 11 /// </summary> 12 public int MaxLength 13 { 14 get { return 10; } 15 } 16 /// <summary> 17 /// 验证码的最小长度 18 /// </summary> 19 public int MinLength 20 { 21 get { return 1; } 22 } 23 /// <summary> 24 /// 生成验证码 25 /// </summary> 26 /// <param name="length">指定验证码的长度</param> 27 /// <returns></returns> 28 public string CreateValidateCode(int length) 29 { 30 int[] randMembers = new int[length]; 31 int[] validateNums = new int[length]; 32 string validateNumberStr = ""; 33 //生成起始序列值 34 int seekSeek = unchecked((int)DateTime.Now.Ticks); 35 Random seekRand = new Random(seekSeek); 36 int beginSeek = (int)seekRand.Next(0, Int32.MaxValue - length * 10000); 37 int[] seeks = new int[length]; 38 for (int i = 0; i < length; i++) 39 { 40 beginSeek += 10000; 41 seeks[i] = beginSeek; 42 } 43 //生成随机数字 44 for (int i = 0; i < length; i++) 45 { 46 Random rand = new Random(seeks[i]); 47 int pownum = 1 * (int)Math.Pow(10, length); 48 randMembers[i] = rand.Next(pownum, Int32.MaxValue); 49 } 50 //抽取随机数字 51 for (int i = 0; i < length; i++) 52 { 53 string numStr = randMembers[i].ToString(); 54 int numLength = numStr.Length; 55 Random rand = new Random(); 56 int numPosition = rand.Next(0, numLength - 1); 57 validateNums[i] = Int32.Parse(numStr.Substring(numPosition, 1)); 58 } 59 //生成验证码 60 for (int i = 0; i < length; i++) 61 { 62 validateNumberStr += validateNums[i].ToString(); 63 } 64 return validateNumberStr; 65 } 66 /// <summary> 67 /// 创建验证码的图片 68 /// </summary> 69 /// <param name="containsPage">要输出到的page对象</param> 70 /// <param name="validateNum">验证码</param> 71 public byte[] CreateValidateGraphic(string validateCode) 72 { 73 Bitmap image = new Bitmap((int)Math.Ceiling(validateCode.Length * 12.0), 22); 74 Graphics g = Graphics.FromImage(image); 75 try 76 { 77 //生成随机生成器 78 Random random = new Random(); 79 //清空图片背景色 80 g.Clear(Color.White); 81 //画图片的干扰线 82 for (int i = 0; i < 25; i++) 83 { 84 int x1 = random.Next(image.Width); 85 int x2 = random.Next(image.Width); 86 int y1 = random.Next(image.Height); 87 int y2 = random.Next(image.Height); 88 g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2); 89 } 90 Font font = new Font("Arial", 12, (FontStyle.Bold | FontStyle.Italic)); 91 LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), 92 Color.Blue, Color.DarkRed, 1.2f, true); 93 g.DrawString(validateCode, font, brush, 3, 2); 94 //画图片的前景干扰点 95 for (int i = 0; i < 100; i++) 96 { 97 int x = random.Next(image.Width); 98 int y = random.Next(image.Height); 99 image.SetPixel(x, y, Color.FromArgb(random.Next())); 100 } 101 //画图片的边框线 102 g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1); 103 //保存图片数据 104 MemoryStream stream = new MemoryStream(); 105 image.Save(stream, ImageFormat.Jpeg); 106 //输出图片流 107 return stream.ToArray(); 108 } 109 finally 110 { 111 g.Dispose(); 112 image.Dispose(); 113 } 114 } 115 /// <summary> 116 /// 得到验证码图片的长度 117 /// </summary> 118 /// <param name="validateNumLength">验证码的长度</param> 119 /// <returns></returns> 120 public static int GetImageWidth(int validateNumLength) 121 { 122 return (int)(validateNumLength * 12.0); 123 } 124 /// <summary> 125 /// 得到验证码的高度 126 /// </summary> 127 /// <returns></returns> 128 public static double GetImageHeight() 129 { 130 return 22.5; 131 } 132 }
第4步和第5步 可以不不用只是笔者的记忆力不好 顺便记录的。。。。。。