Learning Ajax frameworks-Dojo: Section 11th-General widgets of dojo (I) (with source code)

A general widget is a set of common widgets provided by dojo. The functions implemented by each general widget are relatively independent. Let's take a look at the widgets.

1. Tree: tree menu

When explaining the accordioncontainer of the dojo layout widget, you have already introduced and used the tree. If you are interested, refer to the dojo for learning the Ajax framework: section 8 -- Example of accordioncontainer in the fourth part of the layout widget of dojo!

 

2. Button: button

This widget has been used before. Simple usage: <Div dojotype = "button" id = "button"> This is a button </div>

 

3. Menu: drop-down menu

Examples are used to describe how to use the menu and how to use the menu attribute.

Example 1:First, we need to introduce the menu package: dojo. Require ("dojo. widget. menu2 "). This menu item is displayed when you right-click it. As follows:

1) The main menu is:

<Div dojotype ="Popupmenu2"Contextmenuforwindow= "True"Toggle= "Explode">
<Div dojotype ="Menuitem2"Caption= "Select all"Disabled= "True"Onclick= "Alert ('shouldn \'t see this! '); "> </Div>
<Div dojotype ="Menuitem2"Iconsrc= "Http://www.cnblogs.com/src/widget/templates/buttons/cut.gif"Caption= "Cut"Accelkey= "Ctrl + C"

Onclick= "Alert ('not actually cutting anything, just a test! ') "> </Div>
<Div dojotype ="Menuitem2"Iconsrc= "Http://www.cnblogs.com/src/widget/templates/buttons/copy.gif"Caption= "Copy"Accelkey= "Ctrl + X"
Onclick= "Alert ('not actually copying anything, just a test! ') "> </Div>
<Div dojotype ="Menuitem2"Iconsrc= "Http://www.cnblogs.com/src/widget/templates/buttons/paste.gif"Caption= "Paste"Accelkey= "Ctrl + V"
Onclick= "Alert ('not actually pasting anything, just a test! ') "> </Div>
<Div dojotype ="Menuseparator2"> </Div>
<Div dojotype ="Menuitem2"Caption= "Do more stuff"Submenuid="Submenu1"> </Div>
</Div>

2) Sub-menu with caption as do more stuff:

<Div dojotype ="Popupmenu2"Widgetid="Submenu1"Toggle =" explode ">
<Div dojotype ="Menuitem2"Caption= "One"Submenuid= "Submenu2"Disabled= "True"> </div>
<Div dojotype ="Menuitem2"Caption= "Two"Submenuid= "Submenu2"> </div>
</Div>

<Div dojotype ="Popupmenu2"Widgetid= "Submenu2" toggle = "explode">
<Div dojotype ="Menuitem2"Caption= "Three" onclick = "alert ('Three! ') "> </Div>
<Div dojotype ="Menuitem2"Caption= "Four" onclick = "alert ('four! ') "> </Div>
</Div>

 

Example 2:The menu package to be introduced: dojo. Require ("dojo. widget. menu2") and dojo. hostenv. writeincludes (). After the page is loaded, the menu navigation bar is displayed at the top of the page, as shown in:

<Div dojotype ="Menubar2">
<Div dojotype ="Menubaritem2"Caption =" file"Submenuid= "Submenu1"> </div>
<Div dojotype ="Menubaritem2"Caption =" edit"Submenuid= "Submenu2"> </div>
<Div dojotype ="Menubaritem2"Caption =" View"Disabled= "True"> </div>
<Div dojotype ="Menubaritem2"Caption =" help"Submenuid= "Submenu2"> </div>
</Div>

<Div dojotype ="Popupmenu2"Widgetid="Submenu1"Contextmenuforwindow= "True">
<Div dojotype ="Menuitem2"Caption =" enabled item "onclick =" alert ('Hello World'); "> </div>
<Div dojotype ="Menuitem2"Caption =" disabled item"Disabled= "True"> </div>
<Div dojotype ="Menuseparator2"> </Div>
<Div dojotype ="Menuitem2"Caption =" enabled submenu"Submenuid= "Submenu2"> </div>
<Div dojotype ="Menuitem2"Caption =" disabled submenu"Submenuid= "Submenu2"Disabled= "True"> </div>
</Div>

<Div dojotype ="Popupmenu2"Widgetid="Submenu2">
<Div dojotype ="Menuitem2"Caption =" submenu item one "onclick =" alert ('submenu 1! ') "> </Div>
<Div dojotype ="Menuitem2"Caption =" submenu item two "onclick =" alert ('submenu 2! ') "> </Div>
</Div>

When you right-click a menu item on the page, a hidden menu item is displayed. The effect is the same as that of Example 1, but the content of the menu item is different.

 

Example 3:Examples 1 and 2 show you how to write menu items and sub-menu items and right-click the menu items to display them. Then, how can I right-click the menu at the specified position to display it? What attributes are required for setting? Can this attribute be used in any situation? The following examples will help you answer them one by one!

Menu package to be introduced:Dojo. Require ("dojo. widget. menu2") and dojo. hostenv. writeincludes ().

Scenario 1:In theRight click here!"Right-click on the top to display the menu items.

<H3 ID= "Test1" style = "background-color: Gray; display: block; width: 200px; text-align: center;">Right click here!</H3>

Menu item:

<Div dojotype ="Popupmenu2"Targetnodeids="Test1">
<Div dojotype ="Menuitem2"Caption =" menu1 right click here! "> </Div>
<Div dojotype ="Menuitem2"Caption =" MENU1-Item 1 "> </div>
<Div dojotype ="Menuitem2"Caption =" MENU1-Item 2 "> </div>
</Div>

Scenario 2:The title in the DIV is"Testing from within a div"Right-click on the top to display the menu items.

<DivStyle = "display: inline; width; 250px; Background-color: Navy; text-align: center; padding: 1em;">
<H3Style = "background-color: # b2b2b2; display: inline ;"ID= "Testwithindiv">Testing from within a div</H3>
</Div>

The menu items in Case 2 are the same as those in Case 1.

Case 3:Use code to load menu items. The function is the same as Case 1 and Case 2.

Function Init (){
VaR menu = dojo. widget.Createwidget("Popupmenu2",{Targetnodeids: ["Test1", "Test2", "testwithindiv"]});
Menu.Addchild(Dojo. widget.Createwidget("Menuitem2",{Caption: "Menu 1 "}));
Menu. addchild (Dojo. widget. createwidget ("menuitem2", {caption: "MENU1-Item 1 "}));
Menu. addchild (Dojo. widget. createwidget ("menuitem2", {caption: "MENU1-Item 2 "}));
}
Dojo. addonload (init );

<H3 id = "test1" style = "background-color: Gray; display: inline;"> right click here! </H3>

<H3 id = "Test2" style = "background-color: # c1c1c1; display: inline;"> or here! </H3> <br/>

<Div style = "display: tablecell; width; 70%; Background-color: Navy; text-align: center; padding: 1em;">
<H3 style = "background-color: # b2b2b2; display: inline;" id = "testwithindiv"> testing from within a div </Div>

Case 4:InId = "test1"Right-click the DIV to display the menu items.

<Div style = "background-color: yellow; display: block; width: 200px ;"Id = "test1">

Statically positioned Block

<Div dojotype = "popupmenu2"Targetnodeids="Test1">
<Div dojotype = "menuitem2" caption = "MENU1-Item 1"> </div>
<Div dojotype = "menuitem2" caption = "MENU1-Item 2"> </div>
</Div>
</Div>

Case 5:Right-click contentpane in splitcontainer to display the menu items.

 

<Div dojotype ="Splitcontainer"
Orientation = "horizontal"
Sizerwidth = "5"
Activesizing = "1"
Style = "border: 2px solid black; width: 400px; Height: 150px ;"
>
<Div dojotype ="Contentpane"Sizemin =" 20 "sizeshare =" 20"ID="Pane1">
Contentpane 1
</Div>
<Div dojotype ="Contentpane"Sizemin =" 50 "sizeshare =" 50"ID="Pane2">
Contentpane 2

<Div dojotype ="Popupmenu2"Targetnodeids="Pane1; pane2">
<Div dojotype ="Menuitem2"Caption= "MENU2-Item 1"> </div>
<Div dojotype ="Menuitem2"Caption= "MENU2-Item 2"> </div>
</Div>
</Div>
</Div>

Menu summary:To sum up the above situations, the functions are the same, and the key attribute isTargetnodeids.