How to create menu link button with jQuery EasyUI plug-in-JS Tutorial-php.cn

How to create menu link button with jQuery EasyUI plug-in

php中世界最好的语言

Release： 2018-04-26 11:05:15

Original

1686 people have browsed it

This time I will show you how to create a menu link button with the jQuery EasyUI plug-in. What are the precautions for the jQuery EasyUI plug-in to create a menu link button? Here is a practical case, let’s take a look.

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

 <p id="mm" class="easyui-menu" style="width:120px;">
 <p onclick="javascript:alert(&#39;new&#39;)">New</p>
 <p>
  <span>Open</span>
  <p style="width:150px;">
  <p><b>Word</b></p>
  <p>Excel</p>
  <p>PowerPoint</p>
  </p>
 </p>
 <p icon="icon-save">Save</p>
 <p class="menu-sep"></p>
 <p>Exit</p>
 </p>

Copy after login

When the menu is created, it 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
 });

Copy after login

Create a link button (Link Button)

Normally, use < ;button> elements are used to create buttons, while link buttons (Link Buttons) are created using the element. So actually a link button (Link Button) is an 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 element:

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

Copy after login

As you can see, the iconCls attribute is a CSS class style of icon, which displays an icon image on the button.

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

$(selector).linkbutton('disable'); // call the 'disable' method

Copy after login

I believe you have read the case in this article After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!