一、什么是插件

①是遵循一定接口规范编写的程序

②是原有系统平台功能的扩展和补充

③只能运行在规定的系统平台下，而不能单独运行

注：由于jQuery插件是基于jQuery脚本库的扩展，所以所有jQuery插件都必须依赖于jQuery基础脚本库，在加入插件时需要先引入jQuery基础脚本库，再引入插件库，一定要注意引入的先后顺序。

jQuery插件的参数一般采用的是JSON格式

二、常用插件

dialog插件：常用的对话框展现形式分为普通对话框和form对话框

常用参数：

引入jQuery-ui库：

<html>

  <head>

    <title>demo1_dialog.jsp</title>

    <script type="text/javascript" src="../jquery-ui-1.9.2/jquery-1.8.3.js"></script>

    <script type="text/javascript" src="../jquery-ui-1.9.2/ui/jquery-ui.js"></script>

    <link rel="stylesheet" href="../jquery-ui-1.9.2/themes/base/jquery.ui.all.css" type="text/css"></link>

  <script type="text/javascript">

      $(function(){

          $('#dlg').dialog({

          //设置成false,代表不自动打开  打开对话框

               autoOpen:false,

              //按钮的设置

               buttons:{

              '关闭':function(){

                  $('#dlg').dialog('close')

              }

              },

              //设置组件是否使用模式窗口。默认为false    背景颜色

               modal:true,

              //显示

               show:{

              effect:'blind',

              duration:

              },

              //隐藏

              hide:{

              effect:'explode',

              duration:

              }

          }) 

      }); 

  </script>

  </head>

  <body>

    <button id="openbut" onclick="$('#dlg').dialog('open')">打开窗口</button>

    <div id="dlg" title="用户登录">

        用户名<br/>

        <input type="text"><br/>

        密码<br/>

        <input type="text"><br/>

    </div>

  </body>

</html>

实现效果：

tabs插件：

可实现丰富的选项卡效果。常用的展现形式有鼠标单击触发tab切换、鼠标移动触发tab切换

常用属性：

常用方法：

常用事件：

<html>

<head>

<title>tab.jsp</title>

<link rel="stylesheet" href="../jquery-ui-1.9.2/themes/base/jquery.ui.all.css" type="text/css"></link>

<link rel="stylesheet" href="../jquery-ui-1.9.2/demos/demos.css" type="text/css"></link>

<script type="text/javascript" src="../jquery-ui-1.9.2/jquery-1.8.3.js"></script>

<script type="text/javascript" src="../jquery-ui-1.9.2/ui/jquery-ui.js"></script>

<script type="text/javascript">

    $(function() {

        $('#tabs').tabs({

        //该组件的折叠状态。默认值为false，即不可折叠

             collapsible : true,

            //设置处于打开状态的选项卡。默认值为0

            active : 1,

            event : 'hover' 

            //打开后触发

            /* activate:function(){

            alert(1)

            }, */

             //打开时触发

       /*  beforeActivate:function(){

            alert(1)

        },

          */

        });

    });

</script>

</head>

<body>

    <div id="tabs">

        <ul>

            <li><a href="#tabs-1">Tabs1</a>

            </li>

            <li><a href="#tabs-2">Tabs2</a>

            </li>

            <li><a href="#tabs-3">Tabs3</a>

            </li>

        </ul>

        <div id="tabs-1">

            <p>content of tab one</p>

        </div>

        <div id="tabs-2">

            <p>content of tab two</p>

        </div>

        <div id="tabs-3">

            <p>content of tab three</p>

        </div>

    </div>

</body>

</html>

实现效果：

menu插件：

常用属性：

<html>

  <head>

    <title>My JSP 'menu.jsp' starting page</title>

    <script type="text/javascript" src="../jquery-ui-1.9.2/jquery-1.8.3.js"></script>

    <script type="text/javascript" src="../jquery-ui-1.9.2/ui/jquery-ui.js"></script>

    <link rel="stylesheet" href="../jquery-ui-1.9.2/themes/base/jquery.ui.all.css" type="text/css"></link>

     <script type="text/javascript">

    $(function(){

        $("#menu").menu({

        //获得焦点时触发

         focus:function(){

        //背景颜色

           $(this).css("background","pink")

           },

         });

       // disabled:true

     });

    </script>

     <style>

    .ui-menu{width: 150px; }

  </style>

   </head>

  <body>

    <ul id="menu">

            <li><a href="#">小明一中</a>

                <ul>

                    <li><a href="#">高中部</a>

                        <ul>

                            <li><a href="#">高一(1)班</a></li>

                            <li><a href="#">高一(2)班</a></li>

                            <li><a href="#">高一(3)班</a>

                                <ul>

                                    <li><a href="#">小胡</a></li>

                                    <li><a href="#">小李</a></li>

                                    <li><a href="#">逗比</a></li>

                                </ul>

                            </li>

                        </ul>

                    </li>

                    <li><a href="#">初中部</a>

                        <ul>

                            <li><a href="#">初一(1)班</a></li>

                            <li><a href="#">初一(2)班</a></li>

                            <li><a href="#">初一(3)班</a></li>

                        </ul>

                    </li>

                    <li><a href="#">教研部</a></li>

                </ul>

            </li>

            <li><a href="#">大明二中</a></li>

        </ul>

  </body>

</html>

实现效果：

autocomplete插件:远程数据源实现自动完成

语法：$(selector).autocomplete([settings])

常用属性：

常用事件：

<html>

<head>

<title>My JSP 'autocomplete.jsp' starting page</title>

<script type="text/javascript" src="../jquery-ui-1.9.2/jquery-1.8.3.js"></script>

<script type="text/javascript" src="../jquery-ui-1.9.2/ui/jquery-ui.js"></script>

<script type="text/javascript" src="../jquery-ui-1.9.2/ui/jquery.ui.autocomplete.js"></script>

<link rel="stylesheet" href="../jquery-ui-1.9.2/themes/base/jquery-ui.css" type="text/css"></link>

<link rel="stylesheet" href="../jquery-ui-1.9.2/demos/demos.css" type="text/css"></link>

<script type="text/javascript">

    $(function() {

        var source=["accp","apple","blue","bus"];

        $("#tags").autocomplete({

            source : source,

            //自动选择第一项

            autoFocus:true,

            //最少长度激活

            //minLength:2,

            //延迟

            //delay:2000,

             //默认选择第一项

             //autoFocus:true,

             //创建时触发

           /* create:function(){

                alert(1)

           } */

            //开始查找请求

         /*  search:function(){

            alert(1)

          }, */

           //列表被选中时触发

         /*  select:function(){

                 alert(1)

          } */

          //列表任意一项获得焦点时触发

         /* focus:function(){

                alert(1)

          } */

        });

    });

</script>

</head>

<body>

    <input id="tags">

</body>

</html>

实现效果：自动查找与a匹配的值

lazyload插件：

将图片分批按需加载、缩短用户等待时间、缓解服务器压力

语法：$(selector).lazyload([settings]);

常用参数：

<html>

  <head>

    <title>延迟加载demo</title>

    <script type="text/javascript" src="../jquery-ui-1.9.2/jquery-1.8.3.js"></script>

    <script type="text/javascript" src="../jquery-ui-1.9.2/jquery.lazyload.js"></script>

    <script type="text/javascript">

        $(function(){

        $(".lazy").lazyload({

        //载入使用何种效果

        effect:"fadeIn",

        effectspeed:2000,

        //距离下一张图片还有100像素时

        threshold:100

        });

        });

    </script>

  </head>

  <body>

       <!-- 把 <img> 标签中的 src 属性改为等待图片的URL, data-original 属性填上真正的图片URL. -->

     <img class="lazy" src="../img/white.gif" data-original="../img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">

     <img class="lazy" src="../img/white.gif" data-original="../img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">

     <img class="lazy" src="../img/white.gif" data-original="../img/viper_1.jpg" width="765" height="574" alt="Viper 1">

     <img class="lazy" src="../img/white.gif" data-original="../img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">

     <img class="lazy" src="../img/white.gif" data-original="../img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">

     <img class="lazy" src="../img/white.gif" data-original="../img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">

  </body>

</html>

jQuery UI常用插件使用的更多相关文章

  1. jQuery(UI)常用插件

    jQuery 官方网站:http://jquery.com/ 下载地址:http://jquery.com/download/ 插件地址: http://plugins.jquery.com/ 常用插 ...

  2. Struts2 JQuery UI常用插件

    一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行 注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...

  3. Easy UI常用插件使用

    一.easy UI是类似于jQuery UI的插件库,它提供了丰富的各种常用插件:tree.datagrid... tree插件: 语法:$(selector).tree([settings]); 常 ...

  4. jquery的常用插件

    jquery的常用插件jquery的常用插件jquery的常用插件jquery的常用插件jquery的常用插件 放大镜: cloud-zoom(这个效果很炫) 图片查看: fancybox(灯箱) t ...

  5. JQuery UI Draggable插件使用说明文档

    JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.Draggable的元素受css: ui-draggable影响, 拖动过程中的css: ui-draggable-drag ...

  6. Jquery UI 和Easy UI常用插件

    一.Jquery的插件简介 (一)什么是插件 插件(Plug-in)是一种遵循一定的应用程序接口规范编写出来的程序,是原有系统平台或应用软件平台功能的一种扩展和补充. 注意!!其只能在程序规定的系统平 ...

  7. 使用requireJS的shim参数 解决插件 jquery.ui 等插件问题

    没有requireJS框架之前,如果我们想使用jquery框架,会在HTML页面中通过<script>标签加载, 这个时候jquery框架生成全局变量$和jQuery等全局变量.如果项目中 ...

  8. 三、jQuery--jQuery基础--jQuery基础课程--第10章 jQuery UI型插件

    1.拖曳插件——draggable 拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格 ...

  9. jQuery UI dialog插件出错信息:$(this).dialog is not a function

    使用jQuery UI 1.7.2 dialog插件,遇到这样的错误: [img]http://dl.iteye.com/upload/attachment/308166/97c428e4-2ce2- ...

随机推荐

  1. wydomain

    目标系统信息收集组件,完全模块化,脚本均可拆可并.可合可分的使用! 运行流程 利用FOFA插件获取兄弟域名,并透视获取到的子域名相关二级域名.IP信息 检查域名和兄弟域名是否存在域传送漏洞,存在就遍历 ...

  2. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q49-Q51)

    Question 49You are designing a SharePoint 2010 intranet site for a corporation. Your design must mee ...

  3. [Android]仿新版QQ的tab下面拖拽标记为已读的效果

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/4182929.html 可拖拽的红点,(仿新版QQ,tab下面拖 ...

  4. JavaScript学习07 内置对象

    JavaScript内置对象 图像对象 导航对象 窗口对象 屏幕对象 事件对象 历史对象 文件对象(重要) 锚点对象 链接对象 框架对象 表单对象(重要) 位置对象 JS Window 窗口对象:ht ...

  5. 使用mac 终端利用alias设置快捷命令

    在终端中输入快捷命令可以提高工作效率,同时可以少记很多命令 如何做: 首先在~/目录下编辑 .bash_profile这个隐藏文件,如果你想直接双击此文件打开编辑的话请在终端输入 Mac 显示隐藏文件 ...

  6. 【代码笔记】iOS-等待动画

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  7. Android中将xml布局文件转化为View树的过程分析（上）

    有好几周没写东西了,一方面是因为前几个周末都有些事情,另外也是因为没能找到好的写作方向,或者说有些话题 值得分享.写作,可是自己积累还不够,没办法只好闷头继续研究了.这段时间一边在写代码,一边也在想A ...

  8. <a href>传参的中文乱码问题

    版权声明:本文为博主半原创文章,未经博主允许不得不转载时允许转载 :) 当需要href进行传参,参数为中文时,会出现乱码问题,最简单的方法是: 传入的值首先用escape()进行转码,然后在取值页面用 ...

  9. Linux PHP5.3升级PHP5.5.33 (CentOS)

    由于要使用了laravel5.1,php要升级到5.5以上.具体环境是Aliyun Cent OS 7.0.由于阿里的yum源lastest只有5.4,laravel5.1必须php5.5,加了几个网 ...

  10. Virtual Box 杂记

    1. Virtual Box后台运行 a. VBoxManage startvm yourvmname --type headlessb. VBoxHeadless --startvm yourvmn ...