Ross Wan's World!

Python, Ajax, PHP and Linux.

Archive for the ‘Javascript’ Category

Javascript:打印对象

Posted by Ross Wan 于 2009/03/09

alert() 是我们调试阶段经常使用的方法,可以查看目标变量的值。但是,如果目标变量是对象,如:

var foo = {'key1': 'foo1', 'key2': 'foo2'};
alert(foo);

其显示结果是 [object Object]。这对于调试没有多大用处。再试下这个:

for(myKey in myObj){
    alert ("myObj["+myKey +"] = "+myObj[myKey]);
}

虽然可以显示期待的结果,但有点麻烦(或者可以将上面的代码封装在一个方法里)。

对于 Gecko 内核的浏览器,可以使用对象的 toSource() 方法,这是其 Javascript 的一个特性。

alert(foo.toSource());

其打印结果是: ({key1:”foo1″, key2:”foo2″})。

最后,当然不能忘了 Firebug 这个利器:

console.log(foo);

其打印结果是:Object key1=foo1 key2=foo2

Advertisements

Posted in Javascript | 3 Comments »

Dojo: Dialog 的 onClose 事件

Posted by Ross Wan 于 2009/03/06

对于dijit.Dial0g 为说,是没有 onClose 事件的,当你关闭它,只是将它隐藏而已。所以,应该用 hide 事件来代替。如:

var dialog = dijit.byId("fooDialog");
dialog.connect(dialog, "hide", function(e){
     /* do every thing here */
});

当 dialog 调用 hide() 隐藏自身时,会触发事件。

Posted in Ajax, Dojo | Tagged: , , , | Leave a Comment »

Dojo: Layout 的问题

Posted by Ross Wan 于 2009/03/03

<div id="wrap">
    <div id="main" dojoType="dijit.LayoutContainer">
...

在使用 Dojo 的 Layout(dijit.layout.xxxx),其 Wrap 容器必须设定其大小,如 style=”width:100px;height:100px;”。否则,将会显示空白页。在 1.2.3 和 1.3 都存在这个问题。如果其 Wrap 窗口是 Body,则将 Body 设为 style=”width:100%;height:100%;position:absolute” ;或者,将 Body 设为 style=”width:100%;height:100%;”, 将 #main 设为 style=”position:absolute”。

虽然不知道这是不是 Bugs,或者是不是一个正确的解决方法,但确实能解决目前问题:例如 《Book of Dojo》中的 Mail 应用例子。

Posted in Ajax, Dojo | Leave a Comment »

神奇的浏览器嗅探代码

Posted by Ross Wan 于 2009/02/26

shortest way to test for IE 一文中, 讲述了20个方法嗅探 IE 浏览器 ,其中:

ie = '\v'=='v';

上面的代码是不是很神奇,但重要的是,它确实正确地判断出 IE 浏览器。这是利用浏览器的特性来作出判断的。其它的利用浏览器特性判断的 JS 代码:

ie = !!top.execScript;
ie = /*@cc_on!@*/!1;
ie8 = !!window.XDomainRequest;
IEVersion = 0/*@cc_on+ScriptEngineMajorVersion()@*/;
ff = /a/[-1]=='a';
ff3 = (function  x(){})[-5]=='x';
ff2 = (function x(){})[-6]=='x';
safari=/a/.__proto__=='//';
chrome=/source/.test((/a/.toString+''));
opera=/^function \(/.test([].sort);

在 Mootools 1.2.1 里,也是利用浏览器的特性来作出嗅探的:

if (window.opera) Browser.Engine = {
    name: 'presto',
    version: (document.getElementsByClassName) ? 950 : 925};
else if (window.ActiveXObject) Browser.Engine = {
    name: 'trident',
    version: (window.XMLHttpRequest) ? 5 : 4};
else if (!navigator.taintEnabled) Browser.Engine = {
    name: 'webkit',
    version: (Browser.Features.xpath) ? 420 : 419};
else if (document.getBoxObjectFor != null) Browser.Engine = {
    name: 'gecko',
    version: (document.getElementsByClassName) ? 19 : 18};

Browser.Engine[Browser.Engine.name] =
Browser.Engine[Browser.Engine.name + Browser.Engine.version] = true;

				

Posted in Ajax, Javascript | Leave a Comment »

Mootools: toElement 方法

Posted by Ross Wan 于 2009/01/31

toElement 是 Mootools 1.2 里的一个新特性(但并没有在其官方文档里说明)。toElement 只是一个返回 element 对象的方法。当向 $ 传递一个对象时,它会尝试调用对象的 toElement 方法来取得当前 element。

示例

var User = new Class({
    initialize: function(name){
        this.name = name;
    },

    toElement: function(){
        if (!this.element) {
            this.element = new Element('div', {'class': 'user'});
            var avatar = new Element('img', {
                src: '/avatars/' + this.name + '.jpg'

            });
            var description = new Element('div', {
                'class': 'username',
                'text': this.name
            });
            this.element.adopt(avatar, description);
        }
        return this.element;
    }
});

window.addEvent('domready', function(){
    var alice = new User('Alice');
    var bob = new User('Bob');
    $(alice).inject('header', 'after');
    // let's inject bob after alice
    $(bob).inject(alice, 'after');
});

Posted in Ajax, Javascript, Mootools | Tagged: , , | Leave a Comment »

imgslideshow2: 基于 Mootools 的图片幻灯插件

Posted by Ross Wan 于 2009/01/30

之前写了个 jQuery 的图片幻灯插件,但存在不少问题, 例如“疯狂”点击导航按钮会显示不正常。现在用 Mootools 重写了一个 插件。(近来在学 Mootools,学习 Mootools 的源代码)

代码

/* ImgSlideShow, a plugin with mootools. It make the special images slide show.
*
* Licensed under The MIT License
*
* @author mrwlwan#gmail.com
* @date 01/27/2009
* @version 1.0
* @license http://www.opensource.org/licenses/mit-license.php The MIT License
*
* Usage:
* var myImgSlideShow = new ImgSlideShow($('mycontainor'));
* or
* var myImgSlideShow = new ImgSlideShow($('mycontainor'), {delay: 50000});
*
* Available methods:
* addImage(imgurl, href, where) add a image element, with the image url, reference url, position inserted.
* pause() pause the animation.
* resume() resume the animation.
*/

var ImgSlideShow = new Class({
   Implements: Options,

   // default settings
   options: {
       'delay': 3000, // set every image pauses time.
       'navBnBgcolor': '#fff',
       'navBnHeightLight': '#f00'
   },

   /* Initializes ImgSlideShow Object.
    *
    * @param {Element} container element which contains images.
    * @param {Object} optional, adjust different settings, like delay time.
    */
   initialize: function(imgContainer, options){
       this.setOptions(options);

       this.imgContainer = imgContainer;   // images container element
       this.imagesArray = imgContainer.getElements('img');     // all images elements array
       this.navBar = null;     // navigator bar element
       this.curentImgEl = null;    // image element displayed currently
       this.timer = null;      // timer, use to be cleared

       this.setImgStyle(this.imagesArray);

       this.imgContainer.setStyles({
           'position': 'relative',
           'overflow': 'hidden'
       });

       this.addNavBar();
       this.action(0);     // animate from the 0 index element.
   },

   /* Set the images' style.
    *
    * @param {Iterable} the image elements array.
    */
   setImgStyle: function(imgs){
       $each(imgs, function(item){
           item.setStyles({
               'visibility': 'hidden',
               'display': 'block',
               'position': 'absolute'
           });
       });
   },

   /* Add a image to the ImgSlideShow Object.
    *
    * @param {String} the imgages url.
    * @param {String} optional, the href url.
    * @param {Integer} optional, Insert the images to the possion of the imagesArray.
    */
   addImage: function(imgurl, href, where){
       var myhref = $pick(href, '#');
       // if the user defined the images in the HTML file, just clone the first image element, and configs it with the user setting.
       if(this.imagesArray.length){
           var aEl = this.imagesArray[0].getParent().clone();
           var newImageEl = aEl.getFirst();
           newImageEl.set('src', imgurl);
           aEl.set('href', myhref);
       }else{
           var newImageEl = new Element('img', {
               'src': imgurl
           });
           var aEl = new Element('a', {
               'href': myhref
           });
           aEl.grab(newImageEl);
       }
       this.setImgStyle([newImageEl]);
       if($chk(where)){
           var pos = parseInt(where);
           if(pos >= 0 && pos < this.imagesArray.length){
               aEl.inject(this.imagesArray[pos].getParent(), 'before');
               this.imagesArray.splice(pos, 0, newImageEl);
               // Refresh the navigator bar buttons.
               this.addNavButton();
               return;
           }
       }
       this.imgContainer.grab(aEl);
       this.imagesArray.push(newImageEl);
       // Refresh the navigator bar buttons.
       this.addNavButton();
   },

   /* Remove the special image element.
    *
    * @param {Integer}
    */
   removeImage: function(index){
       var index = parseInt(index);
       if(!$chk(index) || index < 0 || index >= this.imagesArray.length){
           return;
       }
       this.imagesArray[index].getParent().dispose();
       this.imagesArray.splice(index, 1);
       this.addNavButton();
   },

   /* Add a navigator bar.
    */
   addNavBar: function(){
       var navBar = new Element('div', {
           'id': 'navBar0000'
       });
       navBar.setStyles({
           'position': 'absolute',
           'z-index': 100,
           'right': '5px',
           'bottom': '5px',
           'height': '20px',
           'width': (this.imgContainer.getSize().x - 20),
           'padding-right': 5,
           'overflow': 'hidden'
       });
       navBar.inject(this.imgContainer, 'top');

       this.navBar = navBar;

       this.addNavButton();
   },

   /* Add some buttons to the navigator bar, or refresh the buttons.
    *
    */
   addNavButton: function(){
       if($chk(this.navBar)){
           this.navBar.empty();
       }
       this.imagesArray.each(function(item, index){
           var newBn = new Element('div', {
               'class': 'navbnclass000'
           });
           newBn.setStyles({
               'float': 'right',
               'opacity': 0.5,
               'width': '20px',
               'height': '20px',
               'color': '#000',
               'background-color': this.options['navBnBgcolor'],
               'text-align': 'center',
               'line-height': '20px',
               'margin-right': '2px',
               'cursor': 'pointer',
               'font-weight': 'bold'
           });
           newBn.store('imgEl', item);     // Store the relative image element to the navigator bar button element.
           newBn.store('index', index);    // store the relative index of the image element to the navigator bar button element.
           item.store('bn', newBn);        //Store the relative navigator bar button element to the image element.
           // onClick event, just stop current animation, and resume from the new index.
           newBn.addEvent('click', function(e){
               e.stop();
               var targetEl = e.target;
               targetEl.setStyle('background-color', this.options['navBnHeightLight']);
               this.stop();
               this.action(targetEl.retrieve('index'));
           }.bind(this));
           newBn.appendText(index+1);
           newBn.inject(this.navBar, 'top');
       }, this);
   },

   /* Action the animation. Use recursion algorithm.
    *
    * @param {Integer} animate from the index.
    */
   action: function(index){
       var imagesArrayLength = this.imagesArray.length;
       if(imagesArrayLength<2){
           return;
       }
       if($defined(index) && (index >= imagesArrayLength)){
           index = parseInt(index) % imagesArrayLength;
       }
       this.curentImgEl = this.imagesArray[index];
       this.curentImgEl.retrieve('bn').setStyle('background-color', this.options['navBnHeightLight']);
       this.curentImgEl.set('tween', {
            duration: 500
       }).fade('in').get('tween').chain(function(){
           this.timer = this.subAction.delay(this.options['delay'], this, index + 1);
       }.bind(this));
   },

   /* Used in the action function.
    *
    * @param {Integer} animate from the index.
    */
   subAction: function(index){
       this.curentImgEl.retrieve('bn').setStyle('background-color', this.options['navBnBgcolor']);
       this.curentImgEl.fade('out').get('tween').chain(function(){
           this.action(index);
       }.bind(this));
   },

   /* Stop the animation.
    */
   stop: function(){
       $clear(this.timer);
       this.curentImgEl.get('tween').cancel();
       this.curentImgEl.setStyle('visibility', 'hidden');
       this.curentImgEl.retrieve('bn').setStyle('background-color', this.options['navBnBgcolor']);
   },

   /* Pause the animation.
    *
    */
   pause: function(){
       $clear(this.timer);
       this.curentImgEl.get('tween').cancel();
       this.curentImgEl.setStyles({
           'visibility': 'visible',
           'opacity': 1
       });
   },

   /* Resume the animation.
    */
   resume: function(){
       $clear(this.timer);
       this.curentImgEl.get('tween').cancel();
       this.action(this.curentImgEl.retrieve('bn').retrieve('index'));
   }

});

用法示例

<html>
    <head>
        <title>Demo!</title>
        <script type="text/javascript" src="mootools-1.2.1.js"></script>
        <script type="text/javascript" src="imgslideshow2.js"></script>
        <script type="text/javascript">
            var imgSlideShow = new ImgSlideShow($('imgscontainer'), {delay:3000});
            imgSlideShow.addImage('imgs/2.jpg');
            imgSlideShow.addImage('imgs/3.jpg', '#', 4);
            imgSlideShow.removeImage(3);

           $('pausebn').addEvent('click', function(){
                imgSlideShow.pause();
           });

           $('resumebn').addEvent('click', function(){
                imgSlideShow.resume();
           });
        </script>
    </head>
    <body>
    <div id="imgscontainer">
        <a href='#'><img class='image' src="imgs/1.jpg"/></a>
        <a href='#'><img class='image' src="imgs/2.jpg"/></a>
        <a href='#'><img class='image' src="imgs/3.jpg"/></a>
        <a href='#'><img class='image' src="imgs/4.jpg"/></a>
        <a href='#'><img class='image' src="imgs/5.jpg"/></a>
    </div>
    <div id="bns">
        <button id="pausebn">Pause</button>
        <button id="resumebn">Resume</button>
    </div>
    </body>
</html>

语法

var myImgSlideShow = new ImgSlideShow(element, [, options]);

参数

  • element – 图片的容器对象。
  • options – 可选。如下的可选项

可选项

  • delay – 默认为3000(3秒)。设置图片的显示停留时间。
  • navBnBgcolor – 右下角导航按钮的背景颜色。
  • navBnHeightLight 导航按钮高亮时的背景颜色。

可用方法

  • addImage(imgurl, where) – 在 where 位置上添加一张图片。
  • removeImage(index) – 删除 index 位置上的图片
  • pause() – 暂停动画。
  • resume() – 重新开始动画。

兼容性

支持 IE 6.0+, FF2+, Safari 3.1+, Opera 9.0+

Posted in Ajax, Mootools | Tagged: , , | Leave a Comment »

jQuery: 表格排序插件

Posted by Ross Wan 于 2009/01/11

这是本人写的一个简单的表格排序插件。支持字符串和数字的排序。

代码

/*
* jtablesortable plugin for jQuery。表格排序插件
*
* @author mrwlwan#gmail.com
*/
(function($){
    // 定义可排序的数据类型,以及所对应的排序方法
    var sortFuns = {
        'default': sortDefault,
        'string': sortDefault,
        'num': sortNum,
        'date': sortDefault,
        'none': null
    };
    // 二维数组排序的默认比较函数
    function sortDefault(item1, item2){
        if(item1[1] == item2[1]){
            return 0;
        }
        if(item1[1] > item2[1]){
            return 1;
        }
        if(item1[1] < item2[1]){
            return -1;
        }
    }

    // 二维数组排序的数字比较函数
    function sortNum(item1, item2){
        item1[1] = parseFloat(item1[1]);
        item2[1] = parseFloat(item2[1]);
        return sortDefault(item1, item2);
    }

    // 表格排序函数
    function sortTable(jRows,sortFun, col, jThis){
        // 创建一临时的二维数组,元素数组的第一个元素是 jRows 行的索引,第二个元素是该行的 col 列的值
        var tempArray = [];
        for(var i=0;i<jRows.length;i++){
            tempArray.push([i, $.trim(jRows.eq(i).children('td').eq(col).text())]);
        }
        // 对 tempArray 数组进行排序
        tempArray.sort(sortFun);
        // 重排表格行
        for(var i=0;i<tempArray.length;i++){
            jRows.eq(tempArray[i][0]).appendTo(jThis);
        }
    }

    // 表格反转函数
    function reverseTable(jRows, jThis){
        $.each(jRows.get().reverse(), function(index, item){
            $(item).appendTo(jThis);
        });
    }

    //////////////////////////////////////////////////

    $.fn.extend({
        // 参数是可变的
        jtablesortable: function(){
            // 取得参数数组
            var args = arguments;
            // 设置当前 this 的一个引用。用于部分函数内部
            var jThis = this;

            // 设置 tr 对象样式
            this.find('tr').css({
                cursor: 'default'
                // 设置 thead 样式
            }).eq(0).css({
                cursor: 'pointer'
                //
            }).children().each(function(index, el){
                // 将当前项的索引保存到当前项对象的数据里
                $(el).data('col', index);
                // 取得当前项的排序方式
                var sortFun = 'default';
                if(index < args.length && ($.trim(args[index]) in sortFuns)){
                    sortFun = $.trim(args[index]);
                }
                // 如果为 none,表示当前项不进行排序操作
                if(sortFun == 'none'){
                    return;
                }
                // 将当前项的排序方式保存到当前项对象的数据里
                $(el).data('sortfun', sortFun);
                // 添加图标,并且处理单击事件
                $(el).append($('<img class="itemimg000" src="bg.gif"/>')).click(function(){
                    // 取得被单击项的索引值
                    var col = $(this).data('col');
                    // 取得当前表格的所有列
                    var jRows = jThis.children('tbody').children('tr');
                    // 取出 this 对象 sortcol 里的值,并判断是否该列上次进行排序过。如果是,则直接调用表格反转函数
                    if(jThis.data('sortcol') == col){
                        // 处理图标。先对当前排序是升序还是降序当出判断
                        var desc = $(this).data('desc');
                        var sortImg = desc ? 'asc.gif' : 'desc.gif';
                        $(this).children('.itemimg000').attr('src', sortImg);
                        $(this).data('desc', !desc);
                        // 反转表格
                        reverseTable(jRows, jThis);
                        return;
                    }
                    // 处理图标
                    $(this).parent('tr').children('td, th').eq(jThis.data('sortcol')).children('.itemimg000').attr('src', 'bg.gif');
                    $(this).children('.itemimg000').attr('src', 'desc.gif');
                    // 设置当前为降序
                    $(this).data('desc', true);
                    // 将当前列的索引保存到 jThis 对象的数据里
                    jThis.data('sortcol', col);

                    // 进行排序
                    sortTable(jRows, sortFuns[$(this).data('sortfun')], col, jThis);
                });
            });
        }
    });
})(jQuery);

用法

$('#tableid').jtablesortable('default', 'num', 'string', 'date', 'num', 'none');

参数指定对应列的数据类型,插件会根据不用的数据类型选择不同的方法来进行排序。支持的类型有 default(默认的字符串排序方法)、string(字符串)、num(数字)、date(日期)。还有一个是 none,表示对应列不进行排序。

注: 某数据类型还未实现,可能在以后会跟进。

兼容性

支持 IE 6.0+, FF2+, Safari 3.1+, Opera 9.0+ 。

Posted in Ajax, Javascript, jQuery | Tagged: , , , | Leave a Comment »

imgslideshow: 基于 jQuery 的图片幻灯片插件

Posted by Ross Wan 于 2008/12/11

现在,越来越多的网站首页,都以放置一个图片幻灯片来显示”头条”内容。于是,为了方便使用,制作了一个功能简单的图片幻灯片插件。

代码

(function($){
    $.fn.extend({
        'imgSlideShow': function(options){
            // 扩展参数
            var op = $.extend({
                'itemclass': null,
                'desclass': null,
                'delay': 2000
            }, options);
            // 设置窗口的样式
            this.css({
                position: 'relative',
                overflow: 'hidden'
            });
            // 设置图片项的样式
            this.children('.' + op.itemclass).css({
                clear: 'both',
                display: 'none'
            });
            // 添加数字标签项窗口
            $('<div id="imgslideshow_label0000"></div>').appendTo(this).css({
                position: 'absolute',
                bottom: '2px',
                right: '2px',
                width: '100%',
                height: '22px',
                'z-index': 10000,
                overflow: 'hidden'
            });
            // 取得所有图片项
            var items = $('.' + op.itemclass, this);
            // 图片项的数目
            var itemsLength = items.length;
            // 当前的图片项索引
            var curItemIndex = 0;
            // 当前的 timeout 函数返回值
            var timeoutReturn;

            // 添加数字标签项
            for(var i=itemsLength-1;i>=0;i--){
                $('<div class="label0000" id="label0000' + i + '">' + (i + 1) + '</div>').appendTo('#imgslideshow_label0000').css({
                    float: 'right',
                    width: '20px',
                    height: '20px',
                    'line-height': '20px',
                    'text-align': 'center',
                    'font-weight': 'bold',
                    'background-color': '#EFEBD6',
                    'opacity': 0.8,
                    'border': '1px solid #000',
                    'cursor': 'pointer',
                    'margin-left': '2px'
                    // 标签项的单击事件
                }).click(function(e){
                    // 停止当前的图片项动画并将其隐藏和设置回透明度为1
                    items.eq(curItemIndex).stop().hide().css({
                        opacity: 1
                    });
                    // 阻止事件流
                    e.stopPropagation();
                    // 暂停当前的 timeout 函数
                    clearTimeout(timeoutReturn);
                    // 设置标签项的样式
                    $('#label0000' + curItemIndex).css('background-color', '#EFEBD6');
                    items.eq(curItemIndex).hide();
                    $('#label0000' + curItemIndex).css('background-color', '#EFEBD6');
                    // 从当前的索引开始,重新开始图片动画
                    curItemIndex = parseInt($(this).text()) - 1;
                    imgSlideShowProcess();
                });
            }
            // 图片动画执行函数
            var imgSlideShowProcess = function(){
                $('#label0000' + curItemIndex).css('background-color', '#FF8210');
                items.eq(curItemIndex).fadeIn(300, function(){
                    timeoutReturn = setTimeout(imgFadeOut, op.delay);
                });
            };
            // 淡出图片
            var imgFadeOut = function(){
                items.eq(curItemIndex).fadeOut(1, function(){
                    $('#label0000' + curItemIndex).css('background-color', '#EFEBD6');
                    curItemIndex = (curItemIndex + 1) % itemsLength;
                    imgSlideShowProcess();
                });
            };
            // 开始图片动画
            imgSlideShowProcess();

            return this;
        }
    });
})(jQuery);

使用示例

<html>
    <head>
        <script type="text/javascript" src="jquery-1.2.6.js"></script>
        <script type="text/javascript" src="jquery-imgslideshow.js"></script>
        <script type="text/javascript">
            $(function(){
                $('#container').imgSlideShow({itemclass: 'item', 'delay': 3000})
            });
        </script>
    </head>
    <body>
        <div id="container">
            <div class="item">
                <img src="imgs/1.jpg"/>
            </div>
            <div class="item">
                <img src="imgs/2.jpg"/>
            </div>
            <div class="item">
                <img src="imgs/3.jpg"/>
            </div>
            <div class="item">
                <img src="imgs/4.jpg"/>
            </div>
            <div class="item">
                <img src="imgs/5.jpg"/>
            </div>
        </div>
    </body>
</html>

可选参数 delay 是设置每幅图片的显示时间。

兼容性

支持 IE 6.0+, FF2+, Safari 3.1+, Opera 9.0+

Posted in Ajax, Javascript, jQuery | Tagged: , , , | 1 Comment »

pyquery: Python 中的 jQuery

Posted by Ross Wan 于 2008/12/09

别误会,这不是一个可以将 Python 解释为 javascript 的库(类似于 GWT)。pyquery 是一个以 jQuery 的方式处理 xml 文档的库。

使用 PyQuery 类来加载一个 xml 文档 ──── 可以来自符合 xml 格式的字符串、lxml 文档或者 url:

>>> from pyquery import PyQuery
>>> from lxml import etree
>>> d = PyQuery("<html></html>")
>>> d = PyQuery(etree.fromstring("<html></html>"))
>>> d = PyQuery(url='http://google.com/')
>>> d = PyQuery(filename=path_to_html_file)

现在,就可以用 jQuery 的方式来处理 xml 文档:

>>> d("#hello")
[<p#hello.hello>]
>>> p = d("#hello")
>>> p.html()
'Hello world !'
>>> p.html("you know <a href='http://python.org/'>Python</a> rocks")
[<p#hello.hello>]
>>> p.html()
'you know <a href="http://python.org/">Python</a> rocks'
>>> p.text()
'you know Python rocks'

使用方式与 jQuery 是完全一样的,具体可以参阅 jQuery 的官方文档:

Posted in jQuery, Python | Tagged: , , , | Leave a Comment »

jQuery: 页面 Mask

Posted by Ross Wan 于 2008/12/07

何为页面 Mask (遮罩)?看过 jQuery 的 Lightbox 插件的一定不会陌生。就是在页面上建一个透明层遮盖住页面的全部内部。在 Ajax 应用中,显示一个 Dialog(以 Div 方式显示)前,都会先建一个 Mask。因为经常会用到,所以写成了一个 jQuery 插件,方便自己的使用。

代码

(function($){
    $.extend({
        documentMask: function(options){
            // 扩展参数
            var op = $.extend({
                opacity: 0.8,
                z: 10000,
                bgcolor: '#000'
            }, options);

            // 创建一个 Mask 层,追加到 document.body
            $('<div class="jquery_addmask">&nbsp;</div>').appendTo(document.body).css({
                position: 'absolute',
                top: '0px',
                left: '0px',
                'z-index': op.z,
                width: $(document).width(),
                height: $(document).height(),
                'background-color': op.bgcolor,
                opacity: 0
            }).fadeIn('slow', function(){
                // 淡入淡出效果
                $(this).fadeTo('slow', op.opacity);
            }).click(function(){
                // 单击事件,Mask 被销毁
                $(this).fadeTo('slow', 0, function(){
                    $(this).remove();
                });
            });

            return this;
        }
    });
})(jQuery);

使用方法

$.documentMask();

$.documentMask({
    'opacity': 0.6,
    'bgcolor': '#E79673',
    'z': 1000000
});

参数中,z 表示 z-index。

兼容性

支持 IE 6.0+, FF2+, Safari 3.1+, Opera 9.0+

Posted in jQuery | Tagged: , , | Leave a Comment »