快捷導(dǎo)航

jqueryMobile 動(dòng)態(tài)添加元素,展示刷新視圖的實(shí)現(xiàn)方法

更新時(shí)間：2016年05月28日 11:11:06 投稿：jingxian

下面小編就為大家?guī)?lái)一篇jqueryMobile 動(dòng)態(tài)添加元素,展示刷新視圖的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

jQuery Mobile的是一個(gè)很好的移動(dòng)開(kāi)發(fā)框架，你可能已經(jīng)知道，雖然它有很多難以解決的問(wèn)題，但是我相信后續(xù)版本jquery會(huì)修復(fù)……我是很喜歡jquery的。這并不是說(shuō)它很完美無(wú)暇，很多開(kāi)發(fā)人員遇到的情況也都難解決，比如：嘗試使用代碼來(lái)添加，更新或刪除元素，使用JavaScript的頁(yè)面跳轉(zhuǎn)。在這篇博客文章中，我列出了一些動(dòng)態(tài)添加組建重新刷新的方法。

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.最常見(jiàn)的動(dòng)態(tài)添加 listview>li 標(biāo)簽

<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>
  <input type="range" id="slider-2" value="25" min="0" max="100" />
</div>
 
$('#slider-2').val(80).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');

還有很多還需要慢慢發(fā)現(xiàn)！我做的是一個(gè)移動(dòng)點(diǎn)餐系統(tǒng)：目前產(chǎn)品界面顯示如下圖：不知道有沒(méi)有誰(shuí)自己封裝的listview，或者號(hào)的插件推薦我使用的！或有更好的建議……歡迎發(fā)表。

以上這篇jqueryMobile 動(dòng)態(tài)添加元素,展示刷新視圖的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: