MooBox 基于Mootools的對話框插件
一方面出于對mootools的興趣(雖然沒有jQuery那么hot), 另一方面,也是想為mootools的推廣添一點(diǎn)小小的力量,雖然這微不足道.
加上前面發(fā)布過的2個(gè)mootools組件, 寫下來總的感覺是:
在效果實(shí)現(xiàn)方面, 確實(shí)用jQuery編寫要比用mootools來的容易快速的多, 因?yàn)樵诤芏嗉?xì)節(jié)問題上jQuery已經(jīng)為我們考慮了.比如mootools-core沒有類似slideUp/Down這樣的方法, 如果不引入擴(kuò)展庫的話,你得自己用Fx類來實(shí)現(xiàn), 而jQuery里只是很簡單的調(diào)用slideUp, slideDown或者slideToggle, 再比如在mootools中,你想取得一個(gè)隱藏(display:none)元素的尺寸信息, 得寫個(gè)幾條代碼, 而在jQuery中你完全可以忽略元素是否隱藏這個(gè)問題, 它已經(jīng)幫你搞定了. 再比如jQuery本身已經(jīng)為用戶提供了豐富的選擇器, 這一點(diǎn)尤為方便.mootools的話稍微欠缺一些.
我這里并不是說mootools如何不行,因?yàn)楸旧韒ootools和jquery設(shè)計(jì)的初衷就是不同的, 如果你想更多的了解細(xì)節(jié)問題,那么用mootools作為基礎(chǔ)庫還是不錯(cuò)的.
下面回到文章正題, 我先發(fā)兩個(gè)Demo截圖.
完整顯示:

收縮的狀態(tài)

如果你對此組件有興趣, 可以點(diǎn)擊下載, MooBox 源碼均未壓縮,其中doc.html為組件說明文檔,demo.html是個(gè)比較完整的示例.
注意一個(gè)樣式的問題,希望你的頁面中事先引入了類似reset.css和定義基礎(chǔ)樣式的css(比如字體,顏色,行高等).
最后, 希望對你能有所幫助 : ) 有問題可以留言討論
相關(guān)文章
Mootools 1.2教程 選項(xiàng)卡效果(Tabs)
今天將不只是受限于這個(gè)庫和一些基本的編程知識,我們來做一個(gè)簡單的小項(xiàng)目。通過使用我們目前為止已經(jīng)學(xué)過的一些知識,有幾種方式來創(chuàng)建當(dāng)鼠標(biāo)移上去或者點(diǎn)擊時(shí)顯示相應(yīng)內(nèi)容的tab。2009-09-09
Mootools 1.2教程 同時(shí)進(jìn)行多個(gè)形變動畫
今天我們來學(xué)習(xí)一下Fx.Elements插件,這是一個(gè)基于Fx.Morph的插件。與應(yīng)用于單個(gè)元素不同的是,F(xiàn)x.Elements可以允許你一次性給多個(gè)元素添加動畫。2009-09-09
MooTools 頁面滾動浮動層智能定位實(shí)現(xiàn)代碼
MooTools 頁面滾動浮動層智能定位實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-08-08
背景圖跟隨鼠標(biāo)移動的Mootools插件實(shí)現(xiàn)代碼
背景圖跟隨鼠標(biāo)移動的Mootools插件實(shí)現(xiàn)代碼,學(xué)習(xí)mootools的朋友可以參考下。2011-12-12
使用Mootools動態(tài)添加Css樣式表代碼,兼容各瀏覽器
這個(gè)函數(shù)很有用處,尤其是當(dāng)我們在使用Mootools開發(fā)插件的時(shí)候,例如Tips等,當(dāng)我們需要額外的Css來支撐插件內(nèi)的效果時(shí),通常我們的做法是把Css放到單獨(dú)的css文件里調(diào)用2011-12-12
Mootools 1.2教程 Fx.Morph、Fx選項(xiàng)和Fx事件
今天,我們繼續(xù)探索一下這個(gè)庫的Fx部分2009-09-09
Mootools 圖片展示插件(lightbox,ImageMenu)收集集合
Mootools圖片展示插件(lightbox,ImageMenu)收集,學(xué)習(xí)mootools的朋友可以參考,非常不錯(cuò)的效果。2010-05-05

