Fdream's Blog
专注于WEB前端开发
Powered by Google
1 2 3 4 5

先废话几句,这第23篇教程一直没有翻译出来,直到今天我看到待审评论里面有这么一条超长的评论,结果一看,居然是这篇教程的翻译稿。这位热心的Mootools爱好者是Fanhp,非常感谢你的辛勤劳动!同时,我感到非常羞愧,实在是有愧大家的期望!愧疚是要拿行动来补的,于是我赶紧对此篇翻译进行了一些整理,修改了其中部分词句,并整理了示例代码。

------------------------

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

今天继续我们的Mootools 1.2教程的第23课,我们今天来讲一下Fx插件中的Fx.Slide。通过该插件,可以让你把内容以滑动的方式显示出来。它使用起来非常简单,是你UI工具箱中一个很好的工具。

基本用法

就像我们前面看过的所有类一样,我们在把这个类应用到一个元素上面时,我们要做的第一件事就是初始化一个新的Fx.Slide实例。

首先,让我们为滑动元素建立一个HTML文件。

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

<div id="slide_element" class="slide">这里是要滑动显示的内容。</div>

继续Mootools的扩展,适用于Mootools 1.1及1.2,这次在Element扩展了两个非常简单的方法,一个用来获取或者设置一个元素的innerHTML(这个是模仿jQuery里面的html()方法),还一个方法是把一个表单对象转成hash对象,用得比较少一点。

方法:html

说明:当参数不为空时,设置一个元素的innerHTML,当参数为空时,返回当前元素的innerHTML。

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

Element.implement({
    html: function(s) {
        ///<summary>
        /// 获取元素的HTML内容或者设置元素的HTML内容
        ///</summary>
        ///<param name="s" type="String">参数为空时,获取HTML内容;参数为字符串时,设置HTML的内容</param>
        ///<returns type="String" />
        if (s === undefined) {
            return this.get('html');
        }
        else {
            this.set('html', s + '');
            return s;
        }
    }
});

继续Mootools常用方法扩展,这次是Window类上的扩展,也就是全局函数。

方法:$params

说明:获取页面URL参数。你可以使用任何指定的分隔符,比如'#',默认为'#'。

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

Window.implement({
    $params: function(delimiter) {
        ///<summary>
        /// 获取页面URL的参数,返回包含参数的hash对象
        ///</summary>
        ///<param name="delimiter" type="String">参数和URL的分隔符,比如?或者#,默认为#</param>
        ///<returns type="Hash" />
        delimiter = (delimiter || '#').escapeRegExp();
        var params = new Hash();
        try {
            var requestStr = (location.toString().match(new RegExp(delimiter + '(.+)$')) || [0, 0])[1];
            if (requestStr) {
                params = requestStr.toHash(true);
            }
        }
        catch (e) {
        }
        return params;
    }
}

方法:$dump

说明:类似于PHP中的var_dump方法,打印指定的变量或者对象的内容,返回描述变量内容的字符串...

继续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'), r[0]);
        }
        return s;
    }
}

继续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 (var i = 0; i < arguments.length; i++) {
            s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
        }
        return s;
    }
}

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

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

方法:startsWith

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

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

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

昨天我说瑞星升级最新版后,导致MooTools在IE下报错的问题,仔细看了后,发现不只是报错这么简单。在更多的时候会直接导致IE Crash。不过不只是MooTools有问题,很多用户已经在论坛上反应脚本出错了,比如有这样的:“瑞星升级到2009导致浏览器世界之窗1.4用百度就自动关闭”,不过还有更严重的,比如“更新到2009 本地连接.宽带连接.音量图标都没了”,还有蓝屏一系列问题。不过目前为止还没有官方人员做出相应回答。

貌似这次瑞星是强制升级,问题一下子就凸显出来了,瑞星官方论坛上反映有问题的一堆一堆的,甚至有人非常不满,以致刷屏。

瑞星现在已经非常牛逼,已经牛逼到他的进程你根本没办法干掉,以前听说360安全卫士可以把它干掉,发现瑞星升级后已经干不掉了。就连他的菜单中也没有退出选项,你只能默默地被强奸。

既然被强奸了,那就享受好了,要更舒服点,可以这样子做:

  • 打开“开始”菜单
  • 选择“运行”
  • regsvr32 /u "C:\Program Files\Rising\Rav\RavScrCh.dll(如果你的是套装,那就是下面的这个命令:regsvr32 /u "C:\Program Files\Rising\Ris\RavScrCh.dll)

其实这个组件就是瑞星的网页监控组件,号称是网页监控,就只有IE出了问题,莫非就只能监控IE?

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

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

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

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

1 2 3 4 5
Copyright © 2005-2008,Fdream All Rights Reserved
Processed in 0.2500032 second(s) , unknow queries
Powered by OWord V0.1, Even Not Alpha
(此博客程序为半成品,请勿索取,以免给您的心灵造成创伤^_^)
鄂ICP备05026031号