$(function () {
$('#search_button').button();
/*
同时打开两个对话框
$('#reg').dialog();
$('#login').dialog();
*/
$('#reg').dialog({
title : '知问注册',
buttons : {
'提交' : function () {
alert('正在Ajax提交中...');
},
'取消' : function () {
$(this).dialog('close');
}
},
//position : 'left top',
//width : 500,
//height : 400,
//minWidth : 300,
//minHeight : 300
//maxWidth : 700,
//show : 'puff',
//hide : 'puff',
//autoOpen : false,
//draggable : false,
//resizable : false,
modal : true, //遮罩
closeText : '关闭'
});
//$('#reg_a').click(function () {
// $('#reg').dialog('open');
//});
});
html部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>知问前端</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
<link rel="stylesheet" href="css/smoothness/jquery.ui.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body> <div id="header">
<div class="header_main">
<h1>知问</h1>
<div class="header_search">
<input type="text" name="search" class="search" />
</div>
<div class="header_button">
<button id="search_button">查询</button>
</div>
<div class="header_member">
<a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a>
</div>
</div>
</div> <div id="reg" title="会员注册">
<p>
<label for="user">帐号：</label>
<input type="text" name="user" class="text" id="user" title="请输入帐号，不少于2位！" />
<span class="star">*</span>
</p>
<p>
<label for="pass">密码：</label>
<input type="password" name="pass" class="text" id="pass" title="请输入密码，不少于6位！" />
<span class="star">*</span>
</p>
<p>
<label for="email">邮箱：</label>
<input type="text" name="email" class="text" id="email" title="请输入正确的邮箱！" />
<span class="star">*</span>
</p>
<p>
<label>性别：</label>
<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>
</p>
<p>
<label for="date">生日：</label>
<input type="text" name="date" readonly="readonly" class="text" id="date" />
</p>
</div> <input type="text" id="abc" /> </body>
</html>
index.js
$(function () {
$('#search_button').button({
icons : {
primary : 'ui-icon-search',
},
});
$('#reg').dialog({
autoOpen : true,
modal : true,
resizable : false,
width : 320,
height : 340,
buttons : {
'提交' : function () {
}
}
});
$('#reg').buttonset();
$('#date').datepicker({
dateFormat : 'yy-mm-dd',
//dayNames : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
//dayNamesShort : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesMin : ['日','一','二','三','四','五','六'],
monthNames : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
//monthNamesShort : ['一','二','三','四','五','六','七','八','九','十','十一','十二'],
altField : '#abc',
altFormat : 'dd/mm/yy',
appendText : '日历',
showWeek : true,
weekHeader : '周',
firstDay : 1,
});
$('#reg input[title]').tooltip({
show : false,
hide : false,
position : {
my : 'left center',
at : 'right+5 center'
},
});
$('#email').autocomplete({
delay : 0,
autoFocus : true,
source : function (request, response) {
//获取用户输入的内容
//alert(request.term);
//绑定数据源的
//response(['aa', 'aaaa', 'aaaaaa', 'bb']);
var hosts = ['qq.com', '163.com', '263.com', 'sina.com.cn','gmail.com', 'hotmail.com'],
term = request.term, //获取用户输入的内容
name = term, //邮箱的用户名
host = '', //邮箱的域名
ix = term.indexOf('@'), //@的位置
result = []; //最终呈现的邮箱列表
result.push(term);
//当有@的时候，重新分别用户名和域名
if (ix > -1) {
name = term.slice(0, ix);
host = term.slice(ix + 1);
}
if (name) {
//如果用户已经输入@和后面的域名，
//那么就找到相关的域名提示，比如bnbbs@1，就提示bnbbs@163.com
//如果用户还没有输入@或后面的域名，
//那么就把所有的域名都提示出来
var findedHosts = (host ? $.grep(hosts, function (value, index) {
return value.indexOf(host) > -1
}) : hosts),
findedResult = $.map(findedHosts, function (value, index) {
return name + '@' + value;
});
result = result.concat(findedResult);
}
response(result);
},
});
});