Learning Ajax framework-Dojo: Section 10-form widgets of dojo (with source code)

In the previous section 8, I learned about the dojo layout widget. Today, we learn another type of dojo widget-form widget.

Form widgets are a set of widgets provided by dojo for form processing, including the following widgets:

1.Editor: Visual Rich Text Editor of dojo

2.Checkbox: Check box

3.Civicrmdatetimepicker: Date and Time Selection

4.Colorpalette: Palette

5.ComboBox: Drop-down list

6.Datepicker: Calendar

7.Timepicker: Time Selection

8.Validation: Form Verification

The above lists eight common form widgets. How can we use them? Next, let's start the focus of this section!

 

Part 1: Editor usage

1. Introduce the editor package
Dojo. Require ("Dojo. widget. Editor");

2. Use editor on the page. Use of main attributes

<Div dojotype ="Editor"Items= "Formatblock; |; insertunorderedlist; insertorderedlist; |; bold; italic; underline; strikethrough; |; CreateLink;">
<P> This is my resume. </P>

</Div>

3.

 

Note:Perform corresponding function operations on the selected text information, such as adding a list symbol, font bold, font skew, font underline, and hyperlink.

 

Part 2,CheckboxUsage

1. IntroductionCheckboxPackage
Dojo. Require ("Dojo. widget.Checkbox");

2. Page usageCheckbox, The use of main attributes

<Div>
<Span> skills </span>
</Div>

<Div>
<Input type = "checkbox" name = "CB1" id = "CB1" dojotype ="Checkbox"/> <Label For= "CB1"> it </label> <br/>
<Input type = "checkbox" name = "CB2" id = "CB2" dojotype = "checkbox"/> <label for = "CB2"> marketing </label> <br/>
<Input type = "checkbox" name = "CB3" id = "CB3" dojotype = "checkbox"/> <label for = "CB3"> business </label> <br/>
</Div>

3.

 

Note:Similar to the checkbox in HTML, the usage is the same.

 

 

Part 3,CivicrmdatetimepickerUsage

1. IntroductionCivicrmdatetimepickerPackage
Dojo. Require ("Dojo. widget.Civicrmdatetimepicker");

2. Page usageCivicrmdatetimepicker

<FormOnsubmit = "Return false;">
<DT>
<Label for = "pai_0000447"> date and time
<SPAN class = "marker"> * </span>
</Label>
</DT>
<Dd dojotype ="Civicrmdatepicker"Idprefix= "Scheduled_date_time">
<Select name ="Scheduled_date_time [m]">
<Option value = "">-month-</option>
<Option value = "1"> Jan </option>
<Option value = "2"> Feb </option>
<Option value = "3"> Mar </option>
<Option value = "4"> APR </option>
<Option value = "5"> May </option>
<Option value = "6"> Jun </option>
<Option value = "7"> Jul </option>
<Option value = "8"> Aug </option>
<Option value = "9" selected = "selected"> Sep </option>
<Option value = "10"> Oct </option>
<Option value = "11"> Nov </option>
<Option value = "12"> dec </option>
</SELECT> & nbsp;
<Select name ="Scheduled_date_time [d]">
<Option value = "">-day-</option>
<Option value = "1" selected = "selected"> 01 </option>
<Option value = "2"> 02 </option>
<Option value = "3"> 03 </option>
<Option value = "4"> 04 </option>
<Option value = "5"> 05 </option>
<Option value = "6"> 06 </option>
<Option value = "7"> 07 </option>
<Option value = "8"> 08 </option>
<Option value = "9"> 09 </option>
<Option value = "10"> 10 </option>
<Option value = "11"> 11 </option>
<Option value = "12"> 12 </option>
<Option value = "13"> 13 </option>
<Option value = "14"> 14 </option>
<Option value = "15"> 15 </option>
<Option value = "16"> 16 </option>
<Option value = "17"> 17 </option>
<Option value = "18"> 18 </option>
<Option value = "19"> 19 </option>
<Option value = "20"> 20 </option>
<Option value = "21"> 21 </option>
<Option value = "22"> 22 </option>
<Option value = "23"> 23 </option>
<Option value = "24"> 24 </option>
<Option value = "25"> 25 </option>
<Option value = "26"> 26 </option>
<Option value = "27"> 27 </option>
<Option value = "28"> 28 </option>
<Option value = "29"> 29 </option>
<Option value = "30"> 30 </option>
<Option value = "31"> 31 </option>
</SELECT> & nbsp;
<Select name ="Scheduled_date_time [y]">
<Option value = "">-Year-</option>
<Option value = "2005" selected = "selected"> 2005 </option>
<Option value = "2006"> 2006 </option>
<Option value = "2007"> 2007 </option>
<Option value = "2008"> 2008 </option>
</SELECT>, & nbsp;
<Select name ="Scheduled_date_time [H]">
<Option value = "">-hour-</option>
<Option value = "1"> 01 </option>
<Option value = "2"> 02 </option>
<Option value = "3"> 03 </option>
<Option value = "4"> 04 </option>
<Option value = "5"> 05 </option>
<Option value = "6"> 06 </option>
<Option value = "7"> 07 </option>
<Option value = "8"> 08 </option>
<Option value = "9"> 09 </option>
<Option value = "10"> 10 </option>
<Option value = "11" selected = "selected"> 11 </option>
<Option value = "12"> 12 </option>
</SELECT> & nbsp;: & nbsp;
<Select name ="Scheduled_date_time [I]">
<Option value = "">-Min-</option>
<Option value = "0"> 00 </option>
<Option value = "15"> 15 </option>
<Option value = "30" selected = "selected"> 30 </option>
<Option value = "45"> 45 </option>
</SELECT> & nbsp;
<Select name ="Scheduled_date_time [A]">
<Option value = "">-AM/PM-</option>
<Option value = "am" selected = "selected"> am </option>
<Option value = "PM"> PM </option>
</SELECT>
</DD>
<Input type ="Submit"Value =" foo! "> </Input>
</Form>

3.

Select the date and time after page loading, and click

 

Note:Use a form to submit the selected result. It combines timepicker and datepicker.

 

 

Part 4,ColorpaletteUsage

1. IntroductionColorpalettePackage
Dojo. Require ("Dojo. widget.Colorpalette");

2. Page usageColorpalette, The use of main attributes

<P> default color palette (7x10): </P>
<Div dojotype = "colorpalette"> </div>

3.

Note:Effect of page loading

 

 

Part 5,ComboBoxUsage

1. IntroductionComboBoxPackage
Dojo. Require ("Dojo. widget.ComboBox");

2. Page usageComboBox, The use of main attributes

<Select dojotype ="ComboBox"Value =" This shoshould never be seen-it is replaced! "
 Dataurl= "Http://www.cnblogs.com/tests/widget/comboBoxData.js" style = "width: 300px;" name = "foo. bar1" maxlistlength = "15">
</SELECT>

3.

Note:When a is input in the blank drop-down list box, a drop-down list starting with a is automatically generated.

 

 

Part 6,DatepickerUsage

1. IntroductionDatepickerPackage
Dojo. Require ("dojo. widget.Html. datepicker");
Dojo. Require ("dojo. widget.Dropdowndatepicker");

2. Page usageDatepicker

Scenario 1:Load datepicker directly to the page

<Div dojotype ="Datepicker"Widgetid =" foo "> </div>

Scenario 2:Click "ID", call datepicker, and select a date. The date is output to the text box in format.

<Form action = "" onsubmit = "Return false;">
<H4> dropdown: </H4>
<Div dojotype ="Dropdowndatepicker"> </Div>
</Form>

3.

Scenario 1: After the page is loaded:

Scenario 2: click "ID:

Case 2: select the date after:

 

 

Part 7: timepicker usage

1. IntroductionTimepickerPackage

<SCRIPT type = "text/JavaScript">
VaR djconfig = {isdebug: True,Debugatallcosts: True };
Djconfig = {isdebug: true };
</SCRIPT>
Dojo. Require ("Dojo. widget.Timepicker");

2. Page usageTimepicker, The use of main attributes

<Div dojotype ="Timepicker"> </Div>

3.

 

Part 8: usage of validation

1. Introduce the Validation Package
Dojo. Require ("Dojo. widget. Validate");

2. Page usageValidation, The use of main attributes

Case 1,Input box, required field, uppercase letter

<Input type = "text" name = "Address" dojotype ="Validationtextbox"Trim= "True"Ucfirst= "True"/>

Case 2,Input box, required field, uppercase letter, delete Extra blank characters

<Input type = "text" name = "city" dojotype ="Validationtextbox"Trim= "True"Required= "True"Ucfirst= "True"/>

Case 3,Zip code input box

<Input type = "text" name = "Zip" dojotype ="Usziptextbox"Trim =" true "required =" true"Invalidmessage= "Invalid us zip code."/>

 

Summary:This article describes in detail how to introduce the eight widgets of form widgets and how to use them on pages. It is easy to know how to use every widget and use them skillfully.