Play Google

玩转谷歌--学习笔记,成长历程。

« 解决background-position:left bottom; 在FireFox中不兼容

我的第一个Jquery插件---解决IE6 Select框总是在图层(div)的上面显示的BUG

/*
*Author:karry
*Version:1.0
*Time:2008-11-19
*jquery1.2.6
*为IE6或之前的版本解决Select框会覆盖住DIV图层的BUG
*只有在IE版本小于7的时候才会执行以下代码
*/
(function($) {
    $.fn.decorateIframe = function(options) {
        if ($.browser.msie && $.browser.version < 7) {
            var opts = $.extend({}, $.fn.decorateIframe.defaults, options);
            $(this).each(function() {
                var $myThis = $(this);
                //创建一个IFRAME
                var divIframe = $("<iframe />");
                divIframe.attr("id", opts.iframeId);
                divIframe.css("position", "absolute");
                divIframe.css("display", "none");
                divIframe.css("display", "block");
                divIframe.css("z-index", opts.iframeZIndex);
                divIframe.css("border");
                divIframe.css("top", "0");
                divIframe.css("left", "0");
                if (opts.width == 0) {
                    divIframe.css("width", $myThis.width() + parseInt($myThis.css("padding")) * 2 + "px");
                }
                if (opts.height == 0) {
                    divIframe.css("height", $myThis.height() + parseInt($myThis.css("padding")) * 2 + "px");
                }
                divIframe.css("filter", "mask(color=#fff)");
                $myThis.append(divIframe);
            });
        }
    }
    $.fn.decorateIframe.defaults = {
        iframeId:"decorateIframe1",
        iframeZIndex:-1,
        width:0,
        height:0
    }
})(jQuery);

一个比较简单的功能,写这个例子的主要目的是为了体会JQUERY插件开发的方式。

使用方法:

 $("div").decorateIframe();

可以传入的参数

iframeId -- 装饰用的Iframe 的Id值

iframeZIndex -- Iframe的Z轴坐标

iframe的宽度--如果用户不设置,则自动获取需要装饰的DIV 的宽度和PADDING值的和。

iframe的高度--同上。

演示地址:查看,下载:点击下载

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

vinehoo,web2.0葡萄酒社区
vinehoo,web2.0葡萄酒社区

日历

最新评论及回复

最近发表

Powered By Karry 

Copyright © 2008 PlayGoogle.com. All Rights Reserved.