2008-10
如果你还没有准备好开始这一讲,请参考这一系列的教程,这里是《MooTools 1.2系列教程目录》。
欢迎开始这一系列的教程的第七讲。今天,我们来看一下如何通过MooTools 1.2和我们以前几讲中的内容来操作样式,这将给你在UI上带来很大的控制权。处理样式非常简单,不过今天我们要做一些调整。例如,我们要介绍键值对(key-value pair)对象。我们也会讲到在domready之外来传递变量,就像我们在关于函数的那一讲中学到的一样。从这里开始,我们会开始慢慢提高难度,介绍一些必要的编程概念。如果你是JavaScript新手或者第一次开始学MooTools,请确保你在明白了前面的教程,你可以随意地问我任何问题。
基本方法
.setStyle();
这个函数可以允许你设置一个元素的样式属性。我们在前面的一些例子中已经使用过了。你要做的就是把它放在你的 选择器之后,那么它将改变一个元素或者多个元素的样式属性。
// 定义你的选择器
// 添加.setStyle方法
// 指定样式属性和值
$('body_wrap').setStyle('background-color', '#eeeeee');
$$('.class_name').setStyle('background-color', '#eeeeee');
2008-10
如果你还没有准备好,请阅读以前的教程,这里是《MooTools 1.2系列教程目录》。
我们已经学习过如何来选取DOM元素,怎么创建数组,怎么创建函数,怎么把事件添加到元素,今天我们来深入地学习一下如果操纵HTML元素。通过MooTools 1.2,你可以添加新元素到一个HTML页面中,也可以删除元素,以及改变任何样式或者元素参数,这些都非常容易。
基本方法
.get();
这个工具可以让你获取元素的属性(property)。元素的属性是组成一个HTML元素的各种不同部分,例如src、value、name等等。使用.get();方法非常简单:
// 下面这行将返回id为“id_name”的元素的html标记名(div、a、span……)
$('id_name').get('tag');
<div id="body_wrap">
<span id="id_name">Element</span> <!-- 上面的代码将返回“span” -->
</div>
2008-10
还是需要一个目录,那就做一个吧!
MooTools是近来仅次于jQuery流行的JavaScript框架,也是我一直比较喜欢的开发框架,最近也正在写MooTools 1.2的注释文档。本来自己也想写一些关于MooTools的教程来着,但是自己很懒,又担心自己写的不好,反倒误了初学者。正好今天无意在国外的论坛上看到这么一个blog,发现有这么一系列的教程,写的很好,很适合初学者和对MooTools完全不熟悉的人,于是决定全部中文化。
另外,此翻译版本已获得原作者支持,在其第一篇文章中已有本文链接。
- Mootools 1.2教程(1)——MooTools介绍
- Mootools 1.2教程(2)——DOM选择器
- Mootools 1.2教程(3)——数组使用简介
- Mootools 1.2教程(4)——函数
- Mootools 1.2教程(5)——事件处理
- Mootools 1.2教程(6)——操纵HTML DOM元素
- Mootools 1.2教程(7)——设置和获取样式表属性
- Mootools 1.2教程(8)——输入过滤第一部分(数字)
- Mootools 1.2教程(9)——输入过滤第二部分(字符串)
- Mootools 1.2教程(10)——Fx.Tween的使用
- Mootools 1.2教程(11)——Fx.Morph、Fx选项和Fx事件
- Mootools 1.2教程(12)——用Drag.Move实现拖拽和拖放
- Mootools 1.2教程(13)——正则表达式
- Mootools 1.2教程(14)——定时器和哈希简介
- Mootools 1.2教程(15)——滚动条(Slider)
- Mootools 1.2教程(16)——排序类和方法简介
- Mootools 1.2教程(17)——手风琴插件
- Mootools 1.2教程(18)——类(一)
- Mootools 1.2教程(19)——Tooltips
- Mootools 1.2教程(20)——选项卡效果(Tabs)
- Mootools 1.2教程(21)——类(二)
- Mootools 1.2教程(22)——同时进行多个形变动画
- Mootools 1.2教程(23)——滑动效果(Slide)
- 待续……
2008-10
如果你还没有准备好,请阅读以前的教程,这里是《MooTools 1.2系列教程目录》。
今天我们开始第五讲,在上一讲(《Mootools 1.2教程(4)——函数》)中,我们学习了在MooTools 1.2中建立和使用函数的几种不同方式。下一步就是理解事件了。和选择器类似,事件也是建立互动界面的一个重要部分。一旦你掌握了一个元素,你需要去决定什么行为来触发什么效果。先把效果留着以后在讲,我们首先看一看中间步骤和一些常见的事件。
左键单击事件
左键单击事件是web开发中最常见的事件。超链接识别点击事件,然后把你带到另外一个URL地址。MooTools能够识别其他DOM元素上的点击事件,在设计和功能上给了你极大的灵活性。给一个元素添加一个点击事件的第一步:
// 通过$('id_name') 取得一个元素
// 用.addEvent添加事件
// ('click')定义了事件的类型
$('id_name').addEvent('click', function(){
// 在这里添加点击事件发生时你要执行的任何代码
alert('this element now recognizes the click event');
});
2008-10
如果你还没有准备好,请阅读以前的教程,这里是《MooTools 1.2系列教程目录》。
今天开始MooTools系列教程的第4讲。如果你还没有看过上一讲,请先查看上一篇教程《Mootools 1.2教程(3)——数组使用简介》。今天我们先不讲MooTools,而是讲一讲JavaScript中的函数(function)的基本知识。
但是,为了符合MooTools这个主题,你需要知道在哪里该使用MooTools的函数。此前,我们已经在我们的所有示例代码中,把代码都放在domready方法中。当我们需要把它放在domready的外面时,我们使用了函数(function)。在你在domready里面调用函数之前,函数并不会被执行。
一般来说,一种比较好的方式是尽可能地把你的函数代码都放在页面之外的某一个地方,然后通过JavaScript应用来调用它们。当你只是写代码玩玩,可能把所有的东西写在一个页面上更容易一些。在这个教程中,我们使用下面的约定:
<script type="text/javascript">
/*
* 函数定义写在这里
*/
window.addEvent('domready', function() {
/*
* 函数调用写在这里
*/
});
</script>
2008-10
如果你还没有准备好,请阅读以前的教程,这里是《MooTools 1.2系列教程目录》。
在上一篇教程——《Mootools 1.2教程(2)——DOM选择器》中,我们介绍了一下选择器,其中有很多方法就会返回数组(一个你可以对其中内容进行多种操作的特殊列表)。今天,我们在来看看如何使用数组来管理DOM元素。
基本方法
.each();
在处理数组时,.each();方法是你最好的朋友。它提供了一种很容易的方法来遍历数组的每个元素,如果有需要还可以对其中的元素进行任何逻辑处理。例如,我们可以假设你需要为页面中的每个div对象调用alert方法:
$$('div').each(function() {
alert('a div');
});
2008-10
上个星期Microsoft放出消息说北京时间昨天凌晨2点发布Silverlight 2.0 RTW,经典论坛Silverlight版的版主nasawz很“敬业”地、很忠实地作为Silverlight的粉丝守在电脑前守到两点多,一直等到Silverlight 2.0正式发布,实在是令人佩服。有关Silverlight 2的各种工具的下载集合及更新说明,请参考这篇文章:Silverlight 2 正式版官方正式发布(更新下载地址)(感谢nasa的辛苦工作!)
最近开始抽空翻译MooTools的帮助文档,争取这个周末翻译完成,中文帮助文档发布地址在这里。准备翻译完成之后看看Silverlight,2.0了,终于可以再试试了。
另外,貌似Silverlight 2.0在可以在非安全连接中调用安全连接(SSL)服务了。这个以后再说,嗯~
还有,都说Silverlight 2.0支持Chrome,为什么不说是Chrom支持Silverlight 2.0呢?而实际上Chrome在发布的时候就已经支持Silverlight 2了。
2008-10
如果你还没有准备好,请先阅读上一篇《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>
Processed in 0.0624992 second(s) , unknow queries
Powered by OWord V0.1, Even Not Alpha
(此博客程序为半成品,请勿索取,以免给您的心灵造成创伤^_^)
鄂ICP备05026031号
用户中心
日志分类

最新日志
最新评论
统计信息






友情链接