MooBox 基于Mootools的對(duì)話框插件
一方面出于對(duì)mootools的興趣(雖然沒(méi)有jQuery那么hot), 另一方面,也是想為mootools的推廣添一點(diǎn)小小的力量,雖然這微不足道.
加上前面發(fā)布過(guò)的2個(gè)mootools組件, 寫(xiě)下來(lái)總的感覺(jué)是:
在效果實(shí)現(xiàn)方面, 確實(shí)用jQuery編寫(xiě)要比用mootools來(lái)的容易快速的多, 因?yàn)樵诤芏嗉?xì)節(jié)問(wèn)題上jQuery已經(jīng)為我們考慮了.比如mootools-core沒(méi)有類(lèi)似slideUp/Down這樣的方法, 如果不引入擴(kuò)展庫(kù)的話,你得自己用Fx類(lèi)來(lái)實(shí)現(xiàn), 而jQuery里只是很簡(jiǎn)單的調(diào)用slideUp, slideDown或者slideToggle, 再比如在mootools中,你想取得一個(gè)隱藏(display:none)元素的尺寸信息, 得寫(xiě)個(gè)幾條代碼, 而在jQuery中你完全可以忽略元素是否隱藏這個(gè)問(wèn)題, 它已經(jīng)幫你搞定了. 再比如jQuery本身已經(jīng)為用戶提供了豐富的選擇器, 這一點(diǎn)尤為方便.mootools的話稍微欠缺一些.
我這里并不是說(shuō)mootools如何不行,因?yàn)楸旧韒ootools和jquery設(shè)計(jì)的初衷就是不同的, 如果你想更多的了解細(xì)節(jié)問(wèn)題,那么用mootools作為基礎(chǔ)庫(kù)還是不錯(cuò)的.
下面回到文章正題, 我先發(fā)兩個(gè)Demo截圖.
完整顯示:
收縮的狀態(tài)
如果你對(duì)此組件有興趣, 可以點(diǎn)擊下載, MooBox 源碼均未壓縮,其中doc.html為組件說(shuō)明文檔,demo.html是個(gè)比較完整的示例.
注意一個(gè)樣式的問(wèn)題,希望你的頁(yè)面中事先引入了類(lèi)似reset.css和定義基礎(chǔ)樣式的css(比如字體,顏色,行高等).
最后, 希望對(duì)你能有所幫助 : ) 有問(wèn)題可以留言討論
相關(guān)文章
Mootools 1.2教程 選項(xiàng)卡效果（Tabs）
今天將不只是受限于這個(gè)庫(kù)和一些基本的編程知識(shí)，我們來(lái)做一個(gè)簡(jiǎn)單的小項(xiàng)目。通過(guò)使用我們目前為止已經(jīng)學(xué)過(guò)的一些知識(shí)，有幾種方式來(lái)創(chuàng)建當(dāng)鼠標(biāo)移上去或者點(diǎn)擊時(shí)顯示相應(yīng)內(nèi)容的tab。2009-09-09
Mootools 1.2教程 同時(shí)進(jìn)行多個(gè)形變動(dòng)畫(huà)
今天我們來(lái)學(xué)習(xí)一下Fx.Elements插件，這是一個(gè)基于Fx.Morph的插件。與應(yīng)用于單個(gè)元素不同的是，F(xiàn)x.Elements可以允許你一次性給多個(gè)元素添加動(dòng)畫(huà)。2009-09-09
MooTools 頁(yè)面滾動(dòng)浮動(dòng)層智能定位實(shí)現(xiàn)代碼
MooTools 頁(yè)面滾動(dòng)浮動(dòng)層智能定位實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-08-08
背景圖跟隨鼠標(biāo)移動(dòng)的Mootools插件實(shí)現(xiàn)代碼
背景圖跟隨鼠標(biāo)移動(dòng)的Mootools插件實(shí)現(xiàn)代碼，學(xué)習(xí)mootools的朋友可以參考下。2011-12-12
使用Mootools動(dòng)態(tài)添加Css樣式表代碼,兼容各瀏覽器
這個(gè)函數(shù)很有用處,尤其是當(dāng)我們?cè)谑褂肕ootools開(kāi)發(fā)插件的時(shí)候,例如Tips等,當(dāng)我們需要額外的Css來(lái)支撐插件內(nèi)的效果時(shí),通常我們的做法是把Css放到單獨(dú)的css文件里調(diào)用2011-12-12
Mootools 1.2教程 Fx.Morph、Fx選項(xiàng)和Fx事件
今天，我們繼續(xù)探索一下這個(gè)庫(kù)的Fx部分2009-09-09
講一講JavaScript中的函數(shù)（function）的基本知識(shí)。2009-09-09
基于mootools 1.3框架下的圖片滑動(dòng)效果代碼
容器采用相對(duì)定位,圖片采用絕對(duì)定位,當(dāng)鼠標(biāo)移動(dòng)到相應(yīng)的圖片上,改變?nèi)eft屬性,用tween實(shí)現(xiàn)動(dòng)畫(huà)效果.2011-04-04
Mootools 1.2教程(3) 數(shù)組使用簡(jiǎn)介
在上一篇教程——《Mootools 1.2教程(2)——DOM選擇器》中，我們介紹了一下選擇器，其中有很多方法就會(huì)返回?cái)?shù)組（一個(gè)你可以對(duì)其中內(nèi)容進(jìn)行多種操作的特殊列表）。2009-09-09
Mootools 圖片展示插件(lightbox,ImageMenu)收集集合
Mootools圖片展示插件(lightbox,ImageMenu)收集，學(xué)習(xí)mootools的朋友可以參考，非常不錯(cuò)的效果。2010-05-05