Fdream's Blog
专注于WEB前端开发
Powered by Google
15 6 7 8 9 10 11 12 1319

如果你还没有准备好,请先阅读上一篇《Mootools 1.2教程(1)——MooTools介绍》。我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本。

今天开始本系列教程的第2讲。在这一讲中,我们会学习几种选择HTML元素的方法。在许多方面,这是MooTools用得最多最基本的。毕竟,要创建一个基于HTML元素的交互性用户体验,你必须首先把它们掌握在手中。

基本的方法

$();

$函数是MooTools中基本的选择器。你可以通过它来根据一个ID选择DOM元素。

参考代码: [复制代码] [保存代码]

// 选择ID为”body_wrap“的元素
$('body_wrap');

参考代码: [复制代码] [保存代码]

<div id="body_wrap">
</div>

有人最近要求我们写一个关于MooTools 1.2的30天的教程,这似乎也是个很不错的主意,于是我们决定现在就开始。在这些教程中,我们假设用户没有任何MooTools或者是JavaScript经验,但是至少有基本的HTML和CSS知识。

MooTools 1.2 JavaScript库介绍

MooTools 1.2是个强大的轻量级的JavaScript库,专门为减轻Web中交互性JavaScript开发。在某种程度上,你可以认为MooTools是CSS的扩展。例如,CSS可以让你在鼠标移上去时发生改变。JavaScript允许你接触更多的时间(点击事件、鼠标悬停事件、键盘事件……),MooTools让这一切变得非常容易。

另外,MooTools还有各种各样的非常好的扩展,可以让你不只是改变一个元素的属性,还可以让你有”morph“(变形)或者”tween“(补间动画)属性,让你有能力去创建动画效果,就像你在我的导航菜单上看到的一样(Fdream注:原作者的,我的首页也有)。

这只是一个例子,MooTools可以让你做更多的事情。在接下来的30天里,我们将深入MooTools库,探索从数组(Array)和函数(Function)到Fx.Slide,以及其他捆绑插件的每一个东西。

引用MooTools 1.2

首先,下载并引用MooTools 1.2核心库。

  • 下载MooTools 1.2核心库
  • 把MooTools 1.2核心库上传到你的服务器或者工作区
  • 在你的HTML文档头部head标记之内链接MooTools 1.2核心库

Optimizing Ajax Based Applications

优化基于Ajax的应用程序

Ajax is all about speed and interactivity. Without these features, using Ajax for building a specific application or website is just useless.

Ajax完全在于速度和交互性。如果没有这些特性,用Ajax来构建特定的应用或者网站是毫无用处的。

Developers have to ensure that they build applications that will cater to the immediate need of their users. They have to optimize their application before releasing them even for beta testing.

开发这应该确保他们的应用程序能够迎合用户的直接需求。他们必须在发布之前优化他们的应用程序,甚至只是发布Beta测试。

Optimizing the Application Prematurely

过早地优化应用程序

Premature optimization may seem to be a safe practice in ensuring that the application will work as expected. But this, however, is the cause of almost any problem in an Ajax based applications when it comes to optimization.

过早的优化似乎四个安全的做法,可以确保应用程序如期工作。但是,当开始优化基于Ajax的应用程序时,这几乎是所有问题的起因...

Updates for AJAX in IE8 Beta 2

IE 8 Beta 2中的AJAX新功能

Sunava Dutta here, a program manager focused on improving AJAX in the browser! Now that Internet Explorer 8 Beta 2 is out, I want to write about some of the latest rounds of enhancements we’ve made. As many of you may recall, back in March we discussed a set of developer experiences in AJAX across scenarios such as client-side cross-domain data access, local storage, and navigation state management among many others. The good news is our team has been working since Beta 1 to tweak and update our implementations based on feedback from developers (thanks for your contributions!) and ongoing updates to the W3C standards drafts on which most of these implementations are based or have been submitted for consideration. Not content with doing just that, we also added a few new features for developers. More on that later…

我是Sunava Dutta,一个致力于改进浏览器里AJAX的项目经理。现在Internet Explorer 8 Beta 2已经出来了,我想写一些关于我们最近做的一些改进。可能许多人都还记得,早在三月份的时候,我们讨论了一些列关于在各种场景下的AJAX开发经验,例如客户端跨域读取数据、本地存储以及导航状态管理等等。好消息是我们的团队从Beta 1开始,就一直根据开发者的反馈(谢谢你们的贡献!)来调整和更新我们的实现,也一直在更新W3C标准草案,在这其中的许多实现都是基于这个草案或者已经提交这个草案审议的。除此之外,我们也为开发者增加了一些新的特性,这个以后再详细说...

写了个在页面中点击小图查看大图的功能,应用到了我的blog上,效果可以点一下我前一篇日志中的图。本来在Firefox和IE下都跑得挺好的,可惜我也比较喜欢用Chrome,于是用Chrome看了一下,结果却发现很奇怪的现象:先是两个不同对象的动画效果会混乱,好不容易调好了结果却发现大图的尺寸也乱了……

先是动画效果的问题,两个不同的Element,均使用MooTools封装后的Element对象的morph方法,代码如下:

参考代码: [复制代码] [保存代码]

// 背景层的动画
this._overlayer.morph({ 'opacity': [0, 0.8] });
// 图片的动画
this._imagelayer.morph({
    'left': ex, 
    'top': ey, 
    'width': size.width, 
    'height': size.height, 
    'padding': 8 
});

代码中并没有想要改变this._overlayer宽和高,结果却是this._imagelayer出不来了,this._overlayer的宽和高却变成了图片的宽和高,想想应该是把morph对象弄混了。于是试试给this._imagelayer新new了一个Fx.Morph对象...

.net平台上本来有一套Microsoft自己的Ajax开发框架,不过貌似反应不怎么好,现在终于有个好的消息了:非常火热的jQuery框架已经被Microsoft纳入了ASP.NET AJAX开发框架中,ScottGu已在其BLOG中对其做了较为具体的介绍:

原文地址:jQuery and Microsoft

从图上可以看出,在Visual Studio中,其智能提示还是相当不错的。另外,Microsoft将会另外开发一些基于jQuery的控件(controls)和小插件(widgets),而jQuery的帮助文档也将加入官方的帮助文档中。据其介绍,此功能不久后即将发布...

今天在玩JavaScript的语法高亮,弄得差不多了在Firefox 3和IE 7下都正常了,最后想看看Chrome下是不是正常,结果打开我的测试页面,除了在前面的一部分文字显示出来以外,页面剩余部分居然是一片空白!

很诡异的用chrome打开源代码看(因为有语法高亮,很容易知道问题出在哪),结果很明显,我的js中有这么一句:

参考代码: [复制代码] [保存代码]

this.ignore = '<!--';

在源代码查看器中显示,Chrome从这个注释字符串开始,把后面的都当成注释了,偏偏我后面的js里面还有这么一行:

参考代码: [复制代码] [保存代码]

this.commentOff = '-->';

由于这一段js被chrome认为是注释,以致页面不能正常解析,所以这个字符串前面的HTML代码能够正常工作,而这个后面的就不行了……

不过有一个解决办法,就是把这段js写在外部文件中就没这个问题了^_^

看这篇之前,请先看上一篇:[翻译]jQuery和MooTools的真正区别(上)

Extensibility - Because I Like To Tweak Things

可扩展性——因为我喜欢调整一些东西

This brings me to the last big benefit that coding this way provides, assuming that you are writing your code in a way that lets you take advantage of it: extensibility. MooTools has a class based hierarchy (inspired by Dean Edwards excellent work), but don’t let the name fool you. It’s called a class but it’s really just an object factory that makes taking advantage of the prototypal inheritance model in JavaScript easier.

这是这种编码方式给我代理的最后一个大好处,假设你现在写代码的方式能够利用它的可扩展性。MooTools有一种基于类的层次结构(灵感来源于Dean Edwards的杰出工作),不要被这个名字给欺骗了。尽管它叫做类,实际上就只是一个object工厂,只不过让JavaScript里面的原型继承模型变得更容易跟简单而已。

You don’t need MooTools to do this of course. JavaScript will let you do it yourself. But because this is the way MooTools works from the ground up, it makes it hard to avoid writing your own code this way. Writing your own classes is really easy, and extending a class - even if you didn’t write it - is easy, too.

你当然不需要MooTools来做这些。JavaScript可以让你自己来实现...

15 6 7 8 9 10 11 12 1319
Copyright © 2005-2008,Fdream All Rights Reserved
Processed in 4.0784904 second(s) , unknow queries
Powered by OWord V0.1, Even Not Alpha
(此博客程序为半成品,请勿索取,以免给您的心灵造成创伤^_^)
鄂ICP备05026031号