Easyui Learning Menu and button (menus and buttons)

Objectivethis afternoon, the weather felt particularly stuffy, the whole person has a sticky feeling, especially uncomfortable. In addition to the immediate holidayand feel like I can't sit at all (pre-session syndrome). Just study and continue.

originally planned this article should be about SearchBox's introduction, but in view of easyloader inside the dependency, SearchBox relies on Menubutton, Menubutton is also dependent on menu and LinkButton. So, you're going to learn about the menus and buttons in the Easyui component first.

LinkButton (link button)

For the link button because the previous has done the relevant introduction, here will not repeat. Refer to "Pagination of Easyui Basics".

Menu (Menus)

Use $.fn.menu.defaults to overload the default values.

Menus are typically used for context menus. This is the basic component for building other menu components such as Menubutton, Splibutton. It can also be used to navigate and run commands.

menu item

The menu item represents a separate item that is displayed in a menu. Includes for example the following properties:

Name	Type	Descriptive narrative information	Default value
Id	String	menu item "ID"
Text	String	menu item Name
Iconcls	String	A CSS class that displays a 16*16 icon to the right of a menu item
Href	String	Set a link to click on a menu item
Disable	Boolean	Defines whether menu items are prohibited	False
Onclik	function	Click the menu item function

Menu Properties

To the latest version number, the menu has some properties such as the following:

Name	Type	Descriptive narrative information	Default value
ZIndex	Number	The Z-index style of the menu, starting from the first menu (the default value is so large that it basically guarantees that all menu items are on top)	11000000
Left	Number	Left margin of menu	0
Top	Number	Top margin of the menu	0
MinWidth	Number	Minimum width of the menu	120
Hideonunhover	Boolean	When set to true, the mouse exits with its own active hidden menu	True

Event

name	properties	Descriptive narrative information                   &NBS P
onshow	none	triggers when a menu is displayed.
onhide	none	triggers when a menu is hidden.
onClick	item	Triggers when a menu is clicked. The following example shows how to handle the Click event for all menu items : <div class= "Easyui-menu" data-options= "Onclick:menuhandler" style= "width:120px;" ><div data-options= "Name: ' New '" >new</div><div data-options= "name: ' Save ', Iconcls: ' Icon-save '" >save</div><div data-options= "Name: ' print ', iconcls: ' Icon-print '" >print</div><div class= " Menu-sep "></div><div data-options=" name: ' Exit ' ">exit</div></div><script type=" text /javascript ">function Menuhandler (item) {alert (item.name)}</script>

Method

There are ways to manipulate menus, such as opening the "File" menu, when this action is triggered, and knowing that it will be more should also launch in the process (the post-check API is also possible).

Name	Number of references	Descriptive narrative information
Options	None	To return to the menu's options Parameter object
Show	Pos	Show menus in a specific location
Hide	None	Hide a menu
Destroy	None	Destroy a menu
GetItem	Itemel	The Obtains the menu item data and returns it, including the following properties: Target:dom object, menu item. ID: A string that is assigned to the ID of the element. The text of the Text: String, menu item. HREF: string, the address of the hyperlink. Disabled:boolean whether the menu item is enabled. Onclick:function The function that will run when the menu is clicked. Iconcls: String, Icon CSS class. The following is a simple example: <div id= "mm" class= "Easyui-menu" style= "width:120px;" <div id= "M-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 data-options= "iconcls: ' Icon-save '" >Save </div> <div class= "Menu-sep" ></DIV> <div>exit</div> </div> var Itemel = $ (' #m-new ') [0]; The menu item element var item = $ (' #mm '). Menu (' GetItem ', Itemel); Console.log (item); Console.info (item); After we open the Chrome browser, press F12 to see the following effects, for example:
SetText	Param	To set the text for a specific menu, the ' param ' parameter includes 2 attributes: Target:dom object, the menu item that will be set Text: String, new text value A simple sample Demo: $ (function () { var item = $ (' #mm '). Menu (' FindItem ', ' Save '); $ (' #mm '). Menu (' SetText ', { Target:item.target, Text: ' Saving ' }); }); The original menu item string property value is "Save", after running the above code becomes "saving" here no longer the map, you can try it.
SetIcon	Param	To set the icon for a specific menu item, the ' param ' parameter includes two attributes : Target:dom object, menu item. iconcls: New icon CSS class. A simple example: $ (' #mm '). Menu (' SetIcon ', {target: $ (' #m-open ') [0],iconcls: ' icon-closed '}];
FindItem	Text	Finds a specific menu item based on the given text and returns the same data as GetItem . A simple example: Find ' Open ' item and disable Itvar item = $ (' #mm '). Menu (' FindItem ', ' Open '), $ (' #mm '). Menu (' Disableitem ', item.target);
Appenditem	Options	Add a new menu item that represents the new entry property. By default, joined items become a top-level menu item, with additional submenus. For additional submenu items, the Parent property should be set to the specified parent entry element, which already has a word entry . the ' param ' parameters include, for example, the following properties: Parent: The DOM object to be added to the new menu, assuming it is not set, the new item will be added as a top-level menu. Text : A string that is a menu item literal. href: string, hyperlink address. onclick: A string or function that will be run when the user taps a menu item. iconcls: Icon class. a simple sample demo: Append a top menu item $ (' #mm '). Menu (' Appenditem ', { Text: ' New Item ', Iconcls: ' Icon-ok ', Onclick:function () { Alert (' New Item ') } }); Append a Sub menu item var item = $ (' #mm '). Menu (' FindItem ', ' Open '); Find ' Open ' item $ (' #mm '). Menu (' Appenditem ', { Parent:item.target,//the parent Item element Text: ' Open Excel ', Iconcls: ' Icon-excel ', Onclick:function () { Alert (' Open Excel ') } });
RemoveItem	ItEmel	Removes the specified menu item.
Enableitem	Itemel	Enables the specified menu item.
Disableitem	Itemel	Disables the menu item.

Tips: The above code demonstrates the example used Console.info (console.log), console is the control desk print log information, mainly for debugging. This is also built using console mode to debug (ff,chrome). Beginners generally use alert for debugging, so not only will the program be interrupted (assuming that alert is in loop, you are exhausted), and the information printed is too simple to debug.

The console can be perfectly corrected.

Using the Menu

1. Create a menu

Creating a menu using HTML tags must refer to the ' Easyui-menu ' class for the <div> tag, and each menu item will be created using the <div> tag. Adding the ' Iconcls ' property to the menu allows you to specify an icon that appears on the left side of the menu item. Referencing the ' Menu-sep ' class on a menu will generate a menu divider.

<div id= "MM" class= "Easyui-menu" style= "width:120px;" >      <div>New</div>      <div>          <span>Open</span>          <div style= "width : 150px; " >              <div><b>Word</b></div>              <div>Excel</div>              <div> powerpoint</div>          </div>      </div>      <div data-options= "iconcls: ' Icon-save '" >save </div>      <div class= "menu-sep" ></div>      <div>Exit</div>  </div>  

Use scripts to create menus and listen for ' OnClick ' events.

$ (' #mm '). Menu ({onclick:function (item) {if (item.text== "save") {   alert ("You clicked Save Button");}}  );

2. Display Menu

When a menu is created, it is hidden by default and is not visible by calling the Show method to display the menu

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

For the menu learning is basically the case, more specific content and demo can go to Easyui official website to learn.

Menubutton (menu button)

With the foundation of LinkButton and menu, we can enter into Menubutton's study. The menu button can be said to be part of a drop-down menu, consisting of a Link button box menu. The link menu is hidden in the menu by default. When the user clicks or moves the mouse to the link button, the menu appears and agrees to click on it.

Inherit $.fn.linkbutton.defaults, using $.fn.menubutton to overload the default values.

Depends on the menu and LinkButton

Property

Inherits the properties of the LinkButton and also has the unique properties of the menu button.

Name	Type	Descriptive narrative information	Default value
Plain	Boolean	When set to true, a concise effect is displayed (the link menu has no borders)	True
Menu	String	The selector used to create a corresponding menu	Null
Menualign	String	menu alignment, starting with 1.3.6, the optional value is left, right	Left
Duration	Number	Defines the time required to display a menu when the mouse is over a button, in milliseconds (after a few seconds, click on the button to display immediately)	100

Method

These methods are inherited to LinkButton, and the following are added and rewritten for SplitButton.

Name	Property	Descriptive narrative information
Options	None	Return property to the line.
Disable	None	Disable menu button
Enable	None	Enable menu button
Destroy	None	Logout menu button

How to use

1. Create a button using HTML normally:

<div id= "MM" style= "width:150px;" >      <div data-options= "iconcls: ' Icon-undo '" >Undo</div>      <div data-options= "ICONCLS: ' Icon-redo ' ">Redo</div>      <div class=" menu-sep "></div>      <div>Cut</div>      <div>Copy</div>      <div>Paste</div>      <div class= "Menu-sep" ></div>      <div data-options= "iconcls: ' Icon-remove '" >Delete</div>      <div>select all</div>  </div>  

2. Create using javascript:

<a href= "javascript:void (0)" id= "MB" >Edit</a> <div id= "mm" style= "width:150px;" ><div data-options= "iconcls: ' Icon-undo '" >undo</div><div data-options= "iconCls: ' Icon-redo '" > Redo</div><div class= "Menu-sep" ></div><div>Cut</div><div>Copy</div> <div>paste</div><div class= "Menu-sep" ></div><div data-options= "iconCls: ' Icon-remove '" >delete</div><div>select all</div></div><script>$ (function () {$ (' #mb '). Menubutton ({iconcls: ' Icon-edit ', menu: ' #mm '});}); </script>

About some demo, this is no longer a demonstration, the official website sample is also more simple to understand.

Slitbutton (separate button)

To move to a separate or click-to-Pull menu button, separate the button with the link button and the menu leader. The menu button is divided into two parts. When the mouse moves to the delimiter, a split appears. When the menu is displayed, the mouse cursor is located in the Link button booklet section.

Inherit $.fn.linkbutton.defaults, using $.fn.splitbutton.defaults to overload the default values.

Depends on the menu and link button.

Property

Property inheritance link button, also has its own properties, the unique properties and menus are the same, I will not show here, can refer to the menu button's property sheet.

Method

Name	Property	Descriptive narrative information
Options	None	Return Property Object
Disable	None	Disables the delimited button. Demo Sample: $ (' #sb '). SplitButton (' disable ');
Enable	None	Enable delimited button
Destroy	None	Logoff delimited button

Use and Demo

1. Create a separate button with the label:

2. Use script to create:
<a href= "javascript:void (0)" id= "SB" onclick= "Javascript:alert (' OK ')" >Ok</a> <div id= "MM" style= " width:100px; " ><div data-options= "iconcls: ' Icon-ok '" >ok</div><div data-options= "iconCls: ' Icon-cancel '" > cancel</div></div><script>$ (function () {$ (' #sb '). SplitButton ({iconcls: ' Icon-ok ', menu: ' #mm '}); </script>

In fact, the effect of Splitebutton is very similar to the effect of a menu button, only the details of which Splitebutton only have a click or mouse move to the separator talent drop-down menu. For its demo, the same official demo is very easy to understand, I am not here to demonstrate. over!



Easyui Learning Menu and button (menus and buttons)