类级别的插件开发

插件的框架代码（不支持chrome）：

;(function ($) {
    $.extend({
        "modalwindow": function (options) {
                //这里写插件代码    
        }
    });
})(jQuery)

html：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html" ; charset="utf-8"/>
    <title>弹出窗口使用示例</title>
    <style type="text/css">
        body {
            margin: 20px;
        }

        body, input {
            font-size: 9pt;
        }

        #test {
            font-size: 9pt;
            width: 500px;
            height: 50px;
        }


    </style>
    <script src="js/jquery-2.2.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-1.12.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.modalwindow.js" type="text/javascript"></script>
    <script type="text/javascript">
        //        在页面加载时，为按钮关联事件处理代码
        $(function () {
            //应用自定义的modalwindow插件
            $("#modalwindow").click(function () {
                $.modalwindow({
                    url: "http://www.baidu.com"
                });
            })
        })

    </script>

</head>

<body>
<div id="test">这个示例演示了自定义类级别的插件的使用方法</div>
<input type="button" name="getdata" id="modalwindow" value="单机弹出窗口">
</body>

</html>

jquery.modalwindow.js：


;(function ($) {
    $.extend({
        "modalwindow": function (options) {
            //设置属性
            options = $.extend({
                url: "https://www.baidu.com/", //打开的网址
                vArguments: null,    //参数
                dialogHeight: "200px",  //对话框高度
                dialogWidth: "500px",     //对话框宽度
                dialogLeft: "100px",      //左侧位置
                dialogTop: "50px",        //右侧位置
                status: "no",             //是否显示状态条
                help: "no",               //是否显示帮助按钮
                resizable: "no",          //是否允许调整尺寸
                scroll: "no"              //是否显示滚动条
            }, options);
            //弹出窗口
            var retVal = window.showModalDialog(options.url, options.vArguments, "dialogHeight:" + options.dialogHeight +
                ";dialogWidth:" + options.dialogWidth + ";dialogLeft:" + options.dialogLeft + ";dialogTop:" + options.dialogTop +
                ";status:" + options.status + ";help:" + options.help + ";resizable:" + options.resizable + ";scroll:" +
                options.scroll + ";");
            //返回弹出式窗口
            return retVal;       //返回窗口引用值
        }
    })
})(jQuery)

result：

posted on 2016-05-26 09:02 Newbie_小白阅读(183) 评论(0) 收藏举报