使用jqueryui
2016-01-09 14:36
543 查看
$(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); }, }); });
相关文章推荐
- jQuery: 做一个简单的模版加载
- jQuery立即调用表达式
- jquery源码分析——元素大小
- jQuery EasyUI combobox多选及赋值
- jQuery-iframe加载完成后触发的事件监听
- 基于jQuery的响应式Tab选项卡插件easyResponsiveTabs.js
- ajax和jquery使用技巧
- jquery 处理破图
- jQuery中serializeArray方法的使用及对象与字符串的转换
- jQuery页面刷新(局部、全部)问题分析
- jquery调整表格行tr上下顺序实例讲解
- 编写jQuery插件
- jquery学习随笔(基础事件)
- jquery动态添加tab内嵌ifream插件
- jquery学习随笔(表单选择器)
- jquery的常见使用
- 搜索栏模糊查询特效--jquery插件
- jQuery中单引号和双引号的使用
- jQuery.ajax发送image请求格式
- jsonp之jQuery.getScript()方法的简单使用