Mootools常用方法扩展(三)

继续Mootools常用方法扩展,依然还是String类的扩展。

方法:unescapseHTML

说明:这个上次忘了,和escapseHTML正好是一对儿,功能正好相反。

String.implement({
    unescapseHTML: function() {
        ///<summary>
        /// 反转义字符中的HTML代码
        ///</summary>
        ///<returns type="STRING" />
        var htmlChars = ['&~&amp;', '<~&lt;', '>~&gt;'];
        var r;
        var s = this;
        for (var i = htmlChars.length - 1; i >= 0; i--) {
            r = htmlChars[i].split('~');
            s = s.replace(new RegExp(r[1], 'g'),

Mootools常用方法扩展(二)

继续Mootools常用方法扩展,依然还是String类的扩展。

方法:format

说明:一个非常简单的format方法,和C#里面的format类似。这个方法会用参数来依次替换字符串中用大括号{}括起来的数字,比如用第一个参数替换{0},用第二个参数替换{1}等等。

String.implement({
    format: function() {
        ///<summary>
        /// 格式化一个字符串,替换其中用大括号包含的数字及大括号,类似C#的format
        /// 如用第一个参数替换{0}
        ///</summary>
        ///<param name="values..." type="String">相关参数</param>
        ///<returns type="STRING" />
        var s = this;
        for 

Mootools常用方法扩展(一)

收集了我们团队部分常用的方法,我稍微进行了一下整理,贴出来和大家分享。

先从String的扩展开始吧,后面有一部分的扩展要依赖这里扩展的方法。为了更加清晰和详细,我会一个方法一个方法地贴出来,你完全可以把所有的方法合并在一起。

方法:startsWith

说明:这个方法可以判断字符串是不是以指定的字符串开头。

String.implement({
    startsWith: function(s) {
        ///<summary>
        /// 检查一个字符串是不是以某个字符串开头
        ///</summary>
        ///<param name="s" type="String">开始字符串</param>
        ///<returns type="BOOLEAN" />
        return (this.indexOf(s) == 0);
    }
}

简单示例:

最新版瑞星和MooTools冲突了

诡异的瑞星啊,12月20号升级了一个版本,导致MooTools的脚本直接报错了。昨天发现的问题,稍微看了一下,还没什么头绪,我的这个电脑上没有装瑞星,暂时没有办法贴出具体出错现象,只是稍微描述一下状况。

初步看了一下,在安装了瑞星12月20号发布的新版本后,发现MooTools里面很多地方经过MooTools封装后的document对象变成了都变成了一个function,这是继之前发现MooTools的Event类封装有问题后发现的一个类似的问题。

由于document对象不对,首先直接导致了$()方法失效,其次是事件(Event),后来简单地把事件里面的document对象改了以后,发现在触发事件的时候会导致IE7直接Crash。

在相同的情况下,jQuery暂时没有发现类似的问题,看来应该是MooTools自己的封装和扩展有问题,当然了,瑞星又干了一件诡异的事情………

Mootools 1.2教程(22)——同时进行多个形变动画

原文地址:30 Days of Mootools 1.2 Tutorials – Day 22 – Fx.Elements

通过Fx.Elements同时处理多个形变动画

请尊重个人劳动,转载请注明出处:http://fdream.net,译者:Fdream

如果你还没有准备好开始这一讲,请参考这一系列的教程,这里是《MooTools 1.2系列教程目录》

今天我们来学习一下Fx.Elements插件,这是一个基于Fx.Morph的插件。与应用于单个元素不同的是,Fx.Elements可以允许你一次性给多个元素添加动画。这在你给多个元素添加有相同选项的形变动画时非常有用。就像我们在第20讲中看到的最后一个例子一样。

基本用法

使用Fx.Elements的方法看起来和Fx.Morph差不多。这两者之间的区别在于.start({})方法和.set({})方法。

为了保证事情简洁,让我们首先建立一个元素数组,以用来传递给Fx.Elements。…

Mootools 1.2教程(21)——类(二)

原文地址:30 Days of Mootools 1.2 Tutorials – Day 21 – Classes part II

类——第二部分

请尊重个人劳动,转载请注明出处:http://fdream.net,译者:Fdream

如果你还没有准备好开始这一讲,请参考这一系列的教程,这里是《MooTools 1.2系列教程目录》

Fdream注:原文好像少了一部分,因此我自作主张地补充了下面这一段及BaseClass的代码。

在今天的教程中,我们将主要学习一下MooTools中类的实现和继承(扩展)。通过实现和继承,我们可以在子类中使用父类的方法,而不需要再重新声明和实现相同的方法。MooTools中的Class类可以帮助我们轻松地做到这一点。首先,我们定一个基类(base class)。

var BaseClass = new Class({
    // 定义一个方法testFunction
    // 这个方法弹出一个对话框

Mootools 1.2教程(20)——选项卡效果(Tabs)

原文地址:30 Days of Mootools 1.2 Tutorials – Day 20 – A Few Mootools Tabs

项目——创建选项卡效果的几种方式

请尊重个人劳动,转载请注明出处:http://fdream.net,译者:Fdream

如果你还没有准备好开始这一讲,请参考这一系列的教程,这里是《MooTools 1.2系列教程目录》

今天将不只是受限于这个库和一些基本的编程知识,我们来做一个简单的小项目。通过使用我们目前为止已经学过的一些知识,有几种方式来创建当鼠标移上去或者点击时显示相应内容的tab。

简单的“额外信息”标签(TAB)

鼠标移上去显示内容的TAB

在这第一个项目中,我们要创建一个简单的菜单,当鼠标移动到这些菜单上时显示相应的内容。首先,我们来完成HTML代码——我们就用包含四个列表项的ul好了,然后再创建四个div(每一个div对应一个列表项):

// 这里是我们的菜单

Mootools 1.2教程(19)——Tooltips

原文地址:30 Days of Mootools 1.2 Tutorials – Day 19 – Tooltips

Mootools 1.2工具提示(tooltip)教程

请尊重个人劳动,转载请注明出处:http://fdream.net,译者:Fdream

如果你还没有准备好开始这一讲,请参考这一系列的教程,这里是《MooTools 1.2系列教程目录》

今天我们将来看一下MooTools绑定的Tooltip插件。通过“提示(Tips)”,你可以轻松地自定义一个包含一个标题和内容的工具提示,可以自定义样式,自定义淡入淡出渐变效果。我们还将仔细学习一下工具提示的选项和事件,还有一些用来从元素上添加和移除工具提示的工具。最后,我们将学习一下怎么让一个页面有多个不同样式的工具提示。

基础知识

创建一个新的工具提示

创建一个新的工具提示非常简单。首先,我们来创建一个要添加工具提示的链接:

<a class="tooltipA"

Mootools 1.2教程(18)——类(一)

原文地址:30 Days of Mootools 1.2 Tutorials – Day 18 – Classes part I

Class(类)(第一部分)

请尊重个人劳动,转载请注明出处:http://fdream.net,译者:Fdream

如果你还没有准备好开始这一讲,请参考这一系列的教程,这里是《MooTools 1.2系列教程目录》

今天我们将讲一下用MooTools来创建和使用类的一些基本知识。

简单地讲,一个类就是一个容器,这个容器包含了一些变量集合和操作这些变量的函数,以便实现特定的功能。在一个内容牵涉较多的项目中,类会显得难以置信的有用。

变量

在前面一系列的课程中,我们已经学习过了Hash对象中键值对(key/value pair)的使用方式,因此,下面的这个例子中创建了一个类,它只包含了一些变量,你看起来可能会觉得非常的熟悉:

// 创建一个名为class_one的类
// 包含两个内部变量

MooTools的Cookie类太“自作聪明”了

没注意到MooTools的Cookie类在写的时候自己做了一次encode,在读的时候做了一次decode,在一般的情况下,这个不会有什么问题。但是想一下特殊的情况,如果你在服务器端写Cookie的时候没有encode,那么读的时候是不是会乱掉?当然了,服务器端代码写Cookie一般还是会encode的。但是问题是这样的,如果你要写一个很长的Cookie,中间有很多内容,你先把这些内容那个encode,然后用$作为分隔符把这些项连接起来,再用服务器端代码写入到Cookie里面。好,你现在的Cookie的值可能是这样的:

// 这个cookie的内容有三项,分别为:
// Fdream——decode之后为——Fdream
// http%3A%2F%2Ffdream.net——decode之后为——http://fdream.net
// %25%25%24%24——decode之后为——%%$$
youkey=Fdream$http%3A%2F%2Ffdream.net$%25%25%24%24