|
|
小序:
整理下自己項(xiàng)目中常用的幾款jQuery插件, 發(fā)上來(lái)共享下, 另外作下說(shuō)明, 由于自己大部分插件都是貢獻(xiàn)在jQuery.com上的, 所以注釋, demo 什么的基本上都是英文, 還請(qǐng)各位看官見(jiàn)諒.
正卷:
- Facebook/Xiaonei 風(fēng)格模態(tài)框
效果圖:
簡(jiǎn)介:
使用 div, table 和 opacity 效果實(shí)現(xiàn)模態(tài)框效果...
導(dǎo)航:
詳細(xì)介紹 | 在線演示 - Tabpanel - jerichotab
效果圖:
簡(jiǎn)介:
jerichoTab是一款模擬 firefox 標(biāo)簽頁(yè)的插件, 通過(guò)豐富的API可以輕松的實(shí)現(xiàn)動(dòng)態(tài)添加, 刪除, 激活tab, 當(dāng)tab頁(yè)過(guò)多時(shí)會(huì)在左右兩段增加滾動(dòng)條...
導(dǎo)航:
詳細(xì)介紹 | 在線演示 - jCheckbox:
效果圖:
簡(jiǎn)介:
jCheckbox用于模擬checkbox的效果, 方便開(kāi)發(fā)人員自定義外觀, 由于所有的屬性都綁定到目標(biāo)checkbox, 所以不必?fù)?dān)心狀態(tài)保存或取值的問(wèn)題...
導(dǎo)航:
詳細(xì)介紹 | 在線演示 - Drag and Drop:
效果圖:
簡(jiǎn)介:
dragndrop為開(kāi)發(fā)人員實(shí)現(xiàn)dom拖拽提供了更簡(jiǎn)單的方法, 并可以監(jiān)視對(duì)象dom的位置以便進(jìn)行數(shù)據(jù)(position)存儲(chǔ)...
導(dǎo)航:
詳細(xì)介紹 | 在線演示 - Resizable:
效果圖:
簡(jiǎn)介:
resizable插件使html dom resize更易于實(shí)現(xiàn)(這句話真別扭)...
導(dǎo)航:
詳細(xì)介紹 | 在線演示
心得:
其實(shí)在我看來(lái), 盯著jQuery的參考文章看是不會(huì)有長(zhǎng)足進(jìn)步的, 因?yàn)橐槐竞?jiǎn)單的<>就可以滿足你的全部要求, 只要你熟悉css, 熟悉Javascript, 熟悉json 那么恭喜你, 直接下幾個(gè)插件代碼吧, 看看查查, 查查看看, 你也會(huì)說(shuō): "哦, 原來(lái)jQuery也就是那么會(huì)事兒, 也就是個(gè)復(fù)雜的鏈?zhǔn)浇Y(jié)構(gòu).", 那么還等什么, 直接寫(xiě)代碼吧(選擇器, dom, ajax 這些都是必備的基礎(chǔ)知識(shí), 記不住就 API 手冊(cè)里查吧).
通俗點(diǎn)講, jQuery就是一臺(tái)NB哄哄的引擎, 你完全沒(méi)有必要去了解它的實(shí)現(xiàn)方式(如果你想我也不反對(duì)), 你才是那個(gè)萬(wàn)能的設(shè)計(jì)師, 發(fā)揮你的想象力, 運(yùn)用css, js去為它裝上輪胎, 噴上烤漆, 所以現(xiàn)在才有那么多充滿想象力和RIA風(fēng)格的jq插件.
- 基礎(chǔ):
做Web的就應(yīng)該做的象個(gè)做Web的, 任何時(shí)候都不要過(guò)于依賴(lài)美工, photoshop, css 都是應(yīng)該掌握的工具/技能.有時(shí)候你還得做個(gè)'圖片收藏家'.
- 偏見(jiàn):
舉個(gè)簡(jiǎn)單的例子 - 資深的Web工程師不會(huì)為用table還是div而煩惱, 那只能作為入門(mén)者爭(zhēng)吵的焦點(diǎn), 額, 我想說(shuō)的是, 想用table的時(shí)候就大膽的用吧, 有時(shí)候比div效果來(lái)的好~~~
- 技巧:
一個(gè)插件之所以吸引人的關(guān)鍵在于UI, 技巧, 大小, 效率, 當(dāng)很多人看到人寫(xiě)一段很經(jīng)典的代碼時(shí), 往往會(huì)說(shuō):"哦, 是這樣啊, 很簡(jiǎn)單的方法啊, 我也會(huì).", 這樣的人是最沒(méi)品的, 事后諸葛. 技巧其實(shí)是個(gè)很實(shí)在的東西, 它存在, 但是很少有人能找到, 比如 jq 中的 json + eval, each + ajax, array + map , 那么我同樣舉個(gè)簡(jiǎn)單的例子: 兩個(gè)json對(duì)象, min:{width:0,height:0}, max:{width:200,height:100} 當(dāng)我對(duì)一個(gè)dom resize時(shí)會(huì)保證這個(gè)dom的長(zhǎng)短不會(huì)超過(guò)min和max的限制. 使用w參數(shù)來(lái)獲取當(dāng)前的dom對(duì)象長(zhǎng)度, 不加思索的人會(huì)說(shuō), if...else...下就可以, 但為什么不試試
1
var newWidth = Math.min(Math.max(w, min.width), ps.max.width); it知識(shí)庫(kù)：jQuery 相關(guān) / 插件，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
