一、什么是插件

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

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

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

注：由于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. js一些代码方法

    概要 1.替换json对象中属性值(包括子对象) 2.兼容多个$库写法(zepto与jquery) 3.闭包保持变量的做法 详情 1.替换json对象中属性值(包括子对象) //替换json对象属性值 ...

  2. BPM配置故事之案例8-根据表单数据调整审批线路

    Boss突然来到:小明啊,咱们的物资申请金额现在既然可以确定了,以后金额在1万以下的申请单,就不用我审批了.直接通过就行了. 小明:好的 然后小明把流程线路改成了这样. 线路条件1 线路条件2

  3. WCF分分钟入门

    近来学习wcf,总结了一下入门的经验,小白的入门篇,也方便以后复习,省的去查质料. 第一步:创建wcf程序,程序初始化有一个接口和一个实现类写个简单的返回方法就可以了: 第二步:创建一个宿主,也就是服 ...

  4. 操作系统开发系列—10.内核HelloWorld ●

    a.我们先来体验一下在Linux下用汇编编程的感觉,见代码 [section .data] ; 数据在此 strHello db "Hello, world!", 0Ah STRL ...

  5. TFS中向源代码方案中添加文件

    一些情况下,不能使用VS提供的菜单直接将文件添加到源代码项目,例如该文件是使用TT生成的,或者依赖于其它文件     此时可以在此文件的父级依赖文件上右击,即可添加未受托管的文件     另一种方法, ...

  6. HTML5设计网页熔岩灯导航（navigation bar）插件 已经加上完整源代码

    导航栏(navigation bar): 1.指位于页眉区域的,在页眉横幅图片上边或下边的一排水平导航按钮,它起着链接博客的各个页面的作用. 2.网页设计中不可缺少的部分,它是指通过一定的技术手段,为 ...

  7. linux 中的 tar 解压

    Type at the command prompt tar xvzf file-1.0.tar.gz - tgfo uncompress a gzip tar file (.tgz or .tar. ...

  8. ThreadLocal源码分析

    1.概述 ThreadLocal,可以理解为线程的局部变量,作用就是为每一个使用该变量的线程都提供一个变量值的副本,每一个线程都可以独立地改变自己的副本,而不会和其它线程的副本冲突. ThreadLo ...

  9. 【转】RHadoop实践系列之二：RHadoop安装与使用

    RHadoop实践系列之二:RHadoop安装与使用 RHadoop实践系列文章,包含了R语言与Hadoop结合进行海量数据分析.Hadoop主要用来存储海量数据,R语言完成MapReduce 算法, ...

  10. 基础篇之 Create Type

    Create Type 的话呢,是创建一个自定义的数据类型,等于说为常用的数据类型建造一个别名的样纸.然后就可以通用当前数据库的当前架构.(当然了,一般来说我们都是使用dbo架构,所以都会无事前面那个 ...