BlogJava-Toez's Web Log-文章分类-Ajax&JavaScript

BlogJava-Toez's Web Log-文章分类-Ajax&JavaScripthttp://www.blogjava.net/toez/category/21066.htmlzh-cnMon, 09 Apr 2007 03:22:02 GMTMon, 09 Apr 2007 03:22:02 GMT60YUI-Ext 学习笔记(一)[原]http://www.blogjava.net/toez/articles/109331.htmlToezToezMon, 09 Apr 2007 02:27:00 GMThttp://www.blogjava.net/toez/articles/109331.htmlhttp://www.blogjava.net/toez/comments/109331.htmlhttp://www.blogjava.net/toez/articles/109331.html#Feedback0http://www.blogjava.net/toez/comments/commentRss/109331.htmlhttp://www.blogjava.net/toez/services/trackbacks/109331.htmljack.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消息的相应, 我们改天再来继续学习吧..

Toez 2007-04-09 10:27 发表评论

]]>