当前位置: 首页 » 代码 » javascript » weuiDialog对话框插件,基于weui和jQuery

weuiDialog对话框插件,基于weui和jQuery

发布时间:2017-03-27

javascript 代码

, ,

热度:122

最近做微信项目越来越多,需要用的weui框架,dialog对话框是在操作中经常用到,所以抽空自己写了个插件,该插件基于weuijquery,调用插件前请先引用weui.cssjquery

一、引用

weui框架地址:http://weui.io/weui.css,可以直接右击另存为

jquery版本2.0以上即可

二、初始化

var d=$().weuiDialog(options);

注意:如果$(selector).weuiDialog(options),则生成的DOM会在selector内,不传递selector$().weuiDialog();)的话默认在body内最后添加DOM树。

三、默认参数与设置

参数名(类型) 初始值 备注
title(string) Dialog标题 标题
content(string) Dialog提示内容 内容
ok(string) 确定 确定
cancle(string) 取消 取消按钮文字,如果只需要一个按钮,可以设置cancle:””
okFcn(function) function(){}

确认按钮点击后触发事件,该方法return false;可以阻止对话框关闭

cancleFcn(function) function(){}

取消按钮点击后触发事件,该方法return false;可以阻止对话框关闭

closeFcn(function) function(){}

Dialog对话框关闭后触发事件

四、事件

d.show();//显示
d.close();//关闭
d.remove();//移除dom
d.title(string);//设置标题
d.content(string);//设置内容

五、示例

默认两个按钮

var d=$().weuiDialog({
	title:"删除文章",
	content:"您确认要删除该文章?",
	okFcn:function(){
		//这里写确定按钮点击后执行的操作
		//return false;		可以阻止dialog关闭
	}
});
 
d.show();

单个按钮

var d=$().weuiDialog({
	title:"删除文章",
	content:"该文章已成功删除",
	cancle:""
});
 
d.show();


插件源码:

/** 
 * 基于weui和jQuery的对话框插件 
 * 版本:2.0
 * 作者:HawkLu 
 *  因官方weui.css更新,旧版本无法使用
 */  
  
;  
(function($, window, document, undefined) {  
    /*----------------------------------------------------------- 
     * |                                                        | 
     * |                        全局变量                            | 
     * |                                                        | 
     * ---------------------------------------------------------- 
     */  
    var _this; //插件对象  
    var that; //插件父元素  
  
    //dialog 模版 DOM树  
    var dialogModel = '<div id="dialog" style="display:none ;">' +  
        '<div class="weui-mask"></div>' +  
        '<div class="weui-dialog">' +  
        '<div class="weui-dialog__hd"><strong class="weui-dialog__title" data-title=""></strong></div>' +  
        '<div class="weui-dialog__bd" data-content=""></div>' +  
        '<div class="weui-dialog__ft">' +  
        '<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" data-cancle="" alt="cancle"></a>' +  
        '<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" data-ok="" alt="ok"></a>' +  
        '</div></div></div>';  
  
    /*----------------------------------------------------------- 
     * |                                                        | 
     * |                        构造函数                            | 
     * |                                                        | 
     * ---------------------------------------------------------- 
     */  
    var Dialog = function(opt) {  
        this.defaults = {  
            title: "Dialog标题",  
            content: "Dialog提示内容",  
            ok: "确定",  
            cancle: "取消",  
            okFcn: function() {  
                return true;  
            },  
            cancleFcn: function() {  
                return true;  
            },  
            closeFcn: function() {  
                return true;  
            }  
        }  
        this.options = $.extend({}, this.defaults, opt);  
        init(this.options);  
    };  
  
    /*----------------------------------------------------------- 
     * |                                                        | 
     * |                        私有方法                            | 
     * |                                                        | 
     * ---------------------------------------------------------- 
     */  
  
    //添加DOM  
    function add() {  
        $("#dialog").remove();  
        if(that.html() == undefined) {  
            $("body").append(dialogModel);  
        } else {  
            that.append(dialogModel);  
        }  
    }  
    //插件初始化  
    function init(ops) {  
        add();  
        $.each(ops, function(key, value) {  
            if(typeof(value) == "string" && value) {  
                $("#dialog").find('[data-' + key + ']').html(value);  
            } else if(typeof(value) == "string" && !value) {  
                $("#dialog").find('[data-' + key + ']').remove();  
            } else {  
                //              console.log("this is function");  
            }  
        });  
        bind();  
    }  
  
    //事件绑定  
    function bind() {  
        $("#dialog a[data-ok],#dialog a[data-cancle]").on("click", function(e) {  
            if(typeof _this.options[$(e.target).attr("alt") + "Fcn"] == "function") {  
                if(_this.options[$(e.target).attr("alt") + "Fcn"]() === false) {  
                    return false;  
                } else {  
                    _this.close();  
                }  
            } else {  
                return false;  
            }  
  
        });  
    }  
  
    /*----------------------------------------------------------- 
     * |                                                        | 
     * |                        公有方法                            | 
     * |                                                        | 
     * ---------------------------------------------------------- 
     */  
    Dialog.prototype = {  
        //显示  
        show: function() {  
            $("#dialog").show();  
        },  
        //关闭  
        close: function() {  
            $("#dialog").hide();  
            this.options["closeFcn"]();  
        },  
        //移除dom  
        remove: function() {  
            $("#dialog").remove();  
        },  
        //设置标题  
        title: function(v) {  
            this.options['title'] = v;  
            init(this.options);  
        },  
        //设置内容  
        content: function(v) {  
            this.options['content'] = v;  
            init(this.options);  
        }  
  
    };  
  
    //插件主体  
    $.fn.weuiDialog = function(options) {  
        that = $(this);  
        _this = new Dialog(options);  
        return _this;  
    };  
  
})(jQuery, window, document);  

纯JS版本:http://example.hawklu.com/weuiDialog.js,可直接右击另存为

版权声明:本文为博主原创,未经允许请勿转载

去顶部