我觉得以后做项目,还是首先把组件都自己封装一遍好了,这样以后想改起来也方便,哈哈。
先上效果图
我自己看别人博客写东西总是喜欢看最终效果图,觉得感兴趣就会继续看。
哈哈,现在不方便提供图。。看下面代码怎么使用好了。
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 = {