无论是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在你可以看见的范围内，它所用的代码为：
<script type="text/javascript">
$(function() {
$(#draggable).draggable();
});
</script>
很简单，只要这几行代码你就可以实现一个javascript特效。
我们再看第二个效果（events）下面这段代码：
<script type="text/javascript">
$(function() {
var $start_counter = $('#event-start'), $drag_counter = $('#event-drag'), $stop_counter = $('#event-stop');
var counts = [0,0,0];
$(#draggable).draggable({
start: function() {
counts[0]++;
updatecounterstatus($start_counter,counts[0]);
},
drag: function() {
counts[1]++;
updatecounterstatus($drag_counter,counts[1]);
},
stop: function() {
counts[2]++;
updatecounterstatus($stop_counter,counts[2]);
}
});
});
function updatecounterstatus($event_counter,new_count) {
// first update the status visually...
if (!$event_counter.hasclass('ui-state-hover')) {
$event_counter.addclass('ui-state-hover')
.siblings().removeclass('ui-state-hover');
}
// ...then update the numbers
$('span.count',$event_counter).text(new_count);
}
</script>
这段代码比之前的代码要复杂，所实现的效果也更多，它可以计算你共拖动了多少次dom和你共拖动了多少距离。
它通过在draggable方法内增加的一个数组counts来存储开始和结束时的次数，和你一共拖动的距离。
我们再看第三个效果（constrain movement），代码：
<script type="text/javascript">
$(function() {
$(#draggable).draggable({ axis: 'y' });
$(#draggable2).draggable({ axis: 'x' });
$(#draggable3).draggable({ containment: '#containment-wrapper', scroll: false });
$(#draggable4).draggable({ containment: '#demo-frame' });
$(#draggable5).draggable({ containment: 'parent' });
});
</script>
分别调用了五次draggable方法，每次都给draggable方法不同的参数，实现不同的效果。第一个方法调用是让dom只能够上下移动，第二个方法调用实现让dom只能够左右移动，第三个方法调用实现让dom只能在给它规定的box内移动，第四个方法调用就实现可以在box外移动，而第五个方法调用则是让dom只能在它的父节点内移动。
第四个效果（delay start），代码：
<script type="text/javascript">
$(function() {
$(#draggable).draggable({ distance: 20 });
$(#draggable2).draggable({ delay: 1000 });
$(.ui-draggable).disableselection();
});
</script>
它给的参数有一定的限制作用，例如distance:20，就说明你必须要拖动20px以上它才会有效果，否则它是不会让你拖动的，而delay则是延时，是说你要等到1000ms以后你才能够拖动它。
第五个效果（snap to element or grid）
</style>
<script type="text/javascript">
$(function() {
$(#draggable).draggable({ snap: true });
$(#draggable2).draggable({ snap: '.ui-widget-header' });
$(#draggable3).draggable({ snap: '.ui-widget-header', snapmode: 'outer' });
$(#draggable4).draggable({ grid: [20,20] });
$(#draggable5).draggable({ grid: [80, 80] });
});
</script>
第一个参数是dom可以自动吸附在其它的box边缘上，第二个参数是让dom可以吸附在大的box边缘，里外侧都可，第三个参数让dom只能吸附在box的外侧，而里侧没有效果，第四个参数是让dom只能移动到20,20的倍数这样的地方，第五个参数和第四个参数是一样的，只是给的数据不同。
第六个效果（auto-scroll）
<script type="text/javascript">
$(function() {
$(#draggable).draggable({ scroll: true });
$(#draggable2).draggable({ scroll: true, scrollsensitivity: 100 });
$(#draggable3).draggable({ scroll: true, scrollspeed: 100 });
});
</script>
第七个效果（revert position）
<script type="text/javascript">
$(function() {
$(#draggable).draggable({ revert: true });
$(#draggable2).draggable({ revert: true, helper: 'clone' });
});
</script>
参数revert设定，使dom被拖动后返回原来的位置。加上helper：’clone’属性，则在拖动的时候在原先dom的地方依旧显示dom。
第八个效果（visual feedback）
<script type="text/javascript">
$(function() {
$(#draggable).draggable({ helper: 'original' });
$(#draggable2).draggable({ opacity: 0.7, helper: 'clone' });
$(#draggable3).draggable({
cursor: 'move',
cursorat: { top: -12, left: -20 },
helper: function(event) {
return $('<div class="ui-widget-header">i'm a custom helper</div>');
}
});
$(#set div).draggable({ stack: { group: '#set div', min: 1 } });
});
</script>
第一个dom可以正常的拖动，第二个dom拖动后会返回原来的位置，helper属性上面讲过了，opacity属性则是设定dom的透明度。第三个dom在你实施拖动的时候，会显示一个i'm a custom helper的div给你。
而后面三个dom，每拖动一个dom会让被拖动的dom在其它的两个dom外层，也就是最上面。
第九个效果（drag handle）
<script type="text/javascript">
$(function() {
$(#draggable).draggable({ handle: 'p' });
$(#draggable2).draggable({ cancel: p.ui-widget-header });
$(div, p).disableselection();
});
</script>
在这两个dom中每个div中都嵌套一个p标签，每个handle属性表明鼠标在点击在p标签上才能够拖动dom，而第二个cancel表明要点击在不是p标签的div中才能够拖动dom。
第十个效果（cursor style）
<script type="text/javascript">
$(function() {
$(#draggable).draggable({ cursorat: { cursor: 'move', top: 56, left: 56 } });
$(#draggable2).draggable({ cursorat: { cursor: 'crosshair', top: -5, left: -5 } });
$(#draggable3).draggable({ cursorat: { bottom: 0 } });
});
</script>
第一个dom中的参数是说在拖动dom的时候，在水平方向上移动，会先向相反的方向移动56px，垂直方向上也是一样。第二个dom说明在小范围移动或者双击时会让dom往上移动-5,左移动-5,实际上就是向下和向右各移动5,第三个dom是在小范围拖动或双击时会向上移动。
第十一个效果（draggable + sortable）
<script type="text/javascript">
$(function() {
$(#sortable).sortable({
revert: true
});
$(#draggable).draggable({
connecttosortable: '#sortable',
helper: 'clone',
revert: 'invalid'
})
$(ul, li).disableselection();
});
</script>
以上代码是让页面中的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）
<script type="text/javascript">
$(function() {
$(#draggable).draggable();
$(#droppable).droppable({
drop: function(event, ui) {
$(this).addclass('ui-state-highlight').find('p').html('dropped!');
}
});
});
</script>
上面代码表示当dom拖动到指定的dom中，该dom背景色变，增加一个class效果。
第二个（accepted elements），代码：
<script type="text/javascript">
$(function() {
$(#draggable, #draggable-nonvalid).draggable();
$(#droppable).droppable({
accept: '#draggable',
activeclass: 'ui-state-hover',
hoverclass: 'ui-state-active',
drop: function(event, ui) {
$(this).addclass('ui-state-highlight').find('p').html('dropped!');
}
});
});
</script>
上面代码分别给两个dom都用了draggable方法让其可以拖动，然后对其第二个dom用了droppable（）方法，并且给了hovercalss，让拖动到指定的dom上浮动时候也产生效果，并且当放开鼠标后再次产生一个效果。
第三个（prevent propagation），代码：
<script type="text/javascript">
$(function() {
$(#draggable).draggable();
$(#droppable, #droppable-inner).droppable({
activeclass: 'ui-state-hover',
hoverclass: 'ui-state-active',
drop: function(event, ui) {
$(this).addclass('ui-state-highlight').find('> p').html('dropped!');
return false;
}
});
$(#droppable2, #droppable2-inner).droppable({
greedy: true,
activeclass: 'ui-state-hover',
hoverclass: 'ui-state-active',
drop: function(event, ui) {
$(this).addclass('ui-state-highlight').find('> p').html('dropped!');
}
});
});
</script>
首先给第一个dom可以拖动的效果，然后给第二个大dom和第三个dom都调用droppable()方法，所不同的是第二个方法中在调用drop时候返回一个false,而第三个不返回，第三个dom在一开始就调用greedy:true,它们分别表示了，当将第一个div拖动到同级的第二个div的时候，如果拖动到它同级的div上时，只有外层div会产生效果，如果拖动到内层的div时，则整个div都产生效果，也就是包含外层同级的div，而第三个函数调用后只是你拖动到哪个层的div，哪个层的div产生效果。
第四个（visual feedback）代码：
<script type="text/javascript">
$(function() {
$(#draggable).draggable();
$(#droppable).droppable({
hoverclass: 'ui-state-active',
drop: function(event, ui) {
$(this).addclass('ui-state-highlight').find('p').html('dropped!');
}
});
$(#draggable2).draggable();
$(#droppable2).droppable({
accept: #draggable2,
activeclass: 'ui-state-hover',
drop: function(event, ui) {
$(this).addclass('ui-state-highlight').find('p').html('dropped!');
}
});
});
</script>
这个也同样让其中两个dom可以拖动让另外两个相对应的dom上，这次相对应的两个dom分别调用了hovercalss和activeclass以产生不同的效果。他们都是在鼠标拖动dom浮动在其上所表现出的不同。
第五个（revert draggable position）代码：
<script type="text/javascript">
$(function() {
$(#draggable).draggable({ revert: 'valid' });
$(#draggable2).draggable({ revert: 'invalid' });
$(#droppable).droppable({
activeclass: 'ui-state-hover',
hoverclass: 'ui-state-active',
drop: function(event, ui) {
$(this).addclass('ui-state-highlight').find('p').html('dropped!');
}
});
});
</script>
同样，给其中两个dom可拖动效果，然后分别拖动两个dom到指定的dom上。他们在调用draggable（）方法时就给了不同的revert参数，让其分别拖动到指定dom上产生不同效果，第一个效果是当拖动到指定的dom上后，它返回到原来的位置，而指定的dom也产生相应的效果，第二个效果是当拖动到指定的dom上后，指定dom产生相应效果，当把其再拖出时，它返回到原来所在dom的位置。
第六个（simple photo manager），代码：
<script type="text/javascript">
$(function() {
// there's the gallery and the trash
var $gallery = $('#gallery'), $trash = $('#trash');
// let the gallery items be draggable
$('li',$gallery).draggable({
cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
revert: 'invalid', // when not dropped, the item will revert back to its initial position
containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
helper: 'clone',
cursor: 'move'
});
// let the trash be droppable, accepting the gallery items
$trash.droppable({
accept: '#gallery > li',
activeclass: 'ui-state-highlight',
drop: function(ev, ui) {
deleteimage(ui.draggable);
}
});
// let the gallery be droppable as well, accepting items from the trash
$gallery.droppable({
accept: '#trash li',
activeclass: 'custom-state-active',
drop: function(ev, ui) {
recycleimage(ui.draggable);
}
});
// image deletion function
var recycle_icon = '<a href="http://www.php1.cn/">
function deleteimage($item) {
$item.fadeout(function() {
var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendto($trash);
$item.find('a.ui-icon-trash').remove();
$item.append(recycle_icon).appendto($list).fadein(function() {
$item.animate({ width: '48px' }).find('img').animate({ height: '36px' });
});
});
}
// image recycle function
var trash_icon = '<a href="http://www.php1.cn/">
function recycleimage($item) {
$item.fadeout(function() {
$item.find('a.ui-icon-refresh').remove();
$item.css('width','96px').append(trash_icon).find('img').css('height','72px').end().appendto($gallery).fadein();
});
}
// image preview function, demonstrating the ui.dialog used as a modal window