jQuery UI的简介和特性介绍

零下一度

发布： 2017-06-26 14:50:10

原创

1594 人浏览过

　　　　　　　　　　　　　　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 rel="stylesheet" type="text/css" href="css/jquery-ui.min.css?1.1.11" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js?1.1.11"></script>
<script src="js/jquery-ui.min.js?1.1.11" type="text/javascript" charset="utf-8"></script>

登录后复制

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

如图:

jQuery UI 实用实例

日期选择器

日期选择器（Datepicker）绑定到一个标准的表单 input 字段上。

HTML

<!--日期-->
<input type="text" name="data" id="data" value="" />

登录后复制

//日期控件
$("#data").datepicker({
    //月份可改变
    changeMonth: true,
    //年份可改变
    changeYear: true
});

登录后复制

拖动滚动

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

CSS

#drag {
   width: 100px;
   height: 100px;
   background: red;
}

登录后复制

HTML

<!--拖动滚动-->
<div id="drag"></div>

登录后复制

//可拖拽 可拖动滚动
$("#drag").draggable({
    scroll: true
});

登录后复制

缩放

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

HTML 共用上个div#drag

//缩放
$("#drag").resizable({
    //有动画效果
    animate: true,
    //阴影效果
    ghost: true
});

登录后复制

拖动排序

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

HTML

<!--拖动排序-->
<ul id="sortable">
    <li>111111111</li>
    <li>2222222222</li>
    <li>33333333333</li>
</ul>

登录后复制

//拖动排序
$("#sortable").sortable();

登录后复制

折叠面板

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

HTML

<!--折叠面板-->
<div id="accordion">
    <h3>部分 1</h3>
    <p>abitur malesuada.</p>
    <h3>部分 2</h3>
    <p>Sed non urna.</p>
</div>

登录后复制

//折叠面板
$("#accordion").accordion();

登录后复制

对话框窗口

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

HTML

<!--对话框-->
<div id="dialog" title="对话框">
<p>显示本内容,可以移动,点击x可关闭</p>
</div>

登录后复制

//对话框
$("#dialog").dialog();

登录后复制

带有图标的菜单

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

CSS

//菜单栏的宽度
.ui-menu { width: 150px; }

登录后复制

HTML

<ul id="menu">
　　//通过添加类名 ui-icon ui-icon-disk调用图标
  <li><a href="#"><span class="ui-icon ui-icon-disk"></span>保存</a></li>
  <li><a href="#"><span class="ui-icon ui-icon-zoomin"></span>放大</a></li>
  <li><a href="#"><span class="ui-icon ui-icon-zoomout"></span>缩小</a></li>
　　//通过添加类名实现选项不可用状态
  <li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-print"></span>打印...</a></li>
  <li>
    <a href="#">播放</a>
    <ul>
      <li><a href="#"><span class="ui-icon ui-icon-seek-start"></span>上一个</a></li>
      <li><a href="#"><span class="ui-icon ui-icon-stop"></span>停止</a></li>
      <li><a href="#"><span class="ui-icon ui-icon-play"></span>播放</a></li>
      <li><a href="#"><span class="ui-icon ui-icon-seek-end"></span>下一个</a></li>
    </ul>
  </li>
</ul>

登录后复制

//菜单栏
$( "#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 id="progressbar"><div class="progress-label">加载...</div></div>

登录后复制

 $(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 );
  });

登录后复制