jQuery UI简单的讲解

我们先进入一下问答时间，你都知道多少呢？

（1）什么是 jQuery UI 呢？

  解答：jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的 web 应用程序。所有插件测试能兼容 IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和 GoogleChrome。

（2）jQuery UI 的组件组成：

 解答：Query UI 主要分为 3 个部分：交互、微件和效果库。

（3）jQuery UI 和 jQuery 的主要区别?

 解答：(1) jQuery 是一个 js 库，主要提供的功能是选择器，属性修改和事件绑定等等。

         (2) jQuery UI 则是在 jQuery 的基础上，利用 jQuery 的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行

         为、改变大小行为等等。

简单的问答就先到这里吧，让我们切入代码的世界吧！

第一个小示例：利用 dialog 实现 form 表单提交

第一步先准备项目所需的 jQuery UI 所需要的支持文件

官网下载地址：http://jqueryui.com/download/

在项目 webapp 下创建文件夹，名称为 js, 把文件发在 js 文件夹下。目录结构如下：

第二步搭建页面:

    
用户登录
    
 
        用户名：

        密    码：

        

dialog 插件的常用参数：

常用参数：属性                  类型                     说明
    Boolean autoOpen      属性          设置该组件被调用时的打开状态。默认值为 true，即打开对话框
    Object buttons 或
    Array buttons          属性          显示一个按钮，可以设置该按钮的显示文本和点击函数
    Boolean modal          属性          设置组件是否使用模式窗口。默认为 false
    close()                  方法          执行关闭对话框操作
    open()                  方法          执行打开对话框操作
    beforeClose(event,ui) 事件          当 dialog 尝试关闭时，此事件将被触发
                                      参数说明：event 为事件对象，ui 为当前插件对象
    close(event,ui)          事件          当 dialog 被关闭后，此事件将被触发
    open(event,ui)          事件          当 dialog 被打开后，此事件将被触发

可以根据上面的参数，编写代码。

用户登录提交到 servlet 进行判断，所以我在这里创建了一个 LoginServlet 进行逻辑判断

public class LoginServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String name = request.getParameter("uname");
        String pwd = request.getParameter("pwd");
        if("1".equals(name)&&"1".equals(pwd)){request.getSession().setAttribute("name",name);
            response.sendRedirect("/09jQueryUI/success.jsp");
        }else{response.sendRedirect("/09jQueryUI/index.jsp");
        }
    }

}

成功页面把用户名打印出来即可。。

欢迎：

上述的代码就是一个简单的 dialog 插件应用的小案例，你再也不用羡慕那些网站做的花哨的页面了，因为你也可以的。。。。。

接下来我继续讲解下一个 jQuery UI 常用的插件，会是什么呢？来猜一猜，它就是 tabs 插件

tabs 插件支持多种风格的选项卡模式，普通选项卡，带子选项的选项卡，扁平风格的选项卡，响应式选项卡和手机选项卡等。

上述的支持文件我们就不再次讲解了。

页面的创建：

   
第一个
   
第二个
   
第三个
   
   

   
第一个选项卡
   
第二个选项卡
   
第三个选项卡

标签内的代码：你也可以在选项卡内在嵌套子选项卡，在这里就是做实现了，有想法的同学可以在闲余的时间试试。。。。

我们还要讲点什么呢，总觉得缺少点东西是不是，对了还有 menu 插件呢？

menu: 菜单的意思。

我们经常在上网的时候，有很多网站都有下拉列表框包含子类的效果，我们也可以做一个简单的效果。。。。

   

     
系统管理
     
市场管理
     
财务管理
        

             
          
财务部
          
考核部
        
     
     
产品管理
        

          
产品检测部
            

              
产品合格
              
产品报废
            
          
          
产品销售部
            
          
        
     
   

标签内的代码：

这里就可以实现下拉列表框的效果，下面的图为常用的参数：

常用参数：属性                 类型             说明
    Object icons         属性            设置该组件使用菜单图标
    Boolean disabled        属性            设置菜单不可用
    option(String name)     方法            获取指定选项的值
    expand([event])         方法            打开当前菜单项的子菜单
    focus(event,ui)         事件            当菜单获取焦点或任何菜单项被打开时，触发该事件

menu 插件还能实现一种，外部引用的效果，在一个页面通过点击按钮加载数据。。。。

页面上的代码：

   

        
系统管理
   

标签内的代码：

引用页面的代码：

一个简单的引用就是这样实现了，再也不用为了那么绚丽的页面而羡慕了。。。。。

最后讲解一个我们经常碰到的情况，就是当我们在百度页面或者必应页面搜索资料时，往往你还没打完，下面就会联想出来一些相关的词汇，是不是很智能呢？我们接下来讲解的 autocomplete 插件就可以实现这个效果。

先来点理论的：

语法：$(selector).autocomplete([settings]); 
       
       常用属性：属性                            说明
        String Source 或        用于指定数据来源，类型为 String、Array、function
        Array Source 或         String：用于 Ajax 请求的 URL 地址，返回 Array（JSON 格式）Array：即字符串数组 或 JSON 数组
        function Source(function(request, response)：Object reuqest,        通过 request.term 获得输入的值（term 为默认参数名），function response(response([Array])用来呈现远程数据
            Object data ))                       
                                
        Integer minLength        当输入框内字符串长度达到 minLength 时，激活 autocomplete
        
        Boolean autoFocus        当 autocomplete 选择菜单弹出时，自动选中第一个
        
        Integer delay            即延迟多少毫秒激活 autocomplete
        
        常用事件:
        事件                           说明
       focus(event,ui)             autocomplete 的结果列表任意一项获得焦点时触发
                                 ui.item 为获得焦点的项
       
       select(event,ui)             autocomplete 的结果列表任意一项选中时触发
                                 ui.item 为选中的项
       
       change(event,ui)             当值改变时触发
                                 ui.item 为选中的项

接下来一个小示例：

邮箱效果：

email 效果
    // 准备数组存储域名
      var hosts = ["126.com","gmail.com", "live.com", "hotmail.com", "yahoo.com", "cnblogs.com", "qq.com", "163.com"];
            $("#email").autocomplete({
                autoFocus: true,
                // 定义资源函数
                source: function(request, response) {
                    var term = request.term, //request.term 为输入的字符串
                        ix = term.indexOf("@"),
                        name = term, // 用户名
                        host = "", // 域名
                        result = []; // 结果               result.push(term);
                    if (ix> -1) {name = term.slice(0, ix);
                        host = term.slice(ix + 1);
                    }
                    if (name) {var findedHosts = (host ? $.grep(hosts, function(value) {return value.indexOf(host) > -1;
                        }) : hosts),
                        findedResults = $.map(findedHosts, function(value) {return name + "@" + value; // 返回字符串格式});
                        result = result.concat($.makeArray(findedResults));
                    }
                    response(result); // 呈现结果
                }
            });
    
    

在这里解释一下，上面用的我们陌生的方法：

解释：grep 方法  使用过滤函数过滤数组元素。此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。源码分析：grep: function(elems, callback, inv) {var ret = [], retVal;
     inv = !!inv;

    // Go through the array, only saving the items
    // that pass the validator function
        for ( var i = 0, length = elems.length; i