無論是jQuery UI 還是jQuery的EasyUI框架都能夠幫助你,使你建立你的網(wǎng)頁很容易。
jQuery UI 或者easyui是一個(gè)用戶界面插件集合jQuery的基礎(chǔ)。
使用jQuery UI 或者easyui你不需要寫很多JavaScript代碼,你通常定義寫一些HTML標(biāo)記的用戶界面。
jQuery UI 或者easyui是很容易的,但功能強(qiáng)大。
使用jQuery UI或者easyui你都需要在你的頁面中加入一些js和css文件,當(dāng)然,你也可以自己去定義自己需要的css。
jQuery UI和easyui都是一些我們可以拿來使用的工具,他們都封裝好了,他們經(jīng)過了不同版本的編寫,讓我們?cè)谑褂玫臅r(shí)候不用去考慮瀏覽器兼容性,免去了在寫頁面時(shí)候最容易出現(xiàn)的不同瀏覽器間不能夠兼容的問題,可以直接使用,是真正的“拿來主義”。
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這些功能。
每一個(gè)功能都會(huì)有不同的屬性呈現(xiàn)不同的效果,稍后我會(huì)具體的講解每一個(gè)功能的用法。
而easyui共包含7大類。
第一類是Base,包含EasyLoader,Draggable,Droppable,Resizable四個(gè)方面。
第二類是Layout,包含Panel,Tabs,Accordion,Layout四個(gè)方面。
第三類是Menu and Button,包含Menu,Link Button,Menu Button,Split Button四個(gè)創(chuàng)建按鈕的效果。
第四類是Form,包含F(xiàn)orm,ComboBox,ComboTree,NumberBox,ValidateBox,DateBox,Calendar這幾個(gè)不同的表單需求。
第五類是Window,包含window,Dialog,Message。
第六類是DataGrid and Tree, 包含Pagination,DataGrid,Tree。
我們先來看一下jQuery UI各個(gè)功能的具體用法。
我們從Interactions中的Draggable開始。
"EN-US">Draggable有較多的效果,從它所給出方法的參數(shù)不同,可以達(dá)到不同的效果,它所要用到j(luò)query-1.3.2.js,ui.core.js,ui.draggable.js這三個(gè)js文件。它所給出的方法是draggable(),給它不同的參數(shù),它可以實(shí)現(xiàn)種不同的效果。
我們先看一下它是第一個(gè)效果(默認(rèn)屬性)(Default functionality),可以在頁面中用鼠標(biāo)隨意拖動(dòng)一個(gè)DOM element在你可以看見的范圍內(nèi),它所用的代碼為:
<script type="text/javascript">
$(function() {
$("#draggable").draggable();
});
</script>
很簡(jiǎn)單,只要這幾行代碼你就可以實(shí)現(xiàn)一個(gè)javascript特效。
我們?cè)倏吹诙€(gè)效果(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>
這段代碼比之前的代碼要復(fù)雜,所實(shí)現(xiàn)的效果也更多,它可以計(jì)算你共拖動(dòng)了多少次DOM和你共拖動(dòng)了多少距離。
它通過在draggable方法內(nèi)增加的一個(gè)數(shù)組counts來存儲(chǔ)開始和結(jié)束時(shí)的次數(shù),和你一共拖動(dòng)的距離。
我們?cè)倏吹谌齻€(gè)效果(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>
分別調(diào)用了五次draggable方法,每次都給draggable方法不同的參數(shù),實(shí)現(xiàn)不同的效果。第一個(gè)方法調(diào)用是讓DOM只能夠上下移動(dòng),第二個(gè)方法調(diào)用實(shí)現(xiàn)讓DOM只能夠左右移動(dòng),第三個(gè)方法調(diào)用實(shí)現(xiàn)讓DOM只能在給它規(guī)定的box內(nèi)移動(dòng),第四個(gè)方法調(diào)用就實(shí)現(xiàn)可以在box外移動(dòng),而第五個(gè)方法調(diào)用則是讓DOM只能在它的父節(jié)點(diǎn)內(nèi)移動(dòng)。
第四個(gè)效果(Delay start),代碼:
<script type="text/javascript">
$(function() {
$("#draggable").draggable({ distance: 20 });
$("#draggable2").draggable({ delay: 1000 });
$(".ui-draggable").disableSelection();
});
</script>
它給的參數(shù)有一定的限制作用,例如distance:20,就說明你必須要拖動(dòng)20px以上它才會(huì)有效果,否則它是不會(huì)讓你拖動(dòng)的,而delay則是延時(shí),是說你要等到1000ms以后你才能夠拖動(dòng)它。
第五個(gè)效果(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>
第一個(gè)參數(shù)是DOM可以自動(dòng)吸附在其它的box邊緣上,第二個(gè)參數(shù)是讓DOM可以吸附在大的box邊緣,里外側(cè)都可,第三個(gè)參數(shù)讓DOM只能吸附在box的外側(cè),而里側(cè)沒有效果,第四個(gè)參數(shù)是讓DOM只能移動(dòng)到20,20的倍數(shù)這樣的地方,第五個(gè)參數(shù)和第四個(gè)參數(shù)是一樣的,只是給的數(shù)據(jù)不同。
第六個(gè)效果(Auto-scroll)
<script type="text/javascript">
$(function() {
$("#draggable").draggable({ scroll: true });
$("#draggable2").draggable({ scroll: true, scrollSensitivity: 100 });
$("#draggable3").draggable({ scroll: true, scrollSpeed: 100 });
});
</script>
第七個(gè)效果(Revert position)
<script type="text/javascript">
$(function() {
$("#draggable").draggable({ revert: true });
$("#draggable2").draggable({ revert: true, helper: 'clone' });
});
</script>
參數(shù)revert設(shè)定,使DOM被拖動(dòng)后返回原來的位置。加上helper:’clone’屬性,則在拖動(dòng)的時(shí)候在原先DOM的地方依舊顯示DOM。
第八個(gè)效果(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>
第一個(gè)DOM可以正常的拖動(dòng),第二個(gè)DOM拖動(dòng)后會(huì)返回原來的位置,helper屬性上面講過了,opacity屬性則是設(shè)定DOM的透明度。第三個(gè)DOM在你實(shí)施拖動(dòng)的時(shí)候,會(huì)顯示一個(gè)I'm a custom helper的DIV給你。
而后面三個(gè)DOM,每拖動(dòng)一個(gè)DOM會(huì)讓被拖動(dòng)的DOM在其它的兩個(gè)DOM外層,也就是最上面。
第九個(gè)效果(Drag handle)
<script type="text/javascript">
$(function() {
$("#draggable").draggable({ handle: 'p' });
$("#draggable2").draggable({ cancel: "p.ui-widget-header" });
$("div, p").disableSelection();
});
</script>
在這兩個(gè)DOM中每個(gè)DIV中都嵌套一個(gè)p標(biāo)簽,每個(gè)handle屬性表明鼠標(biāo)在點(diǎn)擊在P標(biāo)簽上才能夠拖動(dòng)DOM,而第二個(gè)cancel表明要點(diǎn)擊在不是P標(biāo)簽的DIV中才能夠拖動(dòng)DOM。
第十個(gè)效果(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>
第一個(gè)DOM中的參數(shù)是說在拖動(dòng)DOM的時(shí)候,在水平方向上移動(dòng),會(huì)先向相反的方向移動(dòng)56px,垂直方向上也是一樣。第二個(gè)DOM說明在小范圍移動(dòng)或者雙擊時(shí)會(huì)讓DOM往上移動(dòng)-5,左移動(dòng)-5,實(shí)際上就是向下和向右各移動(dòng)5,第三個(gè)DOM是在小范圍拖動(dòng)或雙擊時(shí)會(huì)向上移動(dòng)。
第十一個(gè)效果(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元素在拖動(dòng)的同時(shí)呈現(xiàn)出sortable的效果。
第二個(gè)介紹的是 "EN-US">droppable,它包含有六個(gè)效果,它分別要用到 "EN-US">jquery-1.3.2.js, "EN-US">ui.core.js, "EN-US">ui.droppable.js, "EN-US">ui.draggable.js這四個(gè)js文件。
先看第一個(gè)(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>
上面代碼表示當(dāng)DOM拖動(dòng)到指定的DOM中,該DOM背景色變,增加一個(gè)class效果。
第二個(gè)(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>
上面代碼分別給兩個(gè)DOM都用了Draggable方法讓其可以拖動(dòng),然后對(duì)其第二個(gè)DOM用了droppable()方法,并且給了hoverCalss,讓拖動(dòng)到指定的DOM上浮動(dòng)時(shí)候也產(chǎn)生效果,并且當(dāng)放開鼠標(biāo)后再次產(chǎn)生一個(gè)效果。
第三個(gè)(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>
首先給第一個(gè)DOM可以拖動(dòng)的效果,然后給第二個(gè)大DOM和第三個(gè)DOM都調(diào)用droppable()方法,所不同的是第二個(gè)方法中在調(diào)用drop時(shí)候返回一個(gè)false,而第三個(gè)不返回,第三個(gè)DOM在一開始就調(diào)用greedy:true,它們分別表示了,當(dāng)將第一個(gè)DIV拖動(dòng)到同級(jí)的第二個(gè)DIV的時(shí)候,如果拖動(dòng)到它同級(jí)的DIV上時(shí),只有外層DIV會(huì)產(chǎn)生效果,如果拖動(dòng)到內(nèi)層的DIV時(shí),則整個(gè)DIV都產(chǎn)生效果,也就是包含外層同級(jí)的DIV,而第三個(gè)函數(shù)調(diào)用后只是你拖動(dòng)到哪個(gè)層的DIV,哪個(gè)層的DIV產(chǎn)生效果。
第四個(gè)(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>
這個(gè)也同樣讓其中兩個(gè)DOM可以拖動(dòng)讓另外兩個(gè)相對(duì)應(yīng)的DOM上,這次相對(duì)應(yīng)的兩個(gè)DOM分別調(diào)用了hoverCalss和activeClass以產(chǎn)生不同的效果。他們都是在鼠標(biāo)拖動(dòng)DOM浮動(dòng)在其上所表現(xiàn)出的不同。
第五個(gè)(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>
同樣,給其中兩個(gè)DOM可拖動(dòng)效果,然后分別拖動(dòng)兩個(gè)DOM到指定的DOM上。他們?cè)谡{(diào)用draggable()方法時(shí)就給了不同的revert參數(shù),讓其分別拖動(dòng)到指定DOM上產(chǎn)生不同效果,第一個(gè)效果是當(dāng)拖動(dòng)到指定的DOM上后,它返回到原來的位置,而指定的DOM也產(chǎn)生相應(yīng)的效果,第二個(gè)效果是當(dāng)拖動(dòng)到指定的DOM上后,指定DOM產(chǎn)生相應(yīng)效果,當(dāng)把其再拖出時(shí),它返回到原來所在DOM的位置。
第六個(gè)(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
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com