一、什么是插件

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

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

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

注：由于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:2000

              },

              //隐藏

              hide:{

              effect:'explode',

              duration:2000

              }

          }) 

      }); 

  </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>

Struts2 JQuery UI常用插件的更多相关文章

  1. jQuery(UI)常用插件

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

  2. 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. 解决BUG:CS1617: 选项“6”对 /langversion 无效；必须是 ISO-1、ISO-2、3、4、5 或 Default

    vs 2015的项目用vs2013,更改.net版本之后,打开会报以下错误,原因是配置文件修改出了问题.已经验证是BUG 你只需要把Web.config换成以前的就好了.   https://conn ...

  2. 第 3 章 VBScript流程控制

    学习导航 if...then...else...end if select case...select end for...next do while ... while wend 3.1 认识流程控 ...

  3. JDK源码分析：hashCode()方法

    提问: 1.hashCode()源码是怎么实现的. 2.hashCode()是为了配合基于散列的集合而设计的 3.hash数据结构,如何做到存取的时间复杂度为O(1)的.{函数算>逐个比较} 答 ...

  4. 【转】Cookie和Session区别和联系详解

    会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...

  5. 如何使 WebAPI 自动生成漂亮又实用在线API文档

    1.前言 1.1 SwaggerUI SwaggerUI 是一个简单的Restful API 测试和文档工具.简单.漂亮.易用(官方demo).通过读取JSON 配置显示API. 项目本身仅仅也只依赖 ...

  6. [转] js实现html table 行，列锁定

    js实现html table 表头,指定列锁定 实现效果如下: 感兴趣的朋友可以直接复制出来运行看效果. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTM ...

  7. 转：什么是即时编译（JIT）！？OpenJDK HotSpot VM剖析

    重点 应用程序可以选择一个适当的即时编译器来进行接近机器级的性能优化. 分层编译由五层编译构成. 分层编译提供了极好的启动性能,并指导编译的下一层编译器提供高性能优化. 提供即时编译相关诊断信息的JV ...

  8. [ASP.NET MVC] ASP.NET Identity登入技术剖析

    [ASP.NET MVC] ASP.NET Identity登入技术剖析 前言 ASP.NET Identity是微软所贡献的开源项目,用来提供ASP.NET的验证.授权等等机制.本篇文章介绍ASP. ...

  9. [deviceone开发]-do_SegmentView和do_SlideView联动的示例

    一.简介 示例展示do_SegmentView和do_SlideView联动的使用,这二个组件很常用,而且这个组合也非常常用,类似网易新闻的效果,上面滑动带动下面的slideview滑动,反过来也是. ...

  10. jquery中 $(document).ready()和window.onload的区别

    1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 ...