jQuery技术

jQuery UI 入门之实用实例

字号+ 作者:H5之家 来源:H5之家 2017-06-13 12:05 我要评论( )

jQuery UI 入门之实用实例

jQuery UI 入门

jQuery UI 简介

jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery UI 都是一个完美的选择。jQuery UI 包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(Widget)。

jQuery UI 特性

简单易用: 

继承 jQuery 简易使用特性,提供高度抽象接口,短期改善网站易用性。

开源免费

采用 MIT & GPL 双协议授权,轻松满足自由产品至企业产品各种授权需求。

广泛兼容

兼容各主流桌面浏览器。包括IE 6+、Firefox 2+、Safari 3+、Opera 9+、Chrome 1+。

轻便快捷

组件间相对独立,可按需加载,避免浪费带宽拖慢网页打开速度。

标准先进

支持 WAI-ARIA,通过标准 XHTML 代码提供渐进增强,保证低端环境可访问性。

美观多变

提供近 20 种预设主题,并可自定义多达 60 项可配置样式规则,提供 24 种背景纹理选择。

开放公开

从结构规划到代码编写,全程开放,文档、代码、讨论,人人均可参与。

强力支持

Google 为发布代码提供 CDN 内容分发网络支持。

完整汉化

开发包内置包含中文在内的 40 多种语言包。

缺点、不足

  • 1.代码不够健壮:缺乏全面的测试用例,部分组件 Bugs 较多,不能达到企业级产品开发要求。
  • 2.构架规划不足:组件间 API 缺乏协调,缺乏配合使用帮助。
  • 3.控件较少:相对于 Dojo、YUI、Ext JS 等成熟产品,可用控件较少,无法满足复杂界面功能要求。
  • jQuery UI 下载

    下载地址: 

    jQuery UI 使用

    在网页中使用

    下载完成后需至少引入3个文件

    <link type="text/css" href="css/jquery-ui.min.css" />

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script src="js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>

    若需要相应图标功能时,需将images文件夹放入你的项目css文件夹下: 

    如图: 

    //日期控件

    $("#data").datepicker({

    //月份可改变

    changeMonth: true,

    //年份可改变

    changeYear: true

    });

    拖动滚动

    在任意的 DOM 元素上启用 draggable 功能。通过鼠标点击并在视区中拖动来移动 draggable 对象。

    CSS

    #drag {

    width: 100px;

    height: 100px;

    background: red;

    }

    HTML

    <!--拖动滚动-->

    <div></div>

    JS

    //可拖拽 可拖动滚动

    $("#drag").draggable({

    scroll: true

    });

    缩放

    在任意的 DOM 元素上启用 resizable 功能。通过鼠标拖拽右边或底边的边框到所需的宽度或高度。

    HTML 共用上个div#drag

    JS

    //缩放

    $("#drag").resizable({

    //有动画效果

    animate: true,

    //阴影效果

    ghost: true

    });

    拖动排序

    在任意的 DOM 元素上启用 sortable 功能。通过鼠标点击并拖拽元素到列表中的一个新的位置,其它条目会自动调整。默认情况下,sortable 各个条目共享 draggable 属性。

    HTML

    <!--拖动排序-->

    <ul>

    <li>111111111</li>

    <li>2222222222</li>

    <li>33333333333</li>

    </ul>

    JS

    //拖动排序

    $("#sortable").sortable();

    折叠面板

    点击头部展开/折叠被分为各个逻辑部分的内容,就像标签页(tabs)一样。您可以选择性地设置当鼠标悬停时是否切换各部分的打开/关闭状态。

    HTML

    <!--折叠面板-->

    <div>

    <h3>部分 1</h3>

    <p>abitur malesuada.</p>

    <h3>部分 2</h3>

    <p>Sed non urna.</p>

    </div>

    JS

    //折叠面板

    $("#accordion").accordion();

    对话框窗口

    对话框窗口是一个定位于视区中的覆盖层,同时通过一个 iframe 与页面内容分隔开(就像 select 元素)。它由一个标题栏和一个内容区域组成,且可以移动,调整尺寸,默认可通过 'x' 图标关闭。

    HTML

    <!--对话框-->

    <div title="对话框">

    <p>显示本内容,可以移动,点击x可关闭</p>

    </div>

    JS

    //对话框

    $("#dialog").dialog();

    带有图标的菜单

    一个带有默认配置、禁用条目和嵌套菜单的菜单。由一个列表转化成的,添加了主题,并支持鼠标和键盘交互。尝试使用光标键导航菜单。

    CSS

    //菜单栏的宽度

    .ui-menu { width: 150px; }

    HTML

    <ul>
    //通过添加类名 ui-icon ui-icon-disk调用图标

    <li><a href="#"><span></span>保存</a></li>

    <li><a href="#"><span></span>放大</a></li>

    <li><a href="#"><span></span>缩小</a></li>
    //通过添加类名实现选项不可用状态

    <li><a href="#"><span></span>打印...</a></li>

    <li>

    <a href="#">播放</a>

    <ul>

    <li><a href="#"><span></span>上一个</a></li>

    <li><a href="#"><span></span>停止</a></li>

    <li><a href="#"><span></span>播放</a></li>

    <li><a href="#"><span></span>下一个</a></li>

    </ul>

    </li>

    </ul>

    JS

    //菜单栏

    $( "#menu" ).menu();

    预加载进度条

    等待加载过程,并完成进度条。

    CSS

    .ui-progressbar {

    position: relative;

    }

    .progress-label {

    position: absolute;

    left: 50%;

    top: 4px;

    font-weight: bold;

    text-shadow: 1px 1px 0 #fff;

    }

    HTML

    //进度条初始状态

    <div><div>加载...</div></div>

    JS

    $(function() {

    var progressbar = $( "#progressbar" ),

    progressLabel = $( ".progress-label" );

    progressbar.progressbar({

    value: false,

    change: function() {

    progressLabel.text( progressbar.progressbar( "value" ) + "%" );

    },

    complete: function() {

    progressLabel.text( "完成!" );

    }

    });

    function progress() {

    var val = progressbar.progressbar( "value" ) || 0;

    progressbar.progressbar( "value", val + 1 );

    if ( val < 99 ) {

    setTimeout( progress, 100 );

    }

    }

    setTimeout( progress, 3000 );

    });

    jQuery UI API 文档

  • Effects
  • Effects Core
  • Interactions
  • Method Overrides
  • Methods
  • Selectors
  • Theming
  • UI Core
  • Utilities
  • Widgets
  • 官方中文版API地址: 

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 通过jQuery源码学习javascript(二)

      通过jQuery源码学习javascript(二)

      2017-06-14 17:03

    • 关于JQuery的技巧、易错点(连载中.....)

      关于JQuery的技巧、易错点(连载中.....)

      2017-06-11 15:01

    • jQuery实战(SW3012)

      jQuery实战(SW3012)

      2017-06-10 13:03

    • 学习jquery插件之DataTables(1)

      学习jquery插件之DataTables(1)

      2017-06-10 13:03

    网友点评