EasyUI版本：V1.4

JQuery版本：V1.11.1

一、對話方塊

定義對話方塊：

<div id="test_dialog" class="easyui-dialog" closed="true" buttons="#test_dialog_buttons"></div>
<div id="test_dialog_buttons">
  <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="javascript:$('#test_dialog').dialog('close')" style="width: 90px;">Save</a>
  <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#test_dialog').dialog('close')" style="width: 90px;">Cancel</a>
</div>
 

開啟對話方塊：

function openTestDialog() {
   $("#test_dialog").dialog({
      title: "Test Dialog",
      width: 300,
      height: 200,
      modal: true
   });
  $("#test_dialog").dialog("open");
}

顯示效果：

很明顯，使用這種方式開啟對話方塊是不正確的，應該修改為使用另外一種方式開啟。

首先，修改對話方塊定義：增加對話方塊width，height，modal屬性定義。

<div id="test_dialog" class="easyui-dialog" <span style="color:#FF0000;">style="width: 300px;height: 200px;" data-options="modal:true"</span>  closed="true" buttons="#test_dialog_buttons"></div>
 

其次，修改開啟對話方塊的方式：

function openTestDialog() {
    $("#test_dialog").dialog("open").dialog("setTitle", "Test Dialog");
}

修改後的顯示效果：

二、表格

定義表格：

<table id="test_table" class="easyui-datagrid" url="/agency.do?action=list" toolbar="#test_table_toolbar" pagination="true" fitColumns="true">
  <thead>
    <tr>
      <th data-options="field:'no',width:50">Test1</th>
      <th data-options="field:'name',width:50">Test2</th>
      <th data-options="field:'phone',width:50">Test3</th>
      <th data-options="field:'address',width:50">Test4</th>
      <th data-options="field:'sale_number',width:50">Test5</th>
      <th data-options="field:'stock_number',width:50">Test6</th>
      <th data-options="field:'operation',width:50">Test7</th>
    </tr>
  </thead>
</table>
<div id="test_table_toolbar">
  <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="openTestDialog()">測試</a>
</div>
 

顯示效果：

為了使表格列按比例填充滿表格，應該修改表格列定義：分別明確指定field和width屬性。

<table id="test_table" class="easyui-datagrid" url="/agency.do?action=list" toolbar="#test_table_toolbar" pagination="true" fitColumns="true">
  <thead>
    <tr>
      <th <span style="color:#FF0000;">field="no" width="50"</span>>Test1</th>
      <th field="name" width="50">Test2</th>
      <th field="phone" width="50">Test3</th>
      <th field="address" width="50">Test4</th>
      <th field="sale_number" width="50">Test5</th>
      <th field="stock_number" width="50">Test6</th>
      <th field="operation" width="50">Test7</th>
    </tr>
  </thead>
</table>
<div id="test_table_toolbar">
  <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="openTestDialog()">測試</a>
</div>

三、選單

關於選單元件的顯示，必須明確定義寬度和高度，否則在IE下顯示不正常。

ep：

<div id="mm" class="easyui-menu" style="width: 120px;">
  <div style="<span style="color:#FF0000;">width: 120px;height: 25px;</span>">New</div>
  <div style="width: 120px;height: 25px;">
    <span>Open</span>
    <div style="width: 150px;height: 80px;">
      <div>Excel</div>
      <div>PowerPoint</div>
    </div>
  </div>
  <div style="width: 120px;height: 25px;" data-options="iconCls:'icon-save'">Save</div>
  <div class="menu-sep"></div>
  <div style="width: 120px;height: 25px;">Exit</div>
</div>

四、關於IE下相容性問題處理的思考

在使用某個前端UI框架時，必須要考慮到對IE瀏覽器的相容性，否則使用者體驗會大打折扣。

另外，在寫自定義JavaScript程式碼時，也必須要儘量避免使用一些在IE上不能執行的API，且必須注意程式碼格式的規範性，有可能多一個符號在FireFox和Chrome下執行沒有問題，但是在IE下執行時就會報錯。

參考：