jQuery UI 学习笔记

了解jQuery UI

1. jQuery UI是以jQuery为基础的开源JavaScript集成页面特效库，是jQuery的插件。
2. jQuery UI主要分为3个部分：交互、微件和效果库。
3. jQuery UI与jQuery的主要区别是：
   （1）jQuery是一个js库，主要提供的功能是选择器，修改属性和事件绑定等。
   （2）jQuery UI则是在jQuery的基础上，利用jQuery的扩展性设计的插件。

使用

1.首先导入jQuery、再导入jQuery UI

例如：

<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>

src中是你导入的jQuery和jQuery UI的文件地址

2.查看demo示例，找到你要使用的效果，查看其页面代码与JavaScript代码的使用。

例如：

<!-- 页面代码 -->
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    <li><a href="#tabs-3">Third</a></li>
  </ul>
  <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
  <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>

效果图：

我们在页面上需要写的JavaScript代码：

$( "#tabs" ).tabs();

使用jQuery UI 我们只要写少量的代码就能实现上面的切换页签的效果。

开发jQuery插件的原理

1.对象方法插件

 $.fn.extend(object)

2.全局插件

$.extend(object)

3.选择器插件 --几乎不用

缺点、不足

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