EasyUI 1.2与1.3 差异总结

runfeel

浏览: 936342 次

最近访客更多访客>>

lxin410

gaozzsoft

hudaafei

seancheer

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1069)

社区版块

存档分类

2013-08 ( 1)
2013-07 ( 211)
2013-06 ( 235)
更多存档...

有两年时间没有用过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>

新版本没有这样的要求了，更友好，上面两种方式都可以正常运行。

分享到：