JQuery Mobile Development

1. including JavaScript files in the

2. Note: The only limitation to creating a custom data-property is that the custom portion of the property is at least one character long and cannot include uppercase letters.

The 3.jQuery mobile framework can only display one page at a time, using the Data-title property to dynamically change the page title.

<! DOCTYPE html>
 4. Creating a Basic dialog window with jquery Mobile is easy. Simply use the Data-rel property on any link anchor tag and set its value to dialog. 
<! DOCTYPE html>
5. Many input element types are automatically enhanced by jquery mobile as buttons. This includes input elements whose type attributes are set to Button,submit,reset or image, and their default appearance is the same. The only way to change this default enhancement is to set Data-role to none.
<! DOCTYPE html>
   
 
<! DOCTYPE html>
The 6.jQuery mobile framework cleverly divides the navbar space evenly according to the number of buttons. The only thing to be aware of is that if they contain more than 5 hyperlinks, they will start winding to more than one line. This is somewhat of a limitation, but it is also desirable because the mobile device does not have enough horizontal space to hold so many buttons.
<! DOCTYPE html>
7. Grid row-Each element with the Ui-block-a class automatically clears the row, creating a new row. Looking at the actual CSS used for the Ui-block-a class contained in the jquery mobile framework, you will find that it clears the left float.
<! DOCTYPE html>

8. Add collapsible data-role to the container, and the caption element is automatically converted to a button that you can use to expand and close the paragraph.
<! DOCTYPE html>

9. To define a collapsible panel, you must create a container element that contains a set of collapsible content areas. On this container element, the Data-role must be set to the Collapsible-set value.
<! DOCTYPE html>

JQuery Mobile added a value to the ListView's Data-role property in the opening tag of the unordered list element to enhance these list elements.
<! DOCTYPE html>

The 
 11.jQuery Mobile framework makes it easy to add a search filter bar to the list: simply add a Data-filter property to the list and set the value to true. You can modify the default text with the attached property Data-filter-placeholder, which is used for the starting element of an ordered list or unordered list. 
<! DOCTYPE html>

12. Add Highlight data-highlight= "true" for scroll bar
<label for= "My-slider" >my slider</label><input type= "range" name= "slider" id= "My-slider" value= "50" min= "0" max= "step=" data-highlight= "true" >

13. Toggle Switch data-role= "Slider"
<label for= "Flip-switch" >do you like Pizza?</label><select name= "Flip-switch" id= "Flip-switch" data-role= "Slider" data-highlight= "true" ><option value= "yes" >yes</option><option value= "no" > No</option></select>

14.jQuery Mobile has a theme system that contains 5 samples defined by the letter "a" to "E". Samples can be blended and matched on a single page, allowing full customization, and using the sample is simple, as long as the Data-theme attribute is used.
<a href= "#" data-role= "button" Data-theme= "a" >swatch a</a><a href= "#" data-role= "button" Data-theme= "b ">swatch b</a><a href=" # "data-role=" button "Data-theme=" C ">swatch c</a><a href=" # "Data-role = "button" data-theme= "D" >swatch d</a><a href= "#" data-role= "button" Data-theme= "E" >swatch e</a>

15.jQuery Mobile contains an initialization event named Mobileinit, which is loaded before the Document.ready event for JQuery. This allows you to override and extend the default global options for jquery Mobile, and also to start all customizations. In order to extend the Mobileinit event, you must correctly arrange the sequence of JavaScript. You have to include a custom JavaScript event handler after the jquery framework loads before the jquery mobile is loaded.

JQuery Mobile Development