JQuery Easyui Menu and button to create a simple menu and link button _jquery

The menu is defined in some DIV tags, as follows:

 <div id= "MM" class= "Easyui-menu" style= "width:120px"; >
 <div onclick= "Javascript:alert (' new ')" >New</div>
 <div>
  <span>open</ span>
  <div style= "width:150px;" >
  <div><b>Word</b></div>
  <div>Excel</div>
  <div> powerpoint</div>
  </div>
 </div>
 <div icon= "Icon-save" >Save</div>
 <div class= "menu-sep" ></div>
 <div>Exit</div>
 </div>

When the menu is created and is not displayed, call the ' show ' method to display it or call the ' hide ' method to hide it:

 $ (' #mm '). Menu (' show ', {
  left:200,
  top:100
 });

Create link button

Typically, you use the <button> element to create a button, and the link button is created using the <a> element. So actually a link button is a <a> element that appears as a button style.

To create the link button, all you need to do is add a class attribute named ' Easyui-linkbutton ' to the <a> element:

<div style= "Padding:5px;background: #fafafa; width:500px;border:1px solid #ccc" > <a href= "#" class= " Easyui-linkbutton "iconcls=" Icon-cancel ">Cancel</a> <a href=" # "class=" Easyui-linkbutton "iconcls=" Icon-reload ">Refresh</a> <a href=" # "class=" Easyui-linkbutton "iconcls=" Icon-search ">query</a" > <a href= "#" class= "Easyui-linkbutton" >text button</a> <a href= "#" class= "Easyui-linkbutton" iconcls= "Icon-print" >Print</a> </div> <div style= "Padding:5px;background: #fafafa; width:500px; border:1px solid #ccc "> <a href=" # "class=" Easyui-linkbutton "plain=" true "iconcls=" Icon-cancel ">cancel</ A> <a href= "#" class= "Easyui-linkbutton" plain= "true" iconcls= "Icon-reload" >Refresh</a> <a href= "#" class= "Easyui-linkbutton" plain= "true" iconcls= "Icon-search" >Query</a> <a href= "#" class= " Easyui-linkbutton "plain=" true ">text button</a> <a href=" # "class=" Easyui-linkbutton "Plain= "true" iconcls= "Icon-print" >Print</a> <a href= "#" class= "Easyui-linkbutton" plain= "true" iconcls= "
 Icon-help "></a> <a href=" # "class=" Easyui-linkbutton "plain=" true "iconcls=" Icon-save "></a> <a href= "#" class= "Easyui-linkbutton" plain= "true" iconcls= "Icon-back" ></a> </div>

As you can see, the Iconcls property is an icon CSS class style that displays an icon image on the button.

Sometimes you need to disable the link button or enable it, and the following code shows how to disable a link button (link button):

$ (selector). LinkButton (' disable '); Call the ' disable ' method