一、什么是插件

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

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

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

注：由于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. .net中xml文件的导入使用（包括创建xml和导入xml）

    上次有说到.net 创建xml文件的方法(一种固定方式,一种动态方法),这次记录一下怎样导入xml文件 1.导入xml文件的方法 1)xml文件格式

  2. js正则表达式中test,exec,match方法的区别

    test test 返回 Boolean,查找对应的字符串中是否存在模式.var str = "1a1b1c";var reg = new RegExp("1." ...

  3. composer 代码库管理

    composer 代码库管理 参考资料:https://packagist.org/about#naming-your-package简介composer 命令的请求源是 packagist.org* ...

  4. J2EE的13种核心技术

    一.JDBC(Java Database Connectivity) JDBC API为访问不同的数据库提供了一种统一的途径,象ODBC一样,JDBC对开发者屏蔽了一些细节问题,另外,JDBC对数据库 ...

  5. ABP之模块分析

    本篇作为我ABP介绍的第三篇文章,这次想讲下模块的,ABP文档已经有模块这方面的介绍,但是它只讲到如何使用模块,我想详细讲解下它模块的设计思路. ABP 框架提供了创建和组装模块的基础,一个模块能够依 ...

  6. IOS应用内存释放机制

    这是由iOS系统管理决定的,但APP退出在后台后,只有10秒的持续运行时间,然后暂停.但该APP还在内存中,当出现内存警告,也就是别的APP要运行,而此时内存又不足的情况下,系统会回收停在后台APP所 ...

  7. 【百度文库课程】Java语言基础与OOP入门学习笔记一

    一． Java的历史与由来 原名Oak,针对嵌入式系统开发设计,语法与C/C++基本一致 二． Java语言特点 Java由四方面组成:Java编程语言.Java类文件格式.Java虚拟机和Java应 ...

  8. SharePoint 2013 Excel Services ECMAScript 示例之明日限行

    前言:最近遇到一个“明日限行”的功能,北京的交通啊,这个不在今天讨论范围内,暂不吐槽,想想代码开发,还要写WebPart部署,很麻烦,而且部署服务器,需要领导审批,想绕过这个麻烦事儿,就想到客户端了, ...

  9. SharePoint 2013 工作流平台的选项不可用

    问题描述 当我想创建一个SharePoint 2013 工作流的时候,打开SharePoint 2013 Designer(一下简称SPD),发现没有SharePoint 2013 工作流的选项.原来 ...

  10. Unity V3 初步使用 —— 为我的.NET项目从简单三层架构转到IOC做准备

    [声明]由于本人表达能力有限,为避免不必要的误人子弟,本文将不会涉及IOC与DI,仅仅描述新版本Unity 3的使用(非Unity 3D,如果您想看的是Unity 3D请立即离开,否则莫怪此处“谋财害 ...