Basic use of form components in the JQuery mobile framework _jquery

I. Basis of form components
1. Component Introduction
the form components in the jquery Mobile are based on standard HTML, and then the style is enhanced, so even the browser does not support jquery mobile forms for normal use. It's important to note that JQuery Mobile enhances form elements into a form that touch devices can easily use, so it's easy to use Web forms for Iphone/ipad and Android.

The following are some of the form components of JQuery Mobile:
(1) Text input box, type= "text" tag input element will be automatically enhanced to jQuery Mobile style, no additional data-role attributes added.
(2) Text input fields, textarea elements will be automatically enhanced without additional data-role attributes for multiple lines of input text, JQuery Mobile will automatically increase the height of the text field, to avoid in mobile devices difficult to find the scroll bar.
(3) Search input box, type= "search" marked input elements will be automatically enhanced, without additional data-role properties, this is a new HTML element, the enhanced input box left a magnifying glass icon, click the trigger search, after the input content, The right side of the input box will also appear a fork icon, click to clear what has been entered, very convenient.
(4) radio button, type= "Radio" marked INPUT element will be automatically enhanced without additional data-role properties.
(5) Check button, the INPUT element type= "checkbox" is automatically enhanced without additional data-role attributes.
(6) Select a list, and the Select element is automatically enhanced without additional data-role attributes.
(7) Stroke, type= "range" marked INPUT element will be automatically enhanced without additional data-role properties added.
(8) switch, select element Tim data-role= "slider" attribute will be enhanced will be jQuery Mobile switch component, select can only have two option.

2. Component Usage Specification
all form components, as long as you need to transfer data with the server, should be wrapped in a form label, and you should specify the action and method attributes of the good form. Of course, if you are using a Web SQL Database such as local storage, that data does not need to be transmitted with the server, can not be submitted with the form tag and sumbit. The ID of the form needs to be unique throughout the station, because JQuery Mobile uses Ajax navigation so that different page loads can be loaded into a DOM at the same time, so the form ID must be unique throughout the site to ensure that the form IDs for each DOM are different.

Each form element should have a corresponding label corresponding to the label's for value, which is semantically related to the element's ID, and can be wrapped with a div or fieldset container with the data-role= "Fieldcontain" attribute, Jqu Ery Mobile automatically adds a thin border to the bottom of the container as a separator.

Two. Detailed form components
1. Text input Box
in JQuery Mobile, text input boxes and text entry fields are all used standard HTML tags, and support some HTML5 input types, such as password, email, tel, number, range, and more types, and for Some types (range, Serach) JQuery Mobile will convert it to the text input type, standardize its style uniformly, and the following is the call code and diagram of the text entry box.

<div data-role= "Fieldcontain" >
  <label for= "text" > Text input box </label>
  <input type= "text" Name= "Text" id= "text" value= "/>
</div>

2. Text input fields

<div data-role= "Fieldcontain" >
  <label for= "textarea" > Text entry fields </label>
  <textarea cols= " "Rows=" 8 "name=" textarea "id=" textarea "></textarea>
</div>

3. Search the input box
As mentioned above, the enhanced input box has a magnifying glass icon on the left, click Trigger Search, after the input content, the right side of the input box will also appear a fork icon, click to clear the content entered.

<div data-role= "Fieldcontain" >
  <label for= "search" > Search input Box </label>
  <input type= "Search "Name=" search "id=" search "value=" "/>
</div>

4. Single selection box
The Radio box component is used to provide a set of options on a page, and only one of these options can be selected. In JQuery Mobile, the single marquee component is not only visually beautified, but it also adds icons to enhance visual feedback. The input element of the type= "Radio" tag is automatically enhanced to the checkbox component, but JQuery Mobile recommends that the developer use a fieldset tag with a data-role= "Controlgroup" attribute, including the option, and the fieldset Adds a LEGEND element that represents the caption of the Radio box.

<div data-role= "Fieldcontain" >
  <fieldset data-role= "Controlgroup" >
    <legend> Radio Box: </ 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 a page, but you can select multiple options at the same time. As with a radio box, the checkbox component does not require an extra call to the Data-role property, and the INPUT element type= "checkbox" is automatically enhanced to the jquery mobile style, and of course jquery Mobile also suggests that the developer use a band Data-ro The fieldset label for the le= "Controlgroup" property includes an option, and a LEGEND element is added to the fieldset to represent the caption 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=" 
    > Effect 1</label>
    <input type= "checkbox" Name= "green" id= "Effect2" class= "Custom"/>
    for = "Effect2" > Effect 2</label>
    <input type= "checkbox" Name= "Pink" id= "Effect2" class= "Custom"
    /> <label for= "Effect2" > Effect 3</label>
  </fieldset>
</div>

The default checkbox component is the vertical arrangement option, and we can add data-type= "horizontal" to the style of the horizontal button group on the fieldset, and JQuery Mobile makes the option element float and remove the icon.

6. SELECT list
The select list is based on an HTML select element, with a native menu and a custom menu in both forms, with both the native menu and the custom menu having a style-beautified selection button, and the difference is that the option element in the custom menu will be hidden, jQuery Mobile A menu consisting of CSS3 and HTML5 is generated, and the menu is ARIA.

About ARIA, here is a little popular science: ARIA, the Accessible Rich Internet application (Enhanced barrier-free web application), is the Web Accessibility Initiative (WAI) Task Force of the website for the Internet to promote the use of accessible Web applications. It is a set of independent specifications, can help web programs, especially those that use a lot of front-end techniques (Ajax) to be more accessible, popular point of view, reading devices, such as not understand the front-end semantics of the device will be able to understand the content of the page, so that people with disabilities can not only browse the page and even interact with the page.

The HTML select element is automatically enhanced to the native selection list component, and you can add the data-native-menu= "false" attribute on the Select if you need a custom style menu.

If you need to disable selecting an option, you can add disabled= "disabled" to the Option tab on the Options tab.

An example of a custom menu is given below:

<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= "12h ">12 hour </option>
    <option value=" 1d "> Day </option>
    <option value=" 2d "> Two days </ option>
    <option value= "Week" > Week </option>
  </select>
</div>

Select button

customizing menus

If you need multiple selections, you can add multiple= "multiple" to the Select tab, but the native selection menu does not support this feature. For multiple selection menus, there are a few things to note:

(1) jquery Mobile will create a jquery mobile header in the menu and add a Close menu button to the left of the header.
(2) When the user selects two or more options, a small icon appears to the right of the selection button, and the number of selected options appears in the icon.
(3) All selected options text will be displayed on the selection button, and if the text exceeds the button length, an ellipsis is substituted for the superfluous content.
(4) If there are too many options, the menu will appear as a new page.

Multiple select list Instances

<div data-role= "Fieldcontain" >
  <label for= "select-choice-2" class= "select" > Multiple selection list </label>
  <select data-native-menu= "false" multiple= "multiple" name= "select-choice-2" id= "select-choice-2" >
    <option value= "12h" >12 hr </option>
    <option value= "1d" > Day </option>
    <option value = "2d" > Two days </option>
    <option value= "Week" > One week </option>
  </select>
</div >

In addition, we can group options by using the following label labels to wrap the same set of options, where the label value is the title of the group.

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

Grouping select list Instances

<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=" 12h ">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= "1m" > one month </option>
      < Option value= "1q" > First quarter </option>
      <option value= "1y" > One year </option>
    </optgroup>
  </select>
</div>

7. Slider Bar
in JQuery Mobile, the INPUT element of the type= "range" (HTML5 attribute value) is enhanced to the stroke component, which can be configured with some property values, value sets the initial value of the slider, and Min and Max set the lower and upper of the slider respectively. Limit. In addition, the slider assembly also supports keyboard response, keyboard right ARROW, UP ARROW, Page up key can increase the current value of the slider, the corresponding, left key, down ARROW, Page down key can reduce the current value of the slider, using the home key and end Key to set the current value to the minimum (lower bound) and maximum (upper bound).

<div data-role= "Fieldcontain" >
  <label for= "slider" > Slider </label>
  <input type= "range" Name= "Slider" id= "slider" value= "0" min= "0" max= "/>"
</div>

8. Switch
the Select element with two option adds the data-role= "slider" attribute, which is enhanced as a jQuery Mobile switch component that represents the Boolean data (Ture or false), and the drag slider can be used to "open" and "off" Selection, where the first option is rendered as a "on" style.

<div data-role= "Fieldcontain" >
  <label for= "slider" > Switch </label>
  <select name= "Slider" Id= "Slider" data-role= "Slider" >
    <option value= "Off" > Close </option>
    <option value= "on" > Opening </option>
  </select> 
</div>

Three. Submitting the form
JQuery Mobile automatically submits the form in an Ajax way, the default method is get, the action is the relative path of the current page, there is a smooth transition between the form page and the resulting page, and you can use the DATA-TRANSITION Specifies the transition effect. If you do not want to submit the form in an AJAX way, you can disable AJAX for global events (how to globally prevent Ajax from being covered in this article, but will be detailed in subsequent articles in this series) or add the data-ajax= "false" attribute on the form, below is the DATA-TR All the desirable values of the ansition.

Slide Slide (default, slide from left to right), slideup (slide Out), Slidedown (from top to bottom), pop (expand from center Fade), Fade (Fade), Flip (flip).

four. Theme Styles
about theme styles, which have been introduced in the previous article, are quoted here:

The Data-theme= property, which is supported by all JQuery Mobile components, is used to set the color of the component, which defaults to five values A, B, C, D, E, which are represented by a deep light of five colors, and the developer can add the corresponding Class to the CSS From the definition color. ”

Five. Refresh Form Components
because JQuery Mobile renders and appends elements to native HTML form elements, it can be cumbersome for developers to directly control form components via JS (such as using a Web SQL database to store data locally, and to get data through JS when you open a Web page) and assign values to the form components, so jQuery Mobile designed the API to assign values to the form components in JS, and here's 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 list
Select the first option, and note that the index of the option starts at 1

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

4. Slider Bar
set a value of 40

$ ("Input[type=range]"). val. Slider ("Refresh");

5. Switch
Select the first option

var myswitch = $ (' select#shaketoclear ');
Myswitch[0].selectedindex = 1;
Myswitch.slider (' refresh ');

Note: The Refresh method can not be directly used in Ajax-acquired content, such as JS to manipulate the form component in another page, JS only loaded on the first page load, so jQuery Mobile will be wrong (there will be no direct error, but the section JS will fail), we can use Li The VE (' Pagebeforeshow ', function () {}) method allows the segment JS to be loaded when it comes to the page where the form component resides (Pagebeforeshow is one of the JQuery Mobile events, in addition to Pagebeforehide, p Ageshow, pagehide three ways). An example is given below:

$ (' #setting '). Live (' Pagebeforeshow ', function () {
    //Select the first option in the menu when the page is displayed
    var myselect = $ (' select# Select-choice-1 ');
    Myselect[0].selectedindex = 1;
    Myselect.selectmenu (' refresh ');
};