如何使用Mootools范例

这里所提供的范例代码向用户展示了Mootools的工作原理,您无需理解Mootools的工作原理,拷贝范例的代码张贴到您的程序中就可以使用,但我们并不推荐这样.相反,这些范例代码是通过一些实际的例子来展示Mootools是如何适当的使用在项目中,以便您可以很好的理解它、运用它.这并不是说您不能逐句拷贝,我们更倾向于引导您理解motools而不是简单的拷贝.这里的范例代码如果不能很好的运行,请先试着自己解决而不是等开发者来修复它.

范例代码组成部分

在所有的范例页面中,您可以找到如下图所示的导航条.

导航条由4部分组成: 本页范例参考文档、JavaScript代码、HTML代码 和 CSS代码.

[navigation bar]

  • 本页范例参考文档 提供了本页范例所用到的Mootools函数的参考文档链接.
  • JavaScript代码 是本页范例所用到的Js代码.
    注意:所有的范例页面除 DomReadyVS.Load 之外全部封装到了一个Domready内,不包含在 JavaScript代码 中. (您可以查看范例页面的源代码来找到它.).这意味着下面的内容就是范例页面所用到的实际代码:

    window.addEvent('domready', function() {
	// 页面上所有的Js代码都封装在此
});
    如果您要复制本范例中的代码,请不要忘记写上domready event! (关于此点的更多内容可以在这里 和 这里 找到).
  • 页面中的 HTML代码 展示的是范例页中部分Html代码.
  • 页面中的 CSS代码 展示的是范例页中用到的部分.

 

注意: 为什么 DomReadyVS.Load 没有封装到一个event事件中? DomReadyVS.Load 专注于表现Mootools自定义的domready和原生的onload事件之间的不同,把一个现有的Domready插入到另外一个Domready时可能不会得到您想要的结果.

Final notes

所有在此陈列的Mootools范例使用的都是最新的Mootools发行版本,如果您在范例中发现Bug,请将它反馈到我们的论坛中,同时,在您提问之前,请先试着独懂代码,阅读此教程(Mootorial)或阅读Michelle写的文章.如果仍然无法解决问题,请到我们的论坛寻求帮助.

 

希望这些教程能帮助到您.

MooTools开发团队.