代码改变世界

jquery弹出层控件

2011-11-16 00:19  Zhuang miao  阅读(472)  评论(0编辑  收藏  举报

 

(function($) {
    // 插件的定义
    // var opts;
    $.fn.modelwindow = function(options) {
        debug(this);
        // build main options before element iteration
        opts = $.extend({}, $.fn.modelwindow.defaults, options);

        $("#contentdiv").css({ display: "none" });
        // iterate and reformat each matched element     
        this.each(function() {

            //  var markup = $this.html();
            // call our format function

            $(this).click(function() {
                $("#contentdiv").html(showdiv($(this).attr("href")), opts);
                $("#contentdiv").fadeIn(700)
                return false;
            });

        });
    };
    // 私有函数:debugging     
    function debug($obj) {
        if (window.console && window.console.log)
            window.console.log('modelwindow selection count: ' + $obj.size());
    };
    // 定义暴露format函数     
    $.fn.modelwindow.format = function(txt) {
        return '<strong>' + txt + '</strong>';
    };
    // 定义弹出层函数
    showdiv = function(url, opts) {
        return '<div id="maskdiv" onclick="modelwindowhidden()"></div><div id="showdiv" ><div class="showdivbar"><a href="#" class="showdivbarclose" onclick="modelwindowhidden(opts)">close</a></div><iframe name="iframe" id="iframe" src=' + url + ' width="100%" height="500" /></div>';
    };
    //隐藏窗口
    modelwindowhidden = function(opts) {
         
        var d = $("#iframe").contents().find(opts.callbackcontentid).val();
        opts.callback;
        opts.onclosed(d);
       
        $('#contentdiv').fadeOut(700);
        $('#contentdiv').html("");

       
    }
    // 插件的defaults     
    $.fn.modelwindow.defaults = {
        foreground: 'red',
        background: 'yellow',
        callback: {},
        onclosed: {},
        callbackcontentid: ""

    };
    // 闭包结束     
})(jQuery);     
 
 
调用方法
$(document).ready(function() {
     $("a").modelwindow({
      onclosed: function(data) { $("#cb").val(data); },
      callbackcontentid: "#Text4"

    })
})