1 $(function () { 2 3 $('#search_button').button(); 4 5 /* 6 同时打开两个对话框 7 $('#reg').dialog(); 8 $('#login').dialog(); 9 */ 10 11 $('#reg').dialog({ 12 title : '知问注册', 13 buttons : { 14 '提交' : function () { 15 alert('正在Ajax提交中...'); 16 }, 17 '取消' : function () { 18 $(this).dialog('close'); 19 } 20 }, 21 //position : 'left top', 22 //width : 500, 23 //height : 400, 24 //minWidth : 300, 25 //minHeight : 300 26 //maxWidth : 700, 27 //show : 'puff', 28 //hide : 'puff', 29 //autoOpen : false, 30 //draggable : false, 31 //resizable : false, 32 modal : true, //遮罩 33 closeText : '关闭' 34 }); 35 36 37 //$('#reg_a').click(function () { 38 // $('#reg').dialog('open'); 39 //}); 40 41 });
html部分
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>知问前端</title> 6 <script type="text/javascript" src="js/jquery.js"></script> 7 <script type="text/javascript" src="js/jquery.ui.js"></script> 8 <script type="text/javascript" src="js/index.js"></script> 9 <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" /> 10 <link rel="stylesheet" href="css/smoothness/jquery.ui.css" type="text/css" /> 11 <link rel="stylesheet" href="css/style.css" type="text/css" /> 12 </head> 13 <body> 14 15 16 <div id="header"> 17 <div class="header_main"> 18 <h1>知问</h1> 19 <div class="header_search"> 20 <input type="text" name="search" class="search" /> 21 </div> 22 <div class="header_button"> 23 <button id="search_button">查询</button> 24 </div> 25 <div class="header_member"> 26 <a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a> 27 </div> 28 </div> 29 </div> 30 31 32 <div id="reg" title="会员注册"> 33 <p> 34 <label for="user">帐号：</label> 35 <input type="text" name="user" class="text" id="user" title="请输入帐号，不少于2位！" /> 36 <span class="star">*</span> 37 </p> 38 <p> 39 <label for="pass">密码：</label> 40 <input type="password" name="pass" class="text" id="pass" title="请输入密码，不少于6位！" /> 41 <span class="star">*</span> 42 </p> 43 <p> 44 <label for="email">邮箱：</label> 45 <input type="text" name="email" class="text" id="email" title="请输入正确的邮箱！" /> 46 <span class="star">*</span> 47 </p> 48 <p> 49 <label>性别：</label> 50 <input type="radio" name="sex" value="male" id="male" checked="checked"><label for="male">男</label></input><input type="radio" name="sex" value="female" id="female"><label for="female">女</label></input> 51 </p> 52 <p> 53 <label for="date">生日：</label> 54 <input type="text" name="date" readonly="readonly" class="text" id="date" /> 55 </p> 56 </div> 57 58 <input type="text" id="abc" /> 59 60 </body> 61 </html>
index.js
1 $(function () { 2 3 $('#search_button').button({ 4 icons : { 5 primary : 'ui-icon-search', 6 }, 7 }); 8 9 10 $('#reg').dialog({ 11 autoOpen : true, 12 modal : true, 13 resizable : false, 14 width : 320, 15 height : 340, 16 buttons : { 17 '提交' : function () { 18 19 } 20 } 21 }); 22 23 $('#reg').buttonset(); 24 25 $('#date').datepicker({ 26 dateFormat : 'yy-mm-dd', 27 //dayNames : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 28 //dayNamesShort : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 29 dayNamesMin : ['日','一','二','三','四','五','六'], 30 monthNames : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], 31 //monthNamesShort : ['一','二','三','四','五','六','七','八','九','十','十一','十二'], 32 altField : '#abc', 33 altFormat : 'dd/mm/yy', 34 appendText : '日历', 35 showWeek : true, 36 weekHeader : '周', 37 firstDay : 1, 38 }); 39 40 $('#reg input[title]').tooltip({ 41 show : false, 42 hide : false, 43 position : { 44 my : 'left center', 45 at : 'right+5 center' 46 }, 47 }); 48 49 50 $('#email').autocomplete({ 51 delay : 0, 52 autoFocus : true, 53 source : function (request, response) { 54 //获取用户输入的内容 55 //alert(request.term); 56 //绑定数据源的 57 //response(['aa', 'aaaa', 'aaaaaa', 'bb']); 58 59 var hosts = ['qq.com', '163.com', '263.com', 'sina.com.cn','gmail.com', 'hotmail.com'], 60 term = request.term, //获取用户输入的内容 61 name = term, //邮箱的用户名 62 host = '', //邮箱的域名 63 ix = term.indexOf('@'), //@的位置 64 result = []; //最终呈现的邮箱列表 65 66 67 result.push(term); 68 69 //当有@的时候，重新分别用户名和域名 70 if (ix > -1) { 71 name = term.slice(0, ix); 72 host = term.slice(ix + 1); 73 } 74 75 if (name) { 76 //如果用户已经输入@和后面的域名， 77 //那么就找到相关的域名提示，比如bnbbs@1，就提示bnbbs@163.com 78 //如果用户还没有输入@或后面的域名， 79 //那么就把所有的域名都提示出来 80 81 var findedHosts = (host ? $.grep(hosts, function (value, index) { 82 return value.indexOf(host) > -1 83 }) : hosts), 84 findedResult = $.map(findedHosts, function (value, index) { 85 return name + '@' + value; 86 }); 87 88 result = result.concat(findedResult); 89 } 90 91 response(result); 92 }, 93 }); 94 95 96 });
