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