有兩年時間沒有用過EasyUI了,也好長時間沒有寫過代碼了,今天對著EasyUI API邊學邊用,發現了幾個死活也調不對的問題,經測試發現原來是版本差異問題。 1. data-options 屬性data-options是jQuery Easyui 最近兩個版本才加上的一個特殊屬性(具體是哪個版本開始未考究,反證1.3就有了)。通過這個屬性,我們可以對easyui組件的執行個體化可以完全寫入到html中.[html] <span style="font-size:18px;"><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> </span> 如上,輕鬆就可以定義一個window,而需要像以前版本中寫好幾行js,如下[javascript] <span style="font-size:18px;"> <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 </span> 關於data-options 更多內容可瀏覽文章 http://easyui.btboys.com/the-use-of-easyui-data-options.html 2. js與DOM罥載入渲染順序舊版本的,js必須放在DOM後面,否則或找不到元素(jquery不會報錯)[html] <span style="font-size:18px;"> <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> </span> 無法上正常顯示,看不到easyui 視窗,但是把順序調整一下就可以顯示,改成如下:[javascript] <span style="font-size:18px;"></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></span> 新版本沒有這樣的要求了,更友好,上面兩種方式都可以正常運行。