$(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);
},
}); });

使用jqueryui的更多相关文章

  1. Jquery-UI使用

    =创建form对话框弹出登录 首先引入css样式和js. <link rel="stylesheet" href="<%=path%>/css/demo ...

  2. jqueryUI弹出框问题

    jqueryui dialog中 select选不中或比较慢 dialog = function(Window,dialogDivId,title,buttons,css) { css = css|| ...

  3. jQueryUI Draggable 和 Droppable 配合使用时遇到的两个坑

    jQueryUI 的 拖拽插件极大的方便了开发者对拖拽功能的实现,但是官方教程给的太笼统,在具体实现的时候很多地方不明确,这里说一下我遇到的两个 "小坑": 1:Draggable ...

  4. jqueryui 进度条使用

    <title></title> <script src="../Js/NewJs_CFJ/jquery.js" type="text/jav ...

  5. 用JqueryUI的Dialog+IFrame实现仿模态窗口效果

    大家有没有想过这样一个问题,当我点击某个图片的时候,我想弹出这个图片信息的详情并修改,于是你首先想到的是不是window.open?window.open方法确实可以,但是有它的局限性,比如,标题显示 ...

  6. 解决JqueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug

    前些日子不是在做 使用Jquery-UI实现一次拖拽多个选中的元素操作嘛,在持续完善这个组件时遇到了一个关于拖放排序的bug.今天就着图片和代码重现一下,也顺便告诉大家如何解决这个问题. 首先先上图描 ...

  7. 使用 Jquery-UI 实现一次拖拽多个选中的元素操作

    项目需要,实现一个拖放操作,要求每次可以拖拽选中的多个元素,释放到目标容器后可排序.考虑了一下,觉得jquery-ui比较合适,毕竟它提供了项目需要的交互性事件机制.拖拽.释放.排序.选择等效果.而在 ...

  8. [原创]首次制作JQueryUI插件-Timeline时间轴

    特点: 1. 支持多左右滚动,左右拖动. 2. 时间轴可上下两种显示方式. 3. 支持两种模式的平滑滚动/拖动. 4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能). 5. 支持hov ...

  9. Ajax与JqueryUI和EasyUI错题总结

    Ajax与JqueryUI和EasyUI错题总结 正确答案A,解析:此题考察的是JQuery UI下的menu插件的使用,menu提供ui-state-disabled class 方法禁用任何菜单项 ...

  10. jqueryUI 插件

    1,拖拽插件  draggable 拖拽插件draggable的功能是拖动被绑定的元素, 当这个jqueryUI插件与元素绑定后,可以通过调用draggable()方法,实现何种拖拽元素的效果 $(s ...

随机推荐

  1. SQL Sever 博客文章目录(2016-07-06更新)

    SQL Server方面的博客文章也陆陆续续的写了不少了,顺便也将这些知识点整理.归纳一下下.方便自己和他人查看. MS SQL 数据类型 三大数据库对比研究系列--数据类型 MS SQL 表和视图 ...

  2. Linux 之 目录和文件

    1  初识 1.1  终端 打开终端: Ctrl + Alt + F1 ~ F6 图形界面: Ctrl + Alt + F7 1.2  命令 1)  一般 date; cal - calendar; ...

  3. flume+kafka+storm

    centos06.6+JDK1.7 flume1.4+kafka2.10+storm0.9.3 zookeeper3.4.6 集群: 192.168.80.133 x01 192.168.80.134 ...

  4. Javascript兼容收集

    1.IE6背景缓存 try{ document.execCommand("BackgroundImageCache", false, true); }catch(e){} 2. e ...

  5. HDU 4612 Warm up (边双连通分量+缩点+树的直径)

    <题目链接> 题目大意:给出一个连通图,问你在这个连通图上加一条边,使该连通图的桥的数量最小,输出最少的桥的数量. 解题分析: 首先,通过Tarjan缩点,将该图缩成一颗树,树上的每个节点 ...

  6. 框架源码系列八:Spring源码学习之Spring核心工作原理(很重要)

    目录:一.搞清楚ApplicationContext实例化Bean的过程二.搞清楚这个过程中涉及的核心类三.搞清楚IOC容器提供的扩展点有哪些,学会扩展四.学会IOC容器这里使用的设计模式五.搞清楚不 ...

  7. centos7 修改同步时间

    同步时间安装ntp软件 [root@node2 ~]# yum install ntp 将ntp设为开机启动 [root@node2 ~]# systemctl enable ntpd 修改启动参数, ...

  8. 以虎嗅网4W+文章的文本挖掘为例,展现数据分析的一整套流程

    本文转自知乎 作者:苏格兰折耳喵 ----------------------------------------------------- 本文作者将结合自身经验,并以实际案例的形式进行呈现,涉及从 ...

  9. dedecms首页调用随机文章全自动时时更新

    dedecms织梦系统是全站生成静态html的,这个对搜索引擎比较友好,但是有时我们要调用文章,让蜘蛛每次来访问都感觉像是有添加新内容一样,要如何做到呢? 可以添加以下dedecms随机文章调用的参数 ...

  10. Oracle EBS AR 删除应收发票

    DECLARE    -- Non-scalar parameters require additional processing     p_errors arp_trx_validate.mess ...