jQuery UI 入门之实用实例分享

Posted 2020-09-21

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 下载

下载地址: http://jqueryui.com/download/

jQuery UI 使用

在网页中使用

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

<link rel="stylesheet" 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文件夹下: 

如图: 

jQuery UI 实用实例

日期选择器

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

HTML

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

JS

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

拖动滚动

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

CSS

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

HTML

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

JS

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

缩放

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

HTML 共用上个div#drag

JS

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

拖动排序

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

HTML

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

JS

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

折叠面板

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

HTML

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

JS

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

对话框窗口

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

HTML

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

JS

//对话框
$("#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>

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 id="progressbar"><div class="progress-label">加载...</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地址: http://www.css88.com/jquery-ui-api/category/effects-core/