Learning Ajax framework-Dojo: Section 12th -- General widgets of dojo (below) (with source code)

Now let's take a look at the usage of other widgets.

 

1. Fisheye: "fish eye" animation effect

Fisheye is a special animation effect. When the mouse moves close to the icon, the Icon size increases and eventually reaches the following:

 

Introduce the fisheyelist package:Dojo. Require ("dojo. widget. fisheyelist ")

Next, let's take a look at the example.Code:

<Div dojotype ="Fisheyelist"
 Itemwidth= "40"Itemheight= "40"
 Itemmaxwidth= "150"Itemmaxheight= "150"
 Orientation= "Horizontal"
 Effectunits= "2"
 Itempadding= "10"
Attachedge = "center"
Labeledge = "bottom"
Conservativetrigger = "true"
>

<Div dojotype ="Fisheyelistitem"
ID= "Item1b"
Onclick = "alert ('click on' + this. Caption + '(from widget ID' + this. widgetid + ')! ');"
Caption= "Item 1"
Iconsrc= "Images/fisheye_1.png">
</Div>

<Div dojotype = "fisheyelistitem" caption = "item 2" iconsrc = "images/fisheye_2.png"> </div>

<Div dojotype = "fisheyelistitem" caption = "item 3" iconsrc = "images/fisheye_3.png"> </div>

<Div dojotype = "fisheyelistitem" iconsrc = "images/fisheye_4.png"> </div>

<Div dojotype = "fisheyelistitem" caption = "really long item label" iconsrc = "images/fisheye_3.png"> </div>

<Div dojotype = "fisheyelistitem" iconsrc = "images/fisheye_2.png"> </div>

<Div dojotype = "fisheyelistitem" iconsrc = "images/fisheye_1.png"> </div>
</Div>

If we need to add fisheyelist automatically, how can we edit it? For example, when you click a button, an icon is added to the icon sequence of the fisheye special school. Then, you only need to add a function.

VaR counter = 1;
 Function Addtofirstlist(){
VaR FL = dojo. widget. bytype ("fisheyelist") [0];
VaR item = dojo. widget. createwidget ("fisheyelistitem ",{
Caption: "dynamically added" + counter,
Iconsrc: "images/fisheye _" + counter + ". PNG"
}
);
Counter ++;
Fl. addchild (item );
}

 

2. inlineeditbox: local editing box

Inlineeditbox is an editable text editing box. Usage: Custom content is displayed when a page is loaded, for example, edit me-I will trigger a custom onsave handler. When you click this sentence, an edit box containing save and cancel will appear. :

Next, let's take a look at the above implementation process.

Method 1:

<H1 id ="Editable"Dojotype ="Inlineeditbox"> Edit me-I will trigger a custom onsave handler

Dojo. Require ("dojo. widget .*");
Dojo. Require ("dojo. widget. inlineeditbox ");
Dojo. Require ("dojo. event .*");

FunctionSavehandler(Newvalue, oldvalue ){
Dojo. debug ("New Value:" + newvalue + "old value:" + oldvalue );
}

FunctionInit(){
VaR editable = dojo. widget. byid ("Editable");
Editable.Onsave =Savehandler;
}

Dojo. addonload (init)

Method 2:

<P dojotype ="Inlineeditbox"Mode="Textarea"> Edit me-I will trigger a custom onsave handler </P>

 

 

3. sortabletable/filtertable: sortable

Filtertable is a new widget added to dojo0.4, which is an upgraded version of sortabletable.

Example:When you click an item in the title bar of a form, such as ID, the data in this column is displayed in ascending or descending order. Other title bar functions are the same.

Import package:Dojo. Require ("dojo. widget .*");

Sample Code:

<Div class =" Tablecontainer ">
<Table dojotype =" Sortabletable " Widgetid = "Testtable" Headclass = "Fixedheader" Tbodyclass = "Scrollcontent" Enablemultipleselect = "True" Enablealternaterows = "True" Rowalternateclass = "Alternaterow" cellpadding = "0" cellspacing = "0" border = "0">
<Thead>
<Tr>
<Th Field = "ID" Datatype = "Number"> id </Th>
<TH field = "name" datatype = "string"> name </Th>
<TH field = "dateadded" datatype = "date" Sort = "ASC"> date added </Th>
<TH field = "datemodified" datatype = "date" format = "% B % d, % Y"> date modified </Th>
<TH datatype = "html"> label </Th>
</Tr>
</Thead>
<Tbody>
Table data is omitted ......
</Tbody>
</Table>
</Div>

Attribute description:

Headclass and tbodyclass are CSS styles; enablemultipleselect: whether multiple options are allowed; enablealternaterows: whether the alternate display mode is used; and rowalternateclass: CSS styles used for alternate display

Obtain the selected row number:

FunctionShowselected (){
VaR W = dojo. widget. byid ("testtable ");
If (w ){
VaR S = W.Getvalue();
If (S. length> 0) Alert (s );
Else alert ("No rows are selected .");
}
}

 

 

4. Clock: Clock

Import package:Dojo. Require ("dojo. widget.Clock")

Scenario 1:Load clock directly
<DivID="Clock1"Dojotype ="Clock"> </Div>

Scenario 2:Loading a clock with a time difference of-8 hours

Function Init (){
// Dynamically create a clock
Dojo. widget.Createwidget(
"Dojo: Clock ",
// The time difference is-8 hours.
{Timezoneoffset:-8,Label: "-8 hr "},
Dojo. byid ("clock2 ")
);
}
Dojo. addonload (init );

<DivID="Clock2"> </Div>

 

 

5. Chart: Chart

Import package:Dojo. Require ("dojo. widget.Chart")

Chart usage:

<Div dojotype = "chart">
<Table Padding = "12 12 20 30" Axisat = "0 xmin" Rangex = "0 100" Rangey = "-100 100">
<Thead>
<Tr>
<TH> x </Th>
<Th Plottype = "Line"> Series A </Th>
</Tr>
</Thead>
<Tbody>
Table data is omitted ......
</Tbody>
</Table>
</Div>

 

 

6. tooltip: tooltip

Import package:Dojo. Require ("dojo. widget.Tooltip")

First, let's take a look at the page loading.

 

What changes will happen when the mouse is close to text? As shown in:

 

Next, we will introduce how to use tooltip. How can we achieve the above results? What are the key attributes?

<SpanID="Test"> Text </span>
<Span dojotype ="Tooltip"Connectid="Test"Caption= "How to Use tooltip? "> </Span>

TooltipSummary:After other small tests (omitted here), we found that you only need to useConnectidBind the ID. Even if you use href to load HTML, the same effect can be achieved.

 

 

7. slideshow: slide playback

Import package:Dojo. Require ("dojo. widget.Slideshow")

How to Use slideshow:

<IMGDojotype ="Slideshow"Imgurls= "Images/1.jpg; images/2.jpg"Transitioninterval= "700"Delay= "7000"SRC= "Images/1.jpg"

Imgwidth = "400" imgheight = "300"/>

Running Effect: imgurlsThe defined image (1.jpg and 2.jpg under imagesvideo) is switched every 7 S, and the duration of the switching process is 700 ms.

 

 

8. GoogleMap: Call the Google map service

Import package:Dojo. Require ("dojo. widget.GoogleMap")

GoogleMapUsage:

<Div dojotype ="GoogleMap"Id =" maptest"Datasrc="Mapdata"> </Div>
Note:Google Map, data from mapdata table

 

 

9. yahoomap: Call the Yahoo map service

Import package:Dojo. Require ("dojo. widget.Yahoomap")

YahoomapUsage:

<Div dojotype ="Yahoomap"Id =" maptest"Datasrc="Mapdata"> </Div>
Note:Yahoo map, data from mapdata table

 

 

Summary of General widgets:

So far, the content of the dojo General widget has been learned! I hope you can use them all in one go!