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

Source: Internet
Author: User

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


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.