$(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. Deeplearning原文作者Hinton代码注解

    [z]Deeplearning原文作者Hinton代码注解 跑Hinton最初代码时看到这篇注释文章,很少细心,待研究... 原文地址:>http://www.cnblogs.com/BeDPS ...

  2. R语言---热图的制作

    >install.packages("gplots") > library("gplots")> p <- data.frame(rea ...

  3. MVC 的知识

    MVC   的知识 下载地址: 1. NET Framework4下载地址: http://www.microsoft.com/downloads/zh-cn/details.aspx?FamilyI ...

  4. gitlab的搭建和linux客户端的连接

    一.安装 1.新建 /etc/yum.repos.d/gitlab-ce.repo,添加以下内容 1 2 3 4 5 6 7 [gitlab-ce] name=gitlab-ce baseurl=ht ...

  5. git pull使用【转】

    转自:http://www.yiibai.com/git/git_pull.html git pull命令的作用是,取回远程主机某个分支的更新,再与本地的指定分支合并.它的完整格式稍稍有点复杂. $ ...

  6. Myeclipse的web项目移植到Eclipse中需要添加的包

    3.jstl.jar 4.standard-1.1.2.jar 把Myeclipse的web项目一直到Eclipse当中需要添加的包主要有一下4个: 1.servlet-api.jar 2.jsp-a ...

  7. 【ACM】魔方十一题

    0. 前言打了两年的百度之星,都没进决赛.我最大的感受就是还是太弱,总结起来就是:人弱就要多做题,人傻就要多做题.题目还是按照分类做可能效果比较好,因此,就有了做几个系列的计划.这是系列中的第一个,解 ...

  8. [C]判断一个文件是否是jpg格式

    同学要帮忙写的,用opencv的imread打开文件看抛出的异常来判断这种抖机灵的姿势就不写了… 首先知道jpg文件是以0xFFD8开始,以0xFFD9结尾的.所以直接拿来fseek fread,异或 ...

  9. leetcode：Rotate Array

    Rotate an array of n elements to the right by k steps. For example, with n = 7 and k = 3, the array  ...

  10. 采用RPC方式和document方式 开发Axis2的WebService客户端

    import javax.xml.namespace.QName; import org.apache.axiom.om.OMAbstractFactory; import org.apache.ax ...