Home  >  Article  >  Web Front-end  >  jQuery EasyUI menus and buttons to create simple menus and link buttons_jquery

jQuery EasyUI menus and buttons to create simple menus and link buttons_jquery

WBOY
WBOYOriginal
2016-05-16 15:31:341428browse

Menu is defined in some DIV tags, as shown below:

 <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, it will not be displayed. Call the 'show' method to display it or the 'hide' method to hide it:

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

Create Link Button

Normally, buttons are created using the bb9345e55eb71822850ff156dfde57c8 element, while link buttons (Link Buttons) are created using the 3499910bf9dac5ae3c52d5ede7383485 element. So actually a link button (Link Button) is an 3499910bf9dac5ae3c52d5ede7383485 element displayed as a button style.

To create a Link Button, all you need to do is add a class attribute called 'easyui-linkbutton' to the 3499910bf9dac5ae3c52d5ede7383485 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 a CSS class style for icon that displays an icon image on the button.

Sometimes you need to disable a Link Button or enable it. The following code demonstrates how to disable a Link Button:

$(selector).linkbutton('disable'); // call the 'disable' method
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn