基于jQuery的JavaScript UI设计

jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库，是jquery官方推出的配合jquery使用的用户界面组件集合！包含了许多的界面操作功能。

无论是jQuery UI 还是jQuery的EasyUI框架都能够帮助你，使你建立你的网页很容易。

 

jQuery UI 或者easyui是一个用户界面插件集合jQuery的基础。

使用jQuery UI 或者easyui你不需要写很多JavaScript代码，你通常定义写一些HTML标记的用户界面。

jQuery UI 或者easyui是很容易的，但功能强大。

 

使用jQuery UI或者easyui你都需要在你的页面中加入一些js和css文件，当然，你也可以自己去定义自己需要的css。

jQuery UI和easyui都是一些我们可以拿来使用的工具，他们都封装好了，他们经过了不同版本的编写，让我们在使用的时候不用去考虑浏览器兼容性，免去了在写页面时候最容易出现的不同浏览器间不能够兼容的问题，可以直接使用，是真正的“拿来主义”。

 

 

jQuery UI和easyui他们所提供的插件的功能有所不同。

jQuery UI所提供的功能共有三大类，其中包括Interactions，Widgets，和Effects。

Interactions中包含Draggable，Droppable，Resizable，Selectable，Sortable这些功能供我们选择，

Widgets类中包含Accordion，Datepicker，Dialog，Progressbar，Slider，Tabs这些不同的功能。

Effects类中包含Add Class，Remove Class，Animate，Effect，show，Switch Class，Toggle，Toggle Class这些功能。

每一个功能都会有不同的属性呈现不同的效果，稍后我会具体的讲解每一个功能的用法。

 

而easyui共包含7大类。

第一类是Base，包含EasyLoader，Draggable，Droppable，Resizable四个方面。

第二类是Layout，包含Panel，Tabs，Accordion，Layout四个方面。

第三类是Menu and Button，包含Menu，Link Button，Menu Button，Split Button四个创建按钮的效果。

第四类是Form，包含Form，ComboBox，ComboTree，NumberBox，ValidateBox，DateBox，Calendar这几个不同的表单需求。

第五类是Window，包含window，Dialog，Message。

第六类是DataGrid and Tree， 包含Pagination，DataGrid，Tree。

 

 

 

 

我们先来看一下jQuery UI各个功能的具体用法。

我们从Interactions中的Draggable开始。

"EN-US">Draggable有较多的效果，从它所给出方法的参数不同，可以达到不同的效果，它所要用到jquery-1.3.2.js，ui.core.js，ui.draggable.js这三个js文件。它所给出的方法是draggable()，给它不同的参数，它可以实现种不同的效果。

我们先看一下它是第一个效果(默认属性)（Default functionality），可以在页面中用鼠标随意拖动一个DOM element在你可以看见的范围内，它所用的代码为：

很简单，只要这几行代码你就可以实现一个javascript特效。

我们再看第二个效果（Events）下面这段代码：

这段代码比之前的代码要复杂，所实现的效果也更多，它可以计算你共拖动了多少次DOM和你共拖动了多少距离。

它通过在draggable方法内增加的一个数组counts来存储开始和结束时的次数，和你一共拖动的距离。

我们再看第三个效果（Constrain movement），代码：

分别调用了五次draggable方法，每次都给draggable方法不同的参数，实现不同的效果。第一个方法调用是让DOM只能够上下移动，第二个方法调用实现让DOM只能够左右移动，第三个方法调用实现让DOM只能在给它规定的box内移动，第四个方法调用就实现可以在box外移动，而第五个方法调用则是让DOM只能在它的父节点内移动。

第四个效果（Delay start），代码：

       

它给的参数有一定的限制作用，例如distance:20，就说明你必须要拖动20px以上它才会有效果，否则它是不会让你拖动的，而delay则是延时，是说你要等到1000ms以后你才能够拖动它。

第五个效果（Snap to element or grid）

       

       

第一个参数是DOM可以自动吸附在其它的box边缘上，第二个参数是让DOM可以吸附在大的box边缘，里外侧都可，第三个参数让DOM只能吸附在box的外侧，而里侧没有效果，第四个参数是让DOM只能移动到20,20的倍数这样的地方，第五个参数和第四个参数是一样的，只是给的数据不同。

第六个效果（Auto-scroll）

 

 

第七个效果（Revert position）

参数revert设定，使DOM被拖动后返回原来的位置。加上helper：’clone’属性，则在拖动的时候在原先DOM的地方依旧显示DOM。

 

第八个效果（Visual feedback）

第一个DOM可以正常的拖动，第二个DOM拖动后会返回原来的位置，helper属性上面讲过了，opacity属性则是设定DOM的透明度。第三个DOM在你实施拖动的时候，会显示一个I'm a custom helper的DIV给你。

而后面三个DOM，每拖动一个DOM会让被拖动的DOM在其它的两个DOM外层，也就是最上面。

第九个效果（Drag handle）

在这两个DOM中每个DIV中都嵌套一个p标签，每个handle属性表明鼠标在点击在P标签上才能够拖动DOM，而第二个cancel表明要点击在不是P标签的DIV中才能够拖动DOM。

第十个效果（Cursor style）

第一个DOM中的参数是说在拖动DOM的时候，在水平方向上移动，会先向相反的方向移动56px，垂直方向上也是一样。第二个DOM说明在小范围移动或者双击时会让DOM往上移动-5,左移动-5,实际上就是向下和向右各移动5,第三个DOM是在小范围拖动或双击时会向上移动。

第十一个效果（Draggable + sortable）

以上代码是让页面中的ul和li元素在拖动的同时呈现出sortable的效果。

 

第二个介绍的是 "EN-US">droppable，它包含有六个效果，它分别要用到 "EN-US">jquery-1.3.2.js， "EN-US">ui.core.js， "EN-US">ui.droppable.js， "EN-US">ui.draggable.js这四个js文件。

 

先看第一个（Default functionality）

上面代码表示当DOM拖动到指定的DOM中，该DOM背景色变，增加一个class效果。

第二个（Accepted elements），代码：

上面代码分别给两个DOM都用了Draggable方法让其可以拖动，然后对其第二个DOM用了droppable（）方法，并且给了hoverCalss，让拖动到指定的DOM上浮动时候也产生效果，并且当放开鼠标后再次产生一个效果。

第三个（Prevent propagation），代码：

首先给第一个DOM可以拖动的效果，然后给第二个大DOM和第三个DOM都调用droppable()方法，所不同的是第二个方法中在调用drop时候返回一个false,而第三个不返回，第三个DOM在一开始就调用greedy:true,它们分别表示了，当将第一个DIV拖动到同级的第二个DIV的时候，如果拖动到它同级的DIV上时，只有外层DIV会产生效果，如果拖动到内层的DIV时，则整个DIV都产生效果，也就是包含外层同级的DIV，而第三个函数调用后只是你拖动到哪个层的DIV，哪个层的DIV产生效果。

第四个（Visual feedback）代码：

这个也同样让其中两个DOM可以拖动让另外两个相对应的DOM上，这次相对应的两个DOM分别调用了hoverCalss和activeClass以产生不同的效果。他们都是在鼠标拖动DOM浮动在其上所表现出的不同。

第五个（Revert draggable position）代码：

同样，给其中两个DOM可拖动效果，然后分别拖动两个DOM到指定的DOM上。他们在调用draggable（）方法时就给了不同的revert参数，让其分别拖动到指定DOM上产生不同效果，第一个效果是当拖动到指定的DOM上后，它返回到原来的位置，而指定的DOM也产生相应的效果，第二个效果是当拖动到指定的DOM上后，指定DOM产生相应效果，当把其再拖出时，它返回到原来所在DOM的位置。

第六个（Simple photo manager），代码：

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript