Jquerymobile dynamically add elements to show the implementation method of refreshing the view _jquery

jquery Mobile is a good mobile development framework that you may already know, although it has a lot of difficult problems to solve, but I believe that later versions of jquery will fix ... I like jquery a lot. This is not to say that it is flawless, and that many developers are encountering difficulties, such as trying to use code to add, update, or delete elements, and to use JavaScript for page jumps. In this blog post, I've listed some ways to dynamically add a build refresh.

1.Textarea Field

$ (' body '). Prepend (' <textarea id= "Mytextarea" ></textarea> ");
$ (' #myTextArea '). TextInput (); 

2.Text input Field

$ (' body '). Prepend (' <input type= "text" id= "MyTextField"/> ");
$ (' #myTextField '). TextInput (); 

3.button

$ (' body '). Prepend (' <input type= "text" id= "MyTextField"/> ");
$ (' #myTextField '). TextInput (); 

3.Combobox or select dropdowns

<label for= "Scountry" >Country:</label>
<select name= "scountry" id= "Scountry" >
  < Option Value= "" >where you live:</option>
  <option value= "ad" >Andorra</option>
  < Option value= "AE" >united Arab emirates</option>
</select>
 
var myselect = $ ("#sCountry");
Myselect[0].selectedindex = 3;
Myselect.selectmenu (' refresh '); 

4. The most common dynamic add Listview>li tag

<ul id= "MyList" data-role= "ListView" data-inset= "true" >
  <li>A</li>
  <li>b</li >
  <li>C</li>
</ul>
 
$ (' #mylist '). ListView (' Refresh '); 

5.Slider Control

<div data-role= "Fieldcontain" >
  <label for= "slider-2" >input slider:</label>
  Type= "Range" id= "slider-2" value= "min=" 0 "max="/>
</div>
 
$ (' #slider-2 '). val. Slider (' Refresh '); 

6.Toggle switch

<span><div data-role= "Fieldcontain" >
  <label for= "Toggle"
  >flip switch:</label> <select name= "Toggle" id= "Toggle" data-role= "Slider" >
    <option value= "Off" >Off</option>
    <option value= "on" >On</option>
  </select> 
</div>
 
var myswitch = $ ("# Toggle ");
Myswitch[0].selectedindex = 1;
myswitch. Slider ("Refresh");</span> 

7.Radio

<span><div data-role= "Fieldcontain" > <fieldset data-role= "controlgroup" data-type= "
  Horizontal" >
    <legend>layout view:</legend> <input type= "Radio" name= "Radio-view" value= "
      list"/>
      <label for= "radio-view-a" >List</label> <input type= "Radio" name= "Radio-view
      " value= "Grid" >
      <label for= "Radio-view-b" >Grid</label>
      <input type= "Radio" name= "Radio-view" value= " Gallery "/>
      <label for=" radio-view-c ">Gallery</label>
  </fieldset>
</div>
 
$ ("Input[value=grid]"). attr (' checked ', true). Checkboxradio (' refresh ');</span> 

8.Checkboxes

<div data-role= "Fieldcontain" >
  <fieldset data-role= "Controlgroup" >
    <legend>agree to the terms:</legend>
    <input type= "checkbox" Name= "Checkbox-1" id= "checkbox-1" class= "Custom"/>
    < Label for= "Checkbox-1" >i agree</label>
  </fieldset>
</div>
 
$ (' #checkbox-1 '). attr (' checked ', true). Checkboxradio (' refresh '); 

There's still a lot to discover! What I do is a mobile ordering system: The current product interface shows the following figure: Do not know if there is no one of their own encapsulation of the ListView, or the number of plug-ins recommended I use! Or have better advice ... Welcome to publish.

The above jquerymobile dynamic add element, show Refresh View Realization method is small series to share all the content, hope to give you a reference, also hope that we support cloud habitat community.