zoukankan      html  css  js  c++  java
  • jQuery UI

      /  2011.11  /

    1.   什么是jQuery UI

             jQuery UI是以jQuery 为基础的、开源的javaScript网页用户界面代码库。包含底层用互交互、动画、特效和可更换主题的可视控件。我们可以真接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容IE6.0+,Firefox 3+,Safari3.1+,Opera 9.6+和Google Chrome。

    jQuery UI实际上是jQuery插件,专指由jQuery官方维护的UI方向的插件

    jQuery UI 与 jquery 的主要区别是:

      (1) jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。

      (2) jQuery UI则是在jQuery的基础上,利用jQuery的扩展性,设计的插件。提供了一些常用的界面元素,诸如对话框、拖动行为、改变大小行为等等。

      (3) jQuery本身注重于后台,没有漂亮的界面,而jQuery UI则补充了前者的不足,他提供了华丽的展示界面,使人更容易接受。既有强大的后台,又有华丽的前台。

            

    2.   jQuery UI 的主要特点

    1、开源

             jQuery UI的源代码是开放的,可以到jQuery UI的官方网站http://jqueryui.com/download下载。最新的版本是jquery-ui-1.8.16.custom.zip。在下载的时候可根据需要下载需要的组件。

    2、可裁剪

            用户可以根据需要只引入用到的组件所依赖的文件。比如只用到日期组件的话,只要在网页的头中加入以下代码:
            <script src="jquery-1.6.2.js"></script>
            <script src="ui/jquery.ui.core.js"></script>
                        <script src="ui/jquery.ui.widget.js"></script>
                        <script src="ui/jquery.ui.datepicker.js"></script>
    并在网页中加入一个text input元素,然后用它调用.datepicker()。
     
    例如:
            <input type=”text” name=”date” id=”date”/>
    Js:
     
            $(‘#date’).datepicker();
     
    结果:
            

    3、用户可自定义

    I、组件属性自定义

    每一个组件有一组默认配置。你可以通过”optons”重写任何配置。Options实际上是一组属性被当作参数传递给jQuery UI组件。

    比如:

    slider组件有一个属性orientation(方向),你可以通过设置它为horizontal 或是 vertical来决定slider在页面中显示的效果是水平的 还是 竖直的。比如:

             $(‘#mySliderDiv’).slider({

                       Orientation: ‘vertical’

    });

    你可以一次传递很多options,除了最后一个,每一个options后边要加一个逗号(,)。

             $(‘#mySliderDiv’).slider({

                      Orientation: ‘vertical’,

                      Min: 0,

                      Max: 150,

                      Value: 50

    });

    记得要把你的options 用大括号( { } )括起来,这样编程是一种好习惯。你可以访问jQuery UI documentation来获取更多详细的信息。

          II、视觉效果自定义

             如果你想自己设计组件的样式,jQuery UI提供一个非常方便的工具ThemeRoller。它提供一个可视化的用户界面,通过它可以对jQuery UI组件的所有元素进行设置。你在左侧选项卡里所做的更改会立即反映在右侧。Gallery 选项卡提供了一些预先设计好的主题。和之前的一样,你可以更改它们或是直接下载。

             在ThemeRoller选项卡一上点击“Download theme”按钮,转到下载页面,你所定义的主题会自动在主题下拉列表框中被选中,你可以继续在这里配置下载的文件包。点击按钮“Download”,你所设计的主题已经包含在文件包里了。把文件解压缩,在css目录中有一个文件jquery-ui-1.8.16.custom.css,在网页中加入

    <link type="text/css" href="路径/ jquery-ui-1.8.16.custom.css" rel="stylesheet" />

    即可应用你所定义的主题。

    提示:

             如果你想编辑你的主题,只要打开jquery-ui-1.8.16.custom.css文件,从43行开始找到:”To view and modify this theme,visit …”,打开这个URL地址即可进入ThemeRoller进行编辑。

    3.   jQuery UI开发包的组成

             jQuery UI开发包有目录:

    |------------index.html

    |

    |------------css :                                                               theme文件保存目录

    |                |----- ui-lightness :                                     主题目录(文件夹名为主题名)

    |                 |       |----- imges                                          该主题用到的图片目录

    |                |       |----- jquery-ui-1.8.16.custom.css     该主题的css样式文件

    |

    |------------js :                                                                  该文件夹和CSS文件夹都是为index.html

    |                 |                                                                         服务的

    |                |----  jquery-1.6.2.min.js

    |                |----  jquery-ui-1.8.16.custom.min.js

    |

    |------------development-bundle :                    开发包的主体

    |                |----- demos :                                              组件demo目录。可通过该文件夹下

    |                 |                                                                         index.html文件查看

    |                |----- docs :                                                  关于各个组件的文档目录

    |                |----- external :                                           扩展的js组件目录

    |                |----- thems :                                               主题文件目录

    |                |       |----- base :                                        基本的主题样式

    |                 |       |----- ui-lightness :                            和css文件夹中的内容相同 

    |                 |----- ui :                                                       各个组件所依赖的js,是jQuery UI的核心

    |                 |       |----- i18n                                               

    |                 |       |----- minified                                        

    |                 |       |----- jquery.ui.core.js                         

    |                 |       |----- jquery.ui.widget.js

    |                |       |----- jquery.ui.mouse.js

    |                 |       |----- jquery.ui.button.js

    |                 |       |----- jquery.ui.datepicker.js

    |                 |       |-----… …

    |                 |----- jquery-1.6.2.js                                      jQuery核心库文件

    |                 |----- GPL-LICENSE.txt

    |                 |----- version.txt

    |                 |----- MIT-LICENSE.txt

    |                 |----- AUTHORS.txt

                               

    4.   如何使用jQuery UI

    1、入门

          第一步:加载代码

             首先在网页中加载开发包中的jQuery核心库文件,再按需加载jquery.ui.core.js、jquery.events.core.js、jquery.ui.mouse.js、jquery.ui.widget.js及各组件代码文件。如设置可视组件外观需同时加载CSS主题文件。比如 :

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="utf-8" >
     <title>jQuery UI Slider - Default functionality</title>
     <link rel="stylesheet" href="http://www.cnblogs.com/themes/base/jquery.ui.all.css">
     <script src="http://www.cnblogs.com/jquery-1.6.2.js"></script><script src="http://www.cnblogs.com/ui/jquery.ui.core.js"></script>
     <script src="http://www.cnblogs.com/ui/jquery.ui.widget.js"></script>
     <script src="http://www.cnblogs.com/ui/jquery.ui.mouse.js"></script>
     <script src="http://www.cnblogs.com/ui/jquery.ui.slider.js"></script>
     <link rel="stylesheet" href="../demos.css">
    </head>

          第二步:创建组件实例

             每个jQuery UI组件提供一个可串联的标准的jQuery方法,创建实例时,仅需要在jQuery对像上调用组件方法。比如:

            

    $(‘#login-form’).dialog();                   //创建对话框

            

    组件方法可串联使用:

             $(‘#id’).draggable().resizable();                          //创建可拖动位置、可调整大小的对像

            

             $(‘#news-panel’).tabs().tabs(“rotate”,5000); //创建标签页,设置5秒自动切换标签

    2、属性

          设置属性值

             一般在创建实例时对属性值进行设置

                      $( ‘.class’ ).组件名({ 属性名1: 值1,属性名2: 值2});

             如:

                       $( ‘.class’ ).draggable({ axis: ‘x’, cursor:’ crosshair’ });

          获取属性值

             组件实例化后,可以通过option方法获得属性值。

                       Var a = $( “.class” ).组件名( ‘option’, 属性名 );

             如:

                       Var axis = $( ‘.class’ ).draggable( ‘option’, ’ axis’ );

          获取属性值

             组件实例化后,可以通过option方法重设属性值。

                       $( ‘.class’ ).组件名( ‘option’, 属性名, 属性值 );

             如:

                       $( ‘.class’ ).draggle( ‘option’,’axis’,’y’ );

    3、事件

             各事件均有两个参数。第一个参数为原始浏览器事件;第二个参数为包含组件相关元素、数值的参数

          设置事件

             一般在创建实例时设置事件。

                       $( ‘.class’ ).组件名({ 事件1 : 函数1, 事件2 : 函数2 });

             如:

                       $( ‘.class’ ).draggable({

                                Start : function ( event, ui ) { … } ,

                                Drag : function ( event, ui ) { … }

    });

          绑定事件

             组件实例化后,通过bind方法绑定事件。

                       $( ‘.class’ ).bind ( ‘事件类型’, 函数 );

             如:

                       $( ‘.class’ ).bind ( ‘dragstart’, function ( event, ui ) { … }  );

            

             事件类型通常为”组件名 + 事件” 或 “动作名 + 事件”,当”动作名”与”事件”相同时,仅使用”动作名”

         4、方法

             组件实例化后,可调用组件方法执行特定的功能。每个组件均有四个通用的方法:disable,enable,destroy,option,也有组件自己的特定方法。

             Disable                      禁止操作组件

             组件依然可见,但暂停响应用户操作。

             以下代码使日期选择控件暂停响应用户操作:

                       $(‘#id’).datepicker( ‘disable’ );

             Enable                                                    允许操作组件

             重新允许操作暂停响应用户操作的组件。

             以下代码使日期选择控件响应用户操作:

                       $( ‘#id’ ).datepicker( ‘enable’ );

             Destory                                                     销毁组件实例

             销毁组件实例后,由jQuery UI添加的HTML标签、DOM事件均被删除,恢复原始HTML代码。

             Option                                                    修改或获取属性值

                       详见上方”属性”说明。

         5、样式

             jQuery UI 各组件生成固定格式的 HTML 代码和 CSS 类名,可通过修改 CSS 的方式改变样式。各组件文档页将提供所生成的标准代码,可参考该代码配置 CSS。

    通过 ThemeRoller,可为 jQuery UI 制定各种主题,可配置字体、字号、文字颜色、底纹样式、底纹颜色、圆角大小等。

  • 相关阅读:
    WCF 第十三章 可编程站点 为站点创建操作
    WCF 第十三章 可编程站点 所有都与URI相关
    WCF 第十二章 对等网 使用自定义绑定实现消息定向
    WCF 第十三章 可编程站点 使用WebOperationContext
    Using App.Config for user defined runtime parameters
    WCF 第十三章 可编程站点
    WCF 第十三章 可编程站点 使用AJAX和JSON进行网页编程
    WCF 第十二章 总结
    WCF 第十三章 可编程站点 使用WebGet和WebInvoke
    WCF 第十三章 可编程站点 URI和UriTemplates
  • 原文地址:https://www.cnblogs.com/flyfly/p/2268837.html
Copyright © 2011-2022 走看看