有两年时间没有用过EasyUI了,也好长时间没有写过代码了,今天对着EasyUI API边学边用,发现了几个死活也调不对的问题,经测试发现原来是版本差异问题。
1. data-options 属性
data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性(具体是哪个版本开始未考究,反证1.3就有了)。通过这个属性,我们可以对easyui组件的实例化可以完全写入到html中.
<div id="test" class="easyui-window" data-options="closed:true,modal:true,title:'Test Window'" style="width:300px;height:100px;">
Window Content class="easyui-window" zoukang
http://blog.csdn.net/kang89
</div>
如上,轻松就可以定义一个window,而需要像以前版本中写好几行js,如下
<div id="win" iconCls="icon-save" title="My Window">
Window Content lovekang89
</div>
$('#win').window({
width:600,
height:400,
modal:true
});
$('#win').window('close'); // close window
关于data-options 更多内容可浏览文章 http://easyui.btboys.com/the-use-of-easyui-data-options.html
2. js与DOM罥加载渲染顺序
旧版本的,js必须放在DOM后面,否则或找不到元素(jquery不会报错)
<script type="text/javascript">
$('#test').window({
width:600,
height:400,
modal:true
});
$('#test').window('open');
</script>
</head>
<body style="height:100%;width:100%;overflow:hidden;border:none;padding:20px" >
<div id="test" class="easyui-window" data-options="closed:true,modal:true,title:'Test Window'" style="width:300px;height:100px;">
fsdafasdfasdfasdfasdfsadfasdfasdfsadfs lovekang89 潇湘易水寒
</div>
无法上正常显示,看不到easyui 窗口,但是把顺序调整一下就可以显示,改成如下:
</head>
<body style="height:100%;width:100%;overflow:hidden;border:none;padding:20px" >
<div id="test" class="easyui-window" data-options="closed:true,modal:true,title:'Test Window'" style="width:300px;height:100px;">
fsdafasdfasdfasdfasdfsadfasdfasdfsadfs lovekang89 潇湘易水寒
</div>
<script type="text/javascript">
$('#test').window({
width:600,
height:400,
modal:true
});
$('#test').window('open');
</script>
新版本没有这样的要求了,更友好,上面两种方式都可以正常运行。