最近在晚上接觸了一個(gè)叫做YUI-Ext的一整套Javascript框架, 是由
jack.slocum根據(jù)Yahoo!的框架擴(kuò)展而來(lái)的, 用了用,感覺(jué)還可以, 優(yōu)缺點(diǎn)都有, 優(yōu)點(diǎn)就是效果很炫目, 動(dòng)態(tài)換膚, 組件豐富, 缺點(diǎn)就是沒(méi)有好的可以拖放操作的IDE, 全部都要手寫(xiě)代碼, 牽扯比較多的Javascript核心的語(yǔ)法, 必須了解運(yùn)行機(jī)制等, 由于剛剛接觸, 了解的還不是很多, 所以寫(xiě)下學(xué)習(xí)的一些經(jīng)驗(yàn), 供自己以后參考.
首先去下載了一個(gè)YUI-Ext的包, 整個(gè)包不是很大, 2.5MB, 其中還包括了文檔和演示, 現(xiàn)在最新的版本是1.0Beta1.
下來(lái)就要開(kāi)始實(shí)驗(yàn)了, 怎么入手呢? 看著他的演示, 滿頭霧水, 去網(wǎng)站看看吧, 發(fā)現(xiàn)有一個(gè)學(xué)習(xí)的地方(
Learn), 進(jìn)去之后, 看到了入門(mén)的教程, 教你怎么開(kāi)始一個(gè)HelloWorld之類的東西.
點(diǎn)擊
Intro to Ext, 進(jìn)去之后, 發(fā)現(xiàn)還不是從零開(kāi)始, 首先去下一個(gè)
IntroToExt.zip, 里面是一個(gè)HTML文件, 一個(gè)CSS文件和一個(gè)JS文件, 我們的HelloWorld就是從這里開(kāi)始的.
首先他告訴我們, 不管在HTMl內(nèi)部還是外部寫(xiě)JS腳本, 都需要把代碼放到一個(gè)
1 Ext.onReady(function() {
2 alert("Congratulations! You have Ext configured correctly!");
3 });
看到了吧, 這個(gè)語(yǔ)法奇怪嗎? (如果覺(jué)得和平時(shí)看到的Javascript)不一樣, 就去看看Javascript權(quán)威指南吧, 上面都介紹的很清楚, 這種語(yǔ)法應(yīng)該就是所說(shuō)的字面量方法調(diào)用吧 ^_^, 也就是說(shuō), 這個(gè)會(huì)調(diào)用Ext類的onReady方法, 傳入一個(gè)匿名方法, 方法內(nèi)部就很簡(jiǎn)單的打出了一個(gè)提示框, 恭喜你的Ext已經(jīng)配置正確了. 然后我們還是在剛才的那個(gè)框架上(就是剛才下載的那個(gè)IntroToExt.zip)來(lái)進(jìn)行試驗(yàn). 解壓縮以后, 把HTMl文件里的所有引入的JS文件, 都按照路徑拷貝進(jìn)來(lái), 還有CSS文件.
我們平時(shí)要獲取一個(gè)HTMl文檔里的節(jié)點(diǎn), 該怎么做?
var myDiv = document.getElementById('myDiv');
沒(méi)錯(cuò), 這樣會(huì)工作的很好, 而且現(xiàn)在大多數(shù)人也是這樣來(lái)搞的, 但是這樣在頁(yè)面里一個(gè)兩個(gè)可以, 多了就會(huì)很頭疼, 于是乎YUI-Ext給我們想到了一個(gè)簡(jiǎn)單的方法.
Ext.onReady(function() {
var myDiv = Ext.get('myDiv');
});
簡(jiǎn)單吧(如果用Prototype.js里的語(yǔ)法更簡(jiǎn)單^_^).這樣就可以得到一個(gè)id為myDiv的元素, 然后把他的引用賦值給變量myDiv, 這以后, 你就可以對(duì)這個(gè)div進(jìn)行操作了, 比如:
myDiv.highlight();// 這個(gè)元素的背景色會(huì)從高亮的黃色漸漸淡出.
myDiv.addClass('red');// 加入一個(gè)自定義的CSS樣式類 (在 ExtStart.css 里面定義)
myDiv.center();// 在瀏覽器里居中這個(gè)元素
myDiv.setOpacity(.25);// 給這個(gè)元素加上25%的半透明效果
現(xiàn)在我們知道怎樣通過(guò)元素的ID來(lái)選擇一個(gè)元素, 下面我們看看怎么選擇一批元素.
Ext.select('p').highlight();
高亮所有標(biāo)簽為P的元素. 通過(guò)這個(gè)例子你就可以看到, 我們來(lái)選擇頁(yè)面上的一批元素有多么簡(jiǎn)單, Ext為我們提供了一個(gè)接口, 通過(guò)這個(gè)接口我們可以來(lái)獲取一批想要的元素, 并為他們?cè)O(shè)置屬性, 不用循環(huán), 不用遍歷每一個(gè)元素.僅僅這些, 還不夠, Javascript是用事件來(lái)驅(qū)動(dòng)的, 我們呢, 就來(lái)看看怎樣響應(yīng)一個(gè)事件
Ext.onReady(function() {
Ext.get('myButton').on('click', function(){
alert("You clicked the button");
});
});
這樣就為頁(yè)面里ID為myButton的按鈕加上了一個(gè)click事件, 觸發(fā)這個(gè)時(shí)間以后會(huì)彈出一個(gè)提示框. 嘿嘿, 有沒(méi)有發(fā)現(xiàn), 我們不用再在頁(yè)面里的元素上, 寫(xiě)上一個(gè) onclick='showMessage', 然后在去JS里面, 寫(xiě)上一個(gè)showMessage函數(shù)了. 我們?cè)賮?lái)給所有的P標(biāo)簽都加上單擊事件, 方法同上
Ext.onReady(function() {
Ext.select('p').on('click', function() {
alert("You clicked a paragraph");
});
});
通過(guò)上面兩個(gè)例子, 我們可以看到, 我們可以把一個(gè)事件處理用很簡(jiǎn)單的方式定義在一行里, 不用給出函數(shù)名稱, 只寫(xiě)上函數(shù)體, 就是所謂的匿名函數(shù), 同樣我們也可以在另外的地方寫(xiě)出一個(gè)函數(shù), 然后把函數(shù)賦值給一個(gè)變量, 我們?cè)僭谶@里來(lái)使用它.
Ext.onReady(function() {
var paragraphClicked = function() {
alert("You clicked a paragraph");
}
Ext.select('p').on('click', paragraphClicked);
});
這次我們先實(shí)現(xiàn)了一個(gè)函數(shù), 然后賦值給paragraphClicked, 在事件調(diào)用的時(shí)候我們把這個(gè)句柄傳了進(jìn)去, 這樣也可以實(shí)現(xiàn)事件的相應(yīng)^_^.我們?cè)賮?lái)看看他還能干什么.
Ext.onReady(function() {
var paragraphClicked = function(e) {
var paragraph = Ext.get(e.target);
paragraph.highlight();
}
Ext.select('p').on('click', paragraphClicked);
});
在所有的P標(biāo)簽上單擊的時(shí)候, 都會(huì)高亮這個(gè)段落, 然后在淡出, 酷吧..下面我們?cè)賮?lái)看看更酷的, 消息框的使用.我們?cè)谏厦娴母吡琳Z(yǔ)句下面再加上幾句
var paragraph = Ext.get(e.target);
paragraph.highlight();
Ext.MessageBox.show({
title: 'Paragraph Clicked',
msg: paragraph.dom.innerHTML,
width:400,
buttons: Ext.MessageBox.OK,
animEl: paragraph
});
再次點(diǎn)擊一下頁(yè)面中的段落標(biāo)簽, 看看會(huì)有什么效果?? 簡(jiǎn)直太帥了, 我們看到了一個(gè)消息框, 幾乎是半透明的, 里面填充了我們段落中的文字, 在關(guān)閉消息框的時(shí)候, 還會(huì)出現(xiàn)那種附著效果, 帥成鷹了..主要就是最后那個(gè)屬性的使用. animEl: paragraph, 這個(gè)屬性可以設(shè)置附著效果會(huì)附著到哪個(gè)元素上, 我們選擇了觸發(fā)時(shí)間的那個(gè)段落.看到這里, 怎么樣, 激動(dòng)了吧, 嘿嘿,我也挺激動(dòng)的.后面還有Ajax消息的相應(yīng), 我們改天再來(lái)繼續(xù)學(xué)習(xí)吧..
posted on 2007-04-09 10:27
Toez 閱讀(2953)
評(píng)論(1) 編輯 收藏 所屬分類:
Ajax&JavaScript