Easily learn how to create a menu and button for the jQuery plug-in EasyUIEasyUI _ jquery

This article helps you easily learn the jQuery plug-in EasyUI. The focus is on creating menus and buttons in EasyUI. Buttons are divided into link buttons, menu buttons, and split buttons, for more information, see 1. EasyUI create a simple menu

Menus are defined in some DIV tags as follows:

 
New
 
 Open 
 
Word
 
Excel
 
PowerPoint
 
 
 
Save
 
 
Exit

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

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

Ii. EasyUI creation button
1. EasyUI Link Button)
GenerallyElement to create a Button, while the Link Button is created using an element. In fact, a 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 named 'easyui-linkbutton 'to the element:

 Cancel Refresh Query text button Print
 
 Cancel Refresh Query text button Print   

As you can see, the iconCls attribute is the CSS class style of an icon, which displays an icon image on the button.
Sometimes you need to disable or enable the Link Button. The following Code demonstrates how to disable a Link Button ):
$ (Selector). linkbutton ('disable'); // call the 'disable' method
2. EasyUI Menu Button)
Menu Button)Contains a button and a menu component. When you click or move the mouse over the button, a corresponding menu is displayed.

To define a Menu Button, you should define a Link Button and a menu. The following is an example:

 Edit Help
 
Undo
 
Redo
 
 
Cut
 
Copy
 
Paste
 
 
Delete
 
Select All
 
Help
 
Update
 
About

A Menu Button has been defined and you do not need to write any javascript code.
3. EasyUI create Split Button)

Split Button)Contains a Link Button and a Menu ). When you click or hover the cursor over the down arrow area, a corresponding menu is displayed. This example shows how to create and use the Split Button ).

Create a Split Button and a Link Button ):

 Edit 
 
Undo
 
Redo
 
 
Cut
 
Copy
 
Paste
 
 
 Open 
 
Firefox
 
Internet Explorer
 
 
Select Program...
 
 
 
Delete
 
Select All

Now you have defined a Split Button. You do not need to write any javascript code.

The above is all the content of this article, hoping to help you learn.