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