About Easyui dialog box, table and menu components under IE Compatibility processing method __easyui

Easyui version: V1.4

jquery version: V1.11.1

A, dialog box

To define a dialog box:

<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>

To open a dialog box:

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

Display effect:

Obviously, opening a dialog box in this way is incorrect and should be modified to open in a different way.

First, modify the dialog box definition: Increase the dialog box Width,height,modal property definition.

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

Second, modify the way you open the dialog box:

function Opentestdialog () {
    $ ("#test_dialog"). Dialog ("Open"). Dialog ("Settitle", "Test Dialog");
}

Modified Display effect:

Second, the table

Definition table:

<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:v OID (0) "class=" Easyui-linkbutton "iconcls=" Icon-remove "plain=" true "onclick="Opentestdialog () > Test </a> </div> 

Display effect:

In order for the table columns to fill the table proportionally, you should modify the table column definition: Specify the field and width attributes, respectively.

<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= "M" </span>>Test1</th>
      <th field= "name" width= ">Test2</th>"
      <th field= "Phone" width= ">Test3</th>
      <th field=" Address "width=" >Test4</th>
      <th field= "Sale_number" width= ">Test5</th> <th field=" Stock_number "-" width= ">test6"
      </th>
      <th field= "operation" width= ">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 () "> Test </a>
</div >

To modify the display after a table column definition:

Third, Menu

For the display of menu components, you must clearly define the width and height, otherwise the display is not normal under 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>

Four, about IE under the compatibility problem processing ponder

When using a front-end UI framework, you must take into account the compatibility of IE browser, otherwise the user experience will be greatly compromised.

In addition, when writing custom JavaScript code, you must also try to avoid some of the API can not be executed on IE, and must pay attention to the standard code format, there may be more than one symbol in Firefox and Chrome to execute without problems, but in IE under the implementation of the error.

Reference:

1. Solve the problem of easyui in IE rendering slow: http://www.cnblogs.com/kkwoo/p/3994694.html

2. Easyui tab component extends the processing of mouse double-click events: http://www.easyui.info/archives/869.html