[easyui]封装一个dialog

我觉得以后做项目，还是首先把组件都自己封装一遍好了，这样以后想改起来也方便，哈哈。

先上效果图

我自己看别人博客写东西总是喜欢看最终效果图，觉得感兴趣就会继续看。

哈哈，现在不方便提供图。。看下面代码怎么使用好了。

html

我会将所有dialog一开始都放在一个隐藏的div里，这样即使它还没初始化在页面也是不可见的，经过EasyUI初始化之后，会自动跑到body下面。

<div style="display:none">
    <div id="dlg-a"></div>
    <div id="dlg-b"></div>
    ...
</div>

js

首先一定要注意的就是代码一定要写在onload事件里，或者 $(function)

// 我个人习惯先声明这样一个变量，用来存放所有的dialog
var dialogs = {};
// hm是项目名，dialog这个函数下文开始细说
// 第一个参数选择器，第二个参数是dialog的option
// 这样就定义好了这个dialog，此时它还没有初始化，只是定义
dialogs.a = new hm.dialog('#dlg-a',{title:'a'});
// 会在首次使用的时候才去初始化（单例模式）
// 这里有个回调函数，返回值跟messager.confirm一样
// 这样设计我觉得还挺方便使用的，比如添加和编辑，使用同一个dialog，但是操作却是不同的。
dialogs.a.open(function(result){});

开始分析封装

新建一个dialog.js文件

// 国际惯例，自执行函数
(function(){        
    function dialog(selector,options) {}

    // 这里重写dialog的默认属性或者添加一些属性
    dialog.options = {};
    // 重写or添加 事件
    dialog.events = {};
    // 重写or添加 方法
    dialog.methods = {};

    // hm是项目名，所以我的一些组件都是封装在这个位置
    window.hm.dialog = dialog;
})();

参数

dialog.options = {