Basic use tutorial of form components in the jQuery Mobile framework, jquerymobile

Basic use tutorial of form components in the jQuery Mobile framework, jquerymobile

I. Form component Basics
1. Component Introduction
The form component in jQuery Mobile is based on the standard HTML and then enhances the style. Therefore, jQuery Mobile forms can still be used normally even if the browser does not support jQuery Mobile forms. It should be noted that jQuery Mobile will enhance form elements into easy-to-use forms for touch devices, making it very convenient to use Web forms for iphone/ipad and Android.

JQuery Mobile's form components include the following:
(1) In the text input box, the input Elements marked by type = "text" are automatically added to the jQuery Mobile style without adding the data-role attribute.
(2) In the text input field, the textarea element will be automatically enhanced without adding the data-role attribute. This attribute is used to input text in multiple lines. jQuery Mobile will automatically increase the height of the text field, avoid the difficulty of finding a scroll bar on a mobile device.
(3) In the search input box, the input Elements marked by type = "search" are automatically enhanced without adding the data-role attribute. This is a new HTML element, there is a magnifier icon on the left of the enhanced input box. Click trigger search. After the content is entered, a cross icon will appear on the right of the input box. It is very convenient to Click Clear the entered content.
(4) for single-choice buttons, the input Elements marked by type = "radio" are automatically enhanced without adding the data-role attribute.
(5) Check button. The input Elements marked by type = "checkbox" are automatically enhanced without adding the data-role attribute.
(6) In the selection list, the select element is automatically enhanced without adding the data-role attribute.
(7) The input element marked by type = "range" is automatically enhanced without adding the data-role attribute.
(8) switch. After the select element is added to the data-role = "slider" attribute, the switch component of jQuery Mobile will be enhanced. select can only have two options.

2. component usage specifications
All form components, as long as they need to transmit data with the server, should be enclosed in a form label, and the form action and method attributes should be specified. Of course, if you are using local storage such as Web SQL Database, that is, data does not need to be transmitted with the server, you do not need to use the form tag or sumbit commit. In addition, the form id must be unique throughout the entire site. Because jQuery Mobile uses Ajax navigation, different pages can be loaded to a DOM at the same time, therefore, form IDs must be unique across the entire site to ensure that the form IDs of each DOM are different.

Each form element must have a corresponding label. The label for value must be the same as the element id to make it semantic, in addition, you can use a div or fieldset container package with the data-role = "fieldcontain" attribute. jQuery Mobile will automatically add a thin border at the bottom of the container to separate it.

Ii. Details of form Components
1. text input box
In jQuery Mobile, both text input boxes and text input fields are marked with standard HTML and support some HTML5 input types, such as password, email, tel, number, range and other types, while for some types (range, serach) jQuery Mobile, it will be converted to the text input type, unified standardization of its style, the following is the call code and diagram of the text input box.

<Div data-role = "fieldcontain"> <label for = "text"> text input box </label> <input type = "text" name = "text" id = "text ""value =" "/> </div>

2. text input field

<Div data-role = "fieldcontain"> <label for = "textarea"> text input field </label> <textarea cols = "40" rows = "8" name =" textarea "id =" textarea "> </textarea> </div>

3. Search the input box
As described above, there is a magnifier icon on the left of the enhanced input box. Click trigger search. After the content is entered, a cross icon will appear on the right of the input box, click to clear the entered content.

<Div data-role = "fieldcontain"> <label for = "search"> search input box </label> <input type = "search" name = "search" id = "search "value =" "/> </div>

4. Single region
The single choice component is used to provide a set of options on the page, and only one of the options can be selected. In jQuery Mobile, the single component not only beautifies the appearance, but also adds some icons to enhance visual feedback. Type = "radio" indicates that the input element is automatically added to the single-dataset component. However, jQuery Mobile recommends that developers use a fieldset tag with the data-role = "controlgroup" attribute to include options, add a legend element to fieldset to indicate the title of the ticket.

<Div data-role = "fieldcontain"> <fieldset data-role = "controlgroup"> <legend> single role: </legend> <input type = "radio" name = "radio-choice-1" id = "radio-choice-1" value = "choice-1"/> <label for = "radio-choice-1"> blue </label> <input type = "radio" name = "radio-choice-1" id = "radio-choice-2" value = "choice-2"/> <label for = "radio-choice-2"> green </label> <input type = "radio" name = "radio-choice- 1 "id =" radio-choice-3 "value =" choice-3 "/> <label for =" radio-choice-3 "> black </label> </fieldset> </div>

5. Check box
Check boxes are also used to provide a set of options on the page, but you can select multiple options at the same time. The check box component does not need to call the data-role attribute as it is in a single sequence. The input Elements marked by type = "checkbox" are automatically added to the jQuery Mobile style, of course, jQuery Mobile also recommends that developers use a fieldset label with the data-role = "controlgroup" attribute to include options, and add a legend element in fieldset to indicate the title of the check box.

<Div data-role = "fieldcontain"> <fieldset data-role = "controlgroup"> <legend> check box </legend> <input type = "checkbox" name = "blue" id = "effect1" class = "custom"/> <label for = "effect1"> effect 1 </label> <input type = "checkbox" name = "green" id = ""required t2" class = "custom"/> <label for = "required t2"> Effect 2 </label> <input type = "checkbox" name = "pink" id = "required T2 "class =" custom "/> <label for =" effect2 "> effect 3 </label> </fieldset> </div>

The default check box component is vertical. You can add data-type = "horizontal" on fieldset to change the style to the style of the horizontal button group, jQuery Mobile will float the option element and remove the icon.

6. Select a list
The selection list is based on the HTML select element. It has two forms: Native menu and custom menu. Both native menu and custom menu have a selection button with styles beautifying, the difference is that the option element generated in the custom menu will be hidden. jQuery Mobile will generate a menu consisting of CSS3 and html5. the menu is ARIA.

For more information about ARIA, refer to ARIA, that is, Accessible Rich Internet Application (enhancing accessibility Web applications). It is W3C's accessibility web page initiative (WAI) the team is advocating the accessibility web application technology. It is a set of independent specifications that can help Web programs, especially make Web pages that use a large number of front-end techniques (Ajax) more accessible, devices such as screen reading devices that cannot understand the front-end semantics will be able to understand the content of the page, so that people with disabilities can not only browse the page or even interact with the page.

The HTML select element is automatically enhanced to the native selection list component. to customize the style menu, you can add the data-native-menu = "false" attribute on the select component.

If you want to disable an option, you can add disabled = "disabled" to the option label ".

The following is an example of a custom menu:

<Div data-role = "fieldcontain"> <label for = "select-choice-1" class = "select"> select list </label> <select data-native-menu = "false" name = "select-choice-1" id = "select-choice-1"> <option value = "12 h"> 12 hours </option> <option value = "1d"> one day </option> <option value = "2d"> two days </option> <option value = "week"> one week </option> </ select> </div>

Select button

Custom menu

If multiple options are required, you can add multiple = "multiple" to the select tag, but the native selection menu does not support this function. Note the following when selecting multiple menus:

(1) jQuery Mobile creates a jQuery Mobile header in the menu and adds a close menu button to the left of the header.
(2) When you select two or more options, a small icon is displayed on the right of the select button. The number of selected options is displayed in the icon.
(3) All selected option text will be displayed on the selection button. If the text exceeds the button length, it will replace the excess content with a ellipsis.
(4) If there are too many options, the menu will be displayed in the form of a new page.
 
Multi-choice list instances

<Div data-role = "fieldcontain"> <label for = "select-choice-2" class = "select"> multi-choice list </label> <select data-native- menu = "false" multiple = "multiple" name = "select-choice-2" id = "select-choice-2"> <option value = "12 h"> 12 hours </option> <option value = "1d"> one day </option> <option value = "2d"> two days </option> <option value = "week"> one week </option> </select> </div>

In addition, you can group the options and use the following tag to wrap the options in the same group. The label value is the title of the group.

<optgroup label="Group1"></optgroup> 

Group selection list instance

<Div data-role = "fieldcontain"> <label for = "select-choice-3" class = "select"> group selection list </label> <select data-native- menu = "false" name = "select-choice-3" id = "select-choice-3"> <optgroup label = "Group1"> <option value = "12 h"> 12 hours </option> <option value = "1d"> one day </option> <option value = "2d"> two days </option> <option value = "week "> one week </option> </optgroup> <optgroup label =" Group2 "> <option value =" 1 m "> one month </option> <option value =" 1q "> first quarter </option> <option value =" 1y "> one year </option> </optgroup> </select> </div>

7. Slide Rod
In jQuery Mobile, the input element of type = "range" (HTML5 attribute value) is enhanced to a stroke widget. This widget can be configured with attribute values to set the initial value of the slider, min and max respectively set the lower limit and upper limit of the slide rod. In addition, the slide bar component also supports keyboard response. The right arrow, Up arrow, and Page Up keys of the keyboard can all increase the current value of the slide bar, corresponding, left-click header, and down arrow, the Page Down key can reduce the current value of the slider. You can use the Home key and the End key to set the current value to the minimum and maximum values ).

<Div data-role = "fieldcontain"> <label for = "slider"> slider </label> <input type = "range" name = "slider" id = "slider" value = "0" min = "0" max = "100"/> </div>

8. Switch
When the select element with two options is added with the data-role = "slider" attribute, the switch component is enhanced to jQuery Mobile, which is used to represent boolean data (true or false ), you can drag the slider to select between "on" and "off". The first option is rendered as "on.

<Div data-role = "fieldcontain"> <label for = "slider"> switch </label> <select name = "slider" id = "slider" data-role =" slider "> <option value =" off "> disable </option> <option value =" on "> enable </option> </select> </div>

3. submit a form
JQuery Mobile automatically submits a form in Ajax mode. The default method is get, and action is the relative path of the current page. There is a smooth transition between the form page and the result page, you can also use data-transition on the form to specify the transfer effect. If you do not want to submit a form using Ajax, you can disable Ajax in global events (how to globally disable Ajax is not covered in this article, but will be detailed in subsequent articles in this series) or add the data-ajax = "false" attribute to form. The following lists all values of data-transition.

Slide (default, slide from left to right), slideup (slide from bottom to bottom), slidedown (slide from top to bottom), pop (gradually expand from center ), fade and flip ).

Iv. Theme Style
The topic style has been introduced in the previous article. Here we reference it:

"Data-theme =" "attribute. All jQuery Mobile components support this attribute to set the color of the component. This attribute has five default values: a, B, c, and d, e, respectively, represents five colors from deep to light. In addition, developers can also customize the color by adding the corresponding Class in CSS."

5. Refresh form Components
JQuery Mobile renders and appends native HTML form elements, therefore, it may be difficult for developers to directly control form components through js (for example, if data is stored locally using Web SQL Database, when you open a webpage, you want to obtain data through js and assign values to form components). Therefore, jQuery Mobile designs an API for assigning values to form components using js. The following is an example:

1. radio button
Select the first option

$("input[type='radio']:first").attr("checked",true).checkboxradio("refresh");

2. Check button
Select the first option

$("input[type='checkbox']:first").attr("checked",true).checkboxradio("refresh");

3. Select a list
Select the first option. Note that the index of the option starts from 1.

var myselect = $('select#select-choice-1');myselect[0].selectedIndex = 1;myselect.selectmenu('refresh');

4. Slide Rod
Set the value to 40.

$("input[type=range]").val(40).slider("refresh");

5. Switch
Select the first option

var myswitch = $('select#shakeToClear');myswitch[0].selectedIndex = 1;myswitch.slider('refresh');

 

Note: The refresh method cannot be used directly on the content obtained by Ajax. For example, if the form component to be manipulated by js is on another Page, js is loaded only when the homepage is loaded, in this way, jQuery Mobile will encounter errors (no direct error will be reported, but the js section will be invalid). We can use live ('pagebeforeshow ', function (){}) the method is to load this section of js only when it passes through the page where the form component is located (pagebeforeshow is one of the jQuery Mobile events, in addition, there are three methods pagebeforehide, pageshow, pagehide ). The following is an example:

$ ('# Setting '). live ('pagebeforeshow ', function () {// select the first option var myselect = $ ('select # select-choice-1') in the menu when the page is displayed '); myselect [0]. selectedIndex = 1; myselect. selectmenu ('refresh ');});