一、什么是插件

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

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

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

注：由于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. Visual Studio中UnitTesting单元测试模板代码生成

             在软件研发过程中,单元测试的重要性直接影响软件质量.经验表明一个尽责的单元测试方法将会在软件开发的某个阶段发现很多的Bug,并且修改它们的成本也很低.在软件开发的后期阶段,Bug的发 ...

  2. 转载：C#中的泛型

    泛型(generic)是C#语言2.0和通用语言运行时(CLR)的一个新特性.泛型为.NET框架引入了类型参数(type parameters)的概念.类型参数使得设计类和方法时,不必确定一个或多个具 ...

  3. OData V4 系列 Action 与 Function

    OData 学习目录 了解过WebApi的都知道,WebApi默认方法 Get.Post.Put,如果增加其它过多Post方法即不能识别,还需增加其它配制,请求的Url还需加上Controller及A ...

  4. 破壳漏洞利用payload—shellshock in the wild

    FireEye关于破壳漏洞(shellshock)在现实中的利用有一篇文章: shellshock in the wild 原文较长,进行了对CGI利用的详细分析,笔者比较感兴趣的是Shellshoc ...

  5. DVWA安装，ALMP环境搭建以及php版本转换

    前言 本文记录DVWA(Damn Vulberability Web App)在虚拟机中安装配置,包括ALMP环境的搭建和php版本的转换. 目录 2. ALMP环境搭建 3. php版本切换 一. ...

  6. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q144-Q146)

    Question  144 You are planning a feature upgrade for a SharePoint 2010 farm. The original feature wi ...

  7. Android—自定义控件实现ListView下拉刷新

    这篇博客为大家介绍一个android常见的功能——ListView下拉刷新(参考自他人博客,网址忘记了,阅读他的代码自己理解注释的,希望能帮助到大家): 首先下拉未松手时候手机显示这样的界面: 下面的 ...

  8. Html5的一些基础知识

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>页面 ...

  9. Android开发学习——开发调试工具-DDMS应用，ADB进程,Logcat

    DDMS --  Dalvik debug monitor service    调试监控服务 对模拟器进行相关配置. ADB进程   Android debug bridge  建立eclipse和 ...

  10. sqlite 数据类型

    title: SQLITE 数据类型date: 2015-11-20 20:30:52categories: IOS tags: sqlite数据类型 小小程序猿我的博客:http://daycodi ...