Shuaqiu

jQuery UI

31 Oct 2013

  1. jQuery UI 是什么

    jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。

  2. jQuery UI 有什么

    jQuery UI 主要分为3个部分：Interactions、Widgets和Effects。

+ Interactions

    一些与鼠标交互相关的内容，包括Draggable（拖动）、Droppable（放置）、Resizable（缩放）、Selectable（可选）、Sortable（排序）等。

+ Widgets

    主要是一些界面的扩展，包括Accordion（手风琴堆叠）、AutoComplete（自动完成）、Button（按钮）、Datepicker（日期选择）、Dialog（对话框）、Menu（菜单）、ProgressBar（进度条）、Slider（滑条）、Spinner（数字微调）、Tabs、Tooltip（提示）等。

    jQuery UI有丰富的主题，可以非常方便地更换widget主题，也可以自己自定义主题。

+ Effects

    用于提供丰富的动画效果，让动画不再局限于jQuery的animate()方法。

  1. jQuery UI 没有什么

    jQuery UI 没有Datagrid、没有Tree、没有Layout、没有ComboBox、没有RichTextEditor、更没有Mobile支持、……。

  2. 一个简单示例

+  引用

```
<link rel="Stylesheet" type="text/css" href="themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.accordion.js"></script>
```

+ 实现代码

```
<div id="accordion" class="ui-widget-content"   style="height: 80%;">
     <h6><a href="#">用户管理</a></h6>
     <div>...</div>
     <h6><a href="#">商品管理</a></h6>
     <div>...</div>
     <h6><a href="#">订单管理</a></h6>
     <div>
     　　<ul>
           <li><a href="#">订单管理</a></li>
           <li><a href="#">收货地址管理</a></li>
           <li><a href="#">退货管理</a></li>
        </ul>
     </div>
     <h6><a href="#">统计</a></h6>
     <div>...</div>
</div>
```

```
//初始化手风琴
function initAccordion(){
    $('#accordion').accordion({
        collapsible: true
    });
}

$(document).ready(function() {
    //手风琴
    initAccordion();
});
```

+ 实现效果

    ![jQuery UI Tab](/img/jQuery UI/jQueryUI-accordion.png)

+ 方法调用

```
// getter
var active = $('#accordion').accordion('option', 'active');

// setter
$('#accordion').accordion('option', 'active', 2);
```
  1. jQuery UI可以用来做什么
+ Interactions

    通用的鼠标交互效果，可以简化页面的交互的实现方式，比如拖动、排序。

+ Widgets

    只是一些界面的小组件，提供的组件比较有限，只能用于页面部分效果的处理，无法像Dojo、ExtJs那样代替整个页面的实现。另外，大部分组件和Bootstrap重复了。

    jQuery UI提供丰富的主题，并可以进行自定义。

    不过jQuery UI提供了扩展自定义widget的方式，另外也有一些开源的扩展widget实现，比如http://quasipartikel.at/multiselect 中的MultiSelect

    PS：个人感觉jQuery UI 的界面效果做得不怎么样，自带的theme效果也不是很好，例如：

    jQuery UI

    ![jQuery UI Tab](/img/jQuery UI/jQueryUI-tab.png)

    Bootstrape

    ![Bootstrap Tab](/img/jQuery UI/bootstrap-tab.png)

+ Effects

    对jQuery动画的扩展，实际使用中并不是很必要，也不是很有意义。

综上，jQuery UI 的widget和Effect意义并不是很大。反倒是Interactions更实用一些。

更多