使用jqueryui

 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 });