JQuery插件開發(fā)._第1頁
JQuery插件開發(fā)._第2頁
JQuery插件開發(fā)._第3頁
JQuery插件開發(fā)._第4頁
JQuery插件開發(fā)._第5頁
已閱讀5頁，還剩8頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、【前言】jQuery已經(jīng)被廣泛使用，憑借其簡(jiǎn)潔的API，對(duì)DOM強(qiáng)大的操控性，易擴(kuò)展性越來越受到web開發(fā)人員的喜愛，我在社區(qū)也發(fā)布了很多的jQuery插件，經(jīng)常有人詢問一些技巧，因此干脆寫這么一篇文章給各位jQuery愛好者，算是拋磚引玉吧。【根底】 a)樣式很多人會(huì)認(rèn)為樣式是個(gè)很復(fù)雜的東西，需要沉著冷靜的心態(tài)加上非凡的審美觀才能設(shè)計(jì)出賞心悅目的UI，拋開圖片設(shè)計(jì)不說，其實(shí)css也就是那么些屬性：position,margin,padding,width,height,left,top,float,border,background.UI設(shè)計(jì)的漂亮與否在很大程度上依賴于設(shè)計(jì)人員對(duì)配色的把握和

2、整體效果的協(xié)調(diào)。舉個(gè)簡(jiǎn)單的例子，一個(gè)簡(jiǎn)單的頁面，馬虎的人：<html xmlns=" :/ /1999/xhtml"><head>    <title>Test Page</title></head><body>    jQuery是一個(gè)框架！壓縮后有30多k吧。</body></html>細(xì)心的人：<html xmlns=" :/ w3.or

3、g/1999/xhtml"><head>    <title>Test Page</title>    <style type="text/css">        body             

4、60;      font-family:'宋體'            font-size:12px;                </style></head><body>  

5、60; jQuery是一個(gè)框架！壓縮后有30多k吧。</body></html>專心的人：<html xmlns=" :/ /1999/xhtml"><head>    <title>Test Page</title>    <style type="text/css">      

6、  body                    font-family:'Verdana','宋體'            font-size:12px;      

7、;          </style></head><body>    jQuery是一個(gè)框架！壓縮后有30多k吧。</body></html>我們比照一下三者的UI效果：一目了然，或許很多的站點(diǎn)失去關(guān)注正是因?yàn)檫@不起眼的font-family,font-size。當(dāng)然這還只是個(gè)簡(jiǎn)單的例子，掌握css應(yīng)該從簡(jiǎn)單做起，從根本入手，在實(shí)踐中運(yùn)用并不斷深入。b)腳本 我們同樣需要對(duì)javascript有

8、著深刻的理解，對(duì)dom, xhr, Regex, call-apply, prototype等都應(yīng)該有一定的了解。有人會(huì)說要這些有啥用啊，對(duì)dom的操作其實(shí)通過getElementById, getElementsByTagName以及其他的API都可以輕松的完成，這話是沒錯(cuò)，當(dāng)思路確定后，思想才是重點(diǎn)，一段代碼是精華還是糟粕很容易就可以區(qū)分出來，究其原因還是取決你自己，舉個(gè)簡(jiǎn)單的例子，大量的html組裝，路人甲：var a = new Array(10);var menu = ''  &

9、#160;for (var i = 0; i < a.length; i+)   menu += '<li class="style_' + ai + '" >' + ai + '</li>'路人乙：Stotype.format = 

10、function()     var args = arguments;    return this.replace(/(d1)/g, function()         return argsarguments1;    );var a = new Array(1,2,3,

11、4,5,6,7,8,9,0);var m = '<li class="style_0" >0</li>'for (var i = 0; i < a.length; i+)     menu += m.format(ai);在實(shí)現(xiàn)方式明確的情況下，優(yōu)雅高效的代碼顯然更具吸引力?！緦?shí)踐】jQuery開發(fā)或使用，更多的靈感是來自實(shí)踐，而不

12、是copy|paste(奉行拿來主義的同學(xué)可以離開了)。那么在這里我會(huì)用一個(gè)簡(jiǎn)單的例子來闡述jQuery插件開發(fā)的流程，能否舉一反三就看各位看官了?！灸康摹?開發(fā)一個(gè)插件之前我們需要對(duì)自己的目的有一個(gè)清醒的認(rèn)識(shí)，有很明確的方向感，那么此次我作為例如插件的目的，就是呈現(xiàn)一個(gè)用于UI的Slider - 滑動(dòng)條，常年從事于或暫時(shí)專注于win32開發(fā)的同學(xué)應(yīng)該比擬了解。草圖真正動(dòng)手編碼之前我們還需要有一個(gè)草圖來描述自己插件的“長(zhǎng)相事件驅(qū)動(dòng)或API封裝的可以忽略。很多的同學(xué)在做UI開發(fā)前往往會(huì)忙于搜集各種小圖片(非精通ps或iconworkshop人士)，其實(shí)漂亮的圖標(biāo)確實(shí)可以美化我們的UI，不過我一般

13、的處理方式是編寫易于擴(kuò)展的css，前期的UI呈現(xiàn)盡量少使用圖片，多用線條完成。ok，言歸正卷，那么我的slider設(shè)計(jì)草圖是: 解釋下下文將用到的幾個(gè)詞：slider: 此局部是作為拖拽手柄來使用，用戶可以通過拖拽此局部來更新completed bar的位置。completed: 此局部作為bar的內(nèi)嵌元素，作為特殊效果來顯示slider與起始點(diǎn)的距離，亦即與slider的value值關(guān)聯(lián)。bar: slider的載體，completed的滿值。思路：slider作為手柄提供拖拽功能，作用區(qū)域?yàn)閎ar，拖拽過程中completed條必須實(shí)時(shí)更新(長(zhǎng)度)，影響區(qū)域?yàn)閟lider至bar

14、左端的距離。【編碼】 開發(fā)jQuery UI/Effect 插件在很多時(shí)候都需要與UI交互，因此在呈現(xiàn)上需要提供Html tree來繪制我們的插件，最終通過js dom來輸出，那么在繪制簡(jiǎn)單的dom結(jié)構(gòu)的時(shí)候我會(huì)直接用js來完成，不過如果嵌套比擬復(fù)雜的話，我們還是應(yīng)該先用html來完成，然后轉(zhuǎn)變成js輸出。html tree:<div class="defaultbar">  <div class="jquery-completed"> </div> 

15、0;<div class="jquery-jslider"> </div></div>deafultbar -> barjquery-completed -> completedjquery-jslider -> slider前期UI呈現(xiàn)上我們不使用圖片，盡量用線條、顏色來完成：Css/*/*-default skin-*/.defaultbar    margin-top: 10px;    heig

16、ht: 5px;    background-color: #FFFFE0;    border: 1px solid #A9C9E2;    position: relative;    .defaultbar .jquery-completed    height: 3px;   &#

17、160;background-color: #7d9edb;    top: 1px;    left:1px;    position: absolute;    .defaultbar .jquery-jslider    height: 15px;    background-color: #

18、E6E6FA;    border: 1px solid #A5B6C8;    top: -6px;    display: block;    cursor: pointer;    position: absolute;    將bar的position屬性設(shè)置成relative，以

19、方便子節(jié)點(diǎn)的浮動(dòng)子節(jié)點(diǎn)使用position:absolute來獲得內(nèi)聯(lián)浮動(dòng)效果。那么我們可以看下這個(gè)css和html tree產(chǎn)生的UI效果：ok,具備了所需的元素 - slider, completed, bar.一些標(biāo)準(zhǔn):當(dāng)我們畫出了UI之后就可以正式編寫jQuery插件代碼了，不過在著之前我們還需要對(duì)jQuery插件開發(fā)的一些標(biāo)準(zhǔn)性有一些了解。1. 使用閉包：(function($)   / Code goes here)(jQuery);這是來自jQuery官方的插件開發(fā)標(biāo)準(zhǔn)要求，使用這種編寫方式有什么好處呢？a) 防止全局依

20、賴。b) 防止第三方破壞。c) 兼容jQuery操作符'$'和'jQuery '我們知道這段代碼在被解析時(shí)會(huì)形同如下代碼：var jq = function($)   / Code goes here; jq(jQuery);這樣效果就一目了然了。2. 擴(kuò)展jQuery提供了2個(gè)供用戶擴(kuò)展的基類 - $.extend和$.fn.extend.$.extend 用于擴(kuò)展自身方法，如$.ajax, $.getJSON等，$.fn.extend那么是用于擴(kuò)展jQuery類，包括方

21、法和對(duì)jQuery對(duì)象的操作。為了保持jQuery的完整性，我比擬趨向于使用$.fn.extend進(jìn)行插件開發(fā)而盡量少使用$.extend.3. 選擇器jQuery提供了功能強(qiáng)大，并兼容多種css版本的選擇器，不過發(fā)現(xiàn)很多同學(xué)在使用選擇器時(shí)并未注重效率的問題。 a) 盡量使用Id選擇器，jQuery的選擇器使用的API都是基于getElementById或getElementsByTagName，因此可以知道效率最高的是Id選擇器，因?yàn)閖Query會(huì)直接調(diào)用getElementById去獲取dom，而通過樣式選擇器獲取jQuery對(duì)象時(shí)往往會(huì)使用 getElementsByTagName去獲取

22、然后篩選。b) 樣式選擇器應(yīng)該盡量明確指定tagName, 如果開發(fā)人員使用樣式選擇器來獲取dom，且這些dom屬于同一類型，例如獲取所有className為jquery的div，那么我們應(yīng)該使用的寫法是$('div.jquery')而不是$('.jquery')，這樣寫的好處非常明顯，在獲取dom時(shí)jQuery會(huì)獲取div然后進(jìn)行篩選，而不是獲取所有dom再篩選。c) 防止迭代，很多同學(xué)在使用jQuery獲取指定上下文中的dom時(shí)喜歡使用迭代方式，如$('.jquery .child')，獲取className為jquery的dom下的所有cl

23、assName為child的節(jié)點(diǎn)，其實(shí)這樣編寫代碼付出的代價(jià)是非常大的，jQuery會(huì)不斷的進(jìn)行深層遍歷來獲取需要的元素，即使確實(shí)需要，我們也應(yīng)該使用諸如$(selector,context), $('selector1>selector2'), $(selector1).children(selector2), $(selctor1).find(selector2)之類的方式。開始編碼 話題有點(diǎn)扯遠(yuǎn)，ok，在對(duì)UI有了清晰的認(rèn)識(shí)后我們就可以使用js來輸出html了。我們使用jSlider來命名這個(gè)slider插件(為了防止插件沖突，插件命名時(shí)也應(yīng)十分考究，這里我就俗一回

24、)。$.extend($.fn,         /<summary>        / apply a slider UI        /</summary>        jSlider: 

25、function(setting)         );在插件開發(fā)中比擬標(biāo)準(zhǔn)的方式是將元數(shù)據(jù)獨(dú)立出來并開放API，比方這里的setting參數(shù)傳入值，有時(shí)候?yàn)榱藴p少代碼編寫量，我習(xí)慣于直接在插件內(nèi)賦值：var ps = $.extend(    renderTo: $(document.body),    enable: true,    

26、;initPosition: 'max',    size:  barWidth: 200, sliderWidth: 5 ,    barCssName: 'defaultbar',    completedCssName: 'jquery-completed',    sliderCssName:

27、 'jquery-jslider',    sliderHover: 'jquery-jslider-hover',    onChanging: function()  ,    onChanged: function()  , setting);標(biāo)準(zhǔn)的做法：$.fn.jSlider.default =   

28、60; renderTo: $(document.body),    enable: true,    initPosition: 'max',    size:  barWidth: 200, sliderWidth: 5 ,    barCssName: 'defaultbar', 

29、   completedCssName: 'jquery-completed',    sliderCssName: 'jquery-jslider',    sliderHover: 'jquery-jslider-hover',    onChanging: function()  ,    on

30、Changed: function()      $.extend(,$.fn.jSlider.default,setting);ok, 下面描述下我所定義的這些API的作用：renderTo: jSlider的載體、容器，可以是一個(gè)jQuery對(duì)象，也可以是選擇器。enable: jSlider插件是否可用，true時(shí)end-user可拖拽，否那么禁止。initPosition: jSlider的初始值，max或者min，亦即 slider的value值，1或者0。size: jSlider的參數(shù)，包括2個(gè)值barWidt

31、h - bar的長(zhǎng)度， sliderWidth - slider的長(zhǎng)度。barCssName: bar的樣式名稱，便于end-user自行擴(kuò)展樣式。completedCssName: completed的樣式名稱。sliderCssName: slider的樣式名稱。sliderHover: slider聚焦時(shí)的樣式名稱。onChanging: slider被拖拽時(shí)觸發(fā)的事件。onChanged: slider拖拽結(jié)束時(shí)觸發(fā)的事件。此時(shí)我們需要將renderTo強(qiáng)制轉(zhuǎn)換成jQuery對(duì)象(兼容使用selector的情況)：ps.renderTo = (typeof 

32、;ps.renderTo = 'string' ?                 $(ps.renderTo) : ps.renderTo);然后將html tree輸出到render:/* ->html tree:<div> ->sliderbar<div>&nbsp;</div

33、>   -> completed bar<div>&nbsp;</div>   -> slider                  </div><-*/var sliderbar = $('<div><d

34、iv>&nbsp;</div><div>&nbsp;</div></div>')                    .attr('class', ps.barCssName)          

35、;              .css('width', ps.size.barWidth)                            .ap

36、pendTo(ps.renderTo);var completedbar = sliderbar.find('div:eq(0)')                        .attr('class', ps pletedCssName);var slider 

37、= sliderbar.find('div:eq(1)')                .attr('class', ps.sliderCssName)                   

38、60;.css('width', ps.size.sliderWidth);這樣我們就在UI上直接呈現(xiàn)了Html并且用定制的css進(jìn)行渲染，分別用sliderbar, completedbar, slider對(duì)我們需要的三個(gè)對(duì)象進(jìn)行緩存。ok, 在呈現(xiàn)了UI后我們就需要提供方法來實(shí)現(xiàn)slider的拖拽，在這之前我們還需要實(shí)現(xiàn)一個(gè)方法，就是completedbar的實(shí)時(shí)更新，即在拖動(dòng)slider的時(shí)候讓completedbar始終填充左側(cè)區(qū)域：var bw = sliderbar.width(), sw = s

39、lider.width();/make sure that the slider was displayed in the bar(make a limited)ps.limited =  min: 0, max: bw - sw if (typeof window.$sliderProcess = 'undefined') 

40、60;   window.$sliderProcess = new Function('obj1', 'obj2', 'left',                            &#

41、160;        'obj1.css('left',left);obj2.css('width',left);');$sliderProcess(slider, completedbar, eval('ps.limited.' + ps.initPosition);bw,sw用來存儲(chǔ)sliderbar和slider的長(zhǎng)度，此處沒有直接使用ps.size里的值是為了防止樣式里的border-width對(duì)wid

42、th造成破壞。定義一個(gè)私用成員limited來存儲(chǔ)sliderleft的最大值和最小值，并在后面直接使用eval('ps.limited.' + ps.initPosition)來獲取，從而防止switch操作。同時(shí)還需定義一個(gè)全局Function用來定位completedbar的填充長(zhǎng)度以及slider左側(cè)距離，我給其命名為$sliderProcess。那么我們接下來剩下的工作就是slider的拖拽功能了，那么在這里我會(huì)用到之前發(fā)布的一款jQuery拖拽插件，并做適量的訂制：/drag and dropvar slide

43、60;=     drag: function(e)         var d = e.data;        var l = Math.min(Math.max(e.pageX - d.pageX + d.left, ps.limited.min),&#

44、160;ps.limited.max);        $sliderProcess(slider, completedbar, l);        /push two parameters: 1st:percentage, 2nd: event        ps.onChanging

45、(l / ps.limited.max, e);    ,    drop: function(e)         slider.removeClass(ps.sliderHover);        /push two parameters: 1st:percentage,&

46、#160;2nd: event        ps.onChanged(parseInt(slider.css('left') / ps.limited.max, e);        $().unbind('mousemove', slide.drag).unbind('mouseup', slide.drop);  

47、  if (ps.enable)     /bind events    slider.bind('mousedown', function(e)         var d =             

48、left: parseInt(slider.css('left'),            pageX: e.pageX                $(this).addClass(ps.sliderHover);     

49、60;  $().bind('mousemove', d, slide.drag).bind('mouseup', d, slide.drop);    );這樣當(dāng)jSlider enable屬性為true時(shí)，在end-user按下鼠標(biāo)時(shí)綁定mousemove事件，在鼠標(biāo)彈起時(shí)移除，我們只需要同步更新slider的left 屬性和completedbar的width即可，同時(shí)在drag中綁定onChanging方法，在drop中綁定onChanged方法，向這兩個(gè)

50、方法推送的參數(shù)相同，1>百分比，即value值，介于01，2>event。那么至此我們的jSlider插件就根本成型，向用戶提供了一個(gè)可拖拽的slider?！緮U(kuò)展】 有的時(shí)候用戶卻不是那么容易滿足，于是有人高呼：“我要自己設(shè)置value，為什么不提供這個(gè)功能？。那么這時(shí)我們就需要為用戶公開一個(gè)方法，用于設(shè)置jSlider的value，首先考慮的是作為方法需要一個(gè)作用對(duì)象(jSlider)，那么此時(shí)我又不想將作用對(duì)象作為參數(shù)傳入，那么我們還是將這個(gè)方法作為插件來開發(fā)，我們將方法命名為setSliderValue，開放2個(gè)參數(shù)，v(value值)和 callback(設(shè)置完成后的回調(diào)函

51、數(shù))。即：$.fn.setSliderValue(v,callback);ok，那么剩下的就是作用對(duì)象了，由之前的設(shè)計(jì)可知，在slider拖動(dòng)時(shí)主要作用于2個(gè)對(duì)象，slider和completedbar，那么我們?cè)趈Slider插件末尾加上一段代碼來返回slider對(duì)象：slider.data =  bar: sliderbar, completed: completedbar return slider;這樣我們?cè)诔跏蓟痡Slider的時(shí)候就可以直接用一個(gè)變量來獲取jSlider對(duì)象，然后調(diào)用setSliderV

52、alue方法了，偽碼：var slider = $.fn.jSlider();slider.setSliderValue(v,function();setSliderValue代碼：try     /validate    if (typeof v = 'undefined' | v < 0 | v > 1)  

53、;       throw new Error(''v' must be a Float variable between 0 and 1.');        var s = this;    /validate  

54、   if (typeof s = 'undefined' |        typeof s.data = 'undefined' |            typeof s.data.bar = 'unde

55、fined')         throw new Error('You bound the method to an object that is not a slider!');        $sliderProcess(s, s.data pleted,&#

56、160;v * s.data.bar.width();    if (typeof callback != 'undefined')  callback(v); catch (e)     alert(e.message);這里同樣調(diào)用了全局Function $sliderProcess在設(shè)置slider的value值時(shí)進(jìn)行completedbarwidth和sliderleft的更新。由于此處進(jìn)行了異常處理，所以如果end-user在確保setSliderValue被作用于jSlider對(duì)象的時(shí)候可以刪除此異常處理代碼?！酒つw】根據(jù)jSlider的API我們可以更加方便的為其設(shè)定皮膚，為了讓jSlider更加專業(yè)，我們需要2張圖片：用來作為completedbar背景的'bar'和用來作為slider背景的'slider'，ok，我們更新下樣式：BlueSkin/*/*-blue skin-*/.bluebar    margin-top:&

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論