MooBox 基于Mootools的對話框插件
一方面出于對mootools的興趣(雖然沒有jQuery那么hot), 另一方面,也是想為mootools的推廣添一點小小的力量,雖然這微不足道.
加上前面發(fā)布過的2個mootools組件, 寫下來總的感覺是:
在效果實現(xiàn)方面, 確實用jQuery編寫要比用mootools來的容易快速的多, 因為在很多細(xì)節(jié)問題上jQuery已經(jīng)為我們考慮了.比如mootools-core沒有類似slideUp/Down這樣的方法, 如果不引入擴(kuò)展庫的話,你得自己用Fx類來實現(xiàn), 而jQuery里只是很簡單的調(diào)用slideUp, slideDown或者slideToggle, 再比如在mootools中,你想取得一個隱藏(display:none)元素的尺寸信息, 得寫個幾條代碼, 而在jQuery中你完全可以忽略元素是否隱藏這個問題, 它已經(jīng)幫你搞定了. 再比如jQuery本身已經(jīng)為用戶提供了豐富的選擇器, 這一點尤為方便.mootools的話稍微欠缺一些.
我這里并不是說mootools如何不行,因為本身mootools和jquery設(shè)計的初衷就是不同的, 如果你想更多的了解細(xì)節(jié)問題,那么用mootools作為基礎(chǔ)庫還是不錯的.
下面回到文章正題, 我先發(fā)兩個Demo截圖.
完整顯示:
收縮的狀態(tài)
如果你對此組件有興趣, 可以點擊下載, MooBox 源碼均未壓縮,其中doc.html為組件說明文檔,demo.html是個比較完整的示例.
注意一個樣式的問題,希望你的頁面中事先引入了類似reset.css和定義基礎(chǔ)樣式的css(比如字體,顏色,行高等).
最后, 希望對你能有所幫助 : ) 有問題可以留言討論
相關(guān)文章
這幾天, 利用晚上的閑暇時間, 寫了個mootools組件,原型來自于jQuery UI Dialog, 為防止重復(fù),就起了名字叫mooBox.2012-01-01
基于mootools插件實現(xiàn)遮罩層新手引導(dǎo)
公司項目有這個需求，剛好這段時間在學(xué)習(xí)了mootools，于是把功能寫成了mootools插件，個人感覺mootools在這方面比jquery強(qiáng)多了2012-05-05
Mootools 1.2教程 設(shè)置和獲取樣式表屬性
今天，我們來看一下如何通過MooTools 1.2和我們以前幾講中的內(nèi)容來操作樣式，這將給你在UI上帶來很大的控制權(quán)。2009-09-09
今天我們將來看一下MooTools綁定的Tooltip插件。通過“提示（Tips）”，你可以輕松地自定義一個包含一個標(biāo)題和內(nèi)容的工具提示，可以自定義樣式，自定義淡入淡出漸變效果。2009-09-09
用Mootools獲得操作索引的兩種方法分享，需要的朋友可以參考下。2011-12-12
MooTools 頁面滾動浮動層智能定位實現(xiàn)代碼
MooTools 頁面滾動浮動層智能定位實現(xiàn)代碼，需要的朋友可以參考下。2011-08-08
Mootools 1.2教程 同時進(jìn)行多個形變動畫
今天我們來學(xué)習(xí)一下Fx.Elements插件，這是一個基于Fx.Morph的插件。與應(yīng)用于單個元素不同的是，F(xiàn)x.Elements可以允許你一次性給多個元素添加動畫。2009-09-09
今天我們將講一下用MooTools來創(chuàng)建和使用類的一些基本知識。2009-09-09
使用Mootools動態(tài)添加Css樣式表代碼,兼容各瀏覽器
這個函數(shù)很有用處,尤其是當(dāng)我們在使用Mootools開發(fā)插件的時候,例如Tips等,當(dāng)我們需要額外的Css來支撐插件內(nèi)的效果時,通常我們的做法是把Css放到單獨(dú)的css文件里調(diào)用2011-12-12
從今天開始，我們將開始講解“更多”（more）庫里面的更多插件。Sortables是一個非常強(qiáng)大的插件，能夠真正地擴(kuò)大你的用戶界面設(shè)計的選擇面。2009-09-09