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

不忙的时候,抽空写的这个,目标很远大,不过可能就要到此为止了,如果哪天我的blog想换编辑器了,可能会再弄弄,呵呵~当然,如果你有兴趣,可以继续完善。UI来源于新浪博客的编辑器,在原有的基础上增加了部分按钮。目前兼容的浏览器列表(只做了一些非常简单的测试,如有错误,请及时告诉我,谢谢^_^):

  • IE 6, IE 7, IE 8
  • Firefox 3
  • Opera 9.6
  • Safari 3
  • Chrome 0.3

一段这样的JavaScript代码,猜猜结果如何?

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

var i = 0, m = 20, a = [], r = /^\d+$/g;
for(i = 0; i < m; i++){
    a.push('' + i);
}

m = a.length;
for(i = 0; i < m; i++){
    if(r.test(a[i])){
        document.write(a[i] + 'true<br />');
    }
    else{
        document.write(a[i] + 'false<br />');
    }
}

也许你期待的结果应该全是true,可是实际结果呢?true和false交替出现,0是true,1是false,2是true,3是false……是不是很怀疑?其实仔细看一下...

JavaScript和ActionScript互相调用时,其实有个非常好的特性,不过貌似很少有人提到这个特性:它们之间的数据类型对方均可以识别。因此,你可以通过swf提供的接口来传递对象、数组、字符串等等。不过它们之间传递的参数的值的长度有限制(具体长度还没仔细测试),因此你不能把JavaScript中的一个超大的对象直接传递进去。不过即使是这样,已经非常好用了,看看示例代码:

AS(ActionScript)代码:

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

// 创建一个行的TextField来显示调用结果
var t:TextField = new TextField();
t.x = 10;
t.y = 10;
t.width = 300;
t.height = 200; 
this.addChild(t);

// 这个是要给JavaScript调用的函数
function test(obj){
    var s = [];
    for(var p in obj){
        s.push(p + ': ' + obj[p]);
    }
    t.text = s.join('\r\n');
}

// 添加调用接口
ExternalInterface.addCallback("test", test);
t.text = 'ready';

// 调用JavaScript,告诉JavaScript我已经准备好了
ExternalInterface.call('ready', {a:'a string', b:'string b'});

先废话几句,这第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方法,打印指定的变量或者对象的内容,返回描述变量内容的字符串...

我们先看一下JavaScript中关系运算符的类型转换规则:

引用内容:

关系运算符(<、>、<=、>=)

  • 试图将 expression1 和 expression2 都转换为数字。
  • 如果两表达式均为字符串,则按字典序进行字符串比较。
  • 如果其中一个表达式为 NaN,返回 false。
  • 负零等于正零。
  • 负无穷小于包括其本身在内的任何数。
  • 正无穷大于包括其本身在内的任何数。

所以很容易理解下面这样的比较:

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

1 < NaN: false
1 >= NaN: false

'a' < 1: false
'a' >= 1: false

需求总是不断变化的,相信有非常多的人也碰到过类似的问题:比如鼠标移到flash上就把flash放大,鼠标移开就缩小,嗯,说了半天其实这个东西就是用来做广告的。

一般的怎么做的呢?无非是在flash里面用ExternalInterface来调JavaScript,用JavaScript来调整swf的大小或者切换另一个swf,或者索性就在swf的上面覆盖一个透明层(貌似要用空白的图片才好使,否则事件还是会跑到swf里面去,而不是给这个层d),然后用这个层来捕捉事件,然后调整swf的大小。

相信很多“挑剔”的人都和我一样,嫌这个方法太麻烦,又不好看。为什么不能直接写在swf里面呢?我也不知道为什么,Adobe没有提供这个接口……不过ActionScript不是可以调JavaScript吗?而且JavaScript也可以写在ActionScript里面,干嘛不从这里打点主意呢?

很好,actionscript.org上就有一篇很好的文章讲怎么在ActionScript中注入JavaScript或者VBScript。不过,显然是有人和我们一样“挑剔”,利用这个写了一个用来改变自身大小的swf,demo在这里,这里有详细的说明和源码下载...

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