PhoneGap中文网

 找回密码
 立即注册
查看: 18382|回复: 6
打印 上一主题 下一主题

jquery mobile界面数据刷新

[复制链接]

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
跳转到指定楼层
楼主
发表于 2013-8-1 20:16:26 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
jquery mobile界面为什么要做数据刷新


JQM里面当我们更新了某些页面标签(如: listview, radiobuttons, checkboxes, select menus)里的数据时,必须做refresh操作.
为什么必须做refresh操作操作呢?因为JQM在做页面渲染的时候,为了使样式跟客户端程序相似, 隐藏了原始的标签然后用一些新的标签和自定义的样式来表现原标签,其实新样式的标签已经不是原来的标签,所以更新了数据必须做refresh操作.




当我们使用Ajax或者javascript动态在页面上添加元素后,如添加select控件的option元素,添加ul的li元素。添加之后我们会发现,它们显示的样式不是jQuery Mobile的炫酷样式了,而变成了很丑陋的元素样式。如下图所示:



代码如下:
[html] view plaincopy

  • <script>
  •     function myFunction() {
  •         var ul = document.getElementById("myul");
  •         var li1 = "<li data-role=\"fieldcontain\">信息2</li>";
  •         var li2 = "<li data-role=\"fieldcontain\">信息3</li>";
  •         ul.innerHTML += li1;
  •         ul.innerHTML += li2;
  •     }
  • </script>
  • <!-- listview测试 -->
  • <ul data-role="listview" data-inset="true" id="myul">
  •          <li data-role="list-divider">信息列表</li>
  •          <li data-role="fieldcontain">信息1</li>
  • </ul>

可以看到,jQuery Mobile并没有对于新添加的元素进行渲染。这种情况下就需要对元素的样式进行刷新。
刷新代码如下:
[html] view plaincopy

  • <script>
  •     function myFunction() {
  •         var ul = document.getElementById("myul");
  •         var li1 = "<li data-role=\"fieldcontain\">信息2</li>";
  •         var li2 = "<li data-role=\"fieldcontain\">信息3</li>";
  •         ul.innerHTML += li1;
  •         ul.innerHTML += li2;
  •         //刷新jQuery Mobile样式
  •         $('#myul').listview('refresh');
  •     }
  • </script>

其实最重要的一句刷新代码是:$('#myul').listview('refresh');
刷新后的效果如下图所示:


注意:在使用js或者jQuery获取控件(例如:button、checkbox、radiobutton等)的值时,也是需要先刷新,否则无法获取到最新的值。
下面列出常用的标签的refresh操作,其他的可以举一反三。
1.  Listview的refresh操作:
$('#mylistid').listview('refresh');

2. select menu的refresh操作:
var myselect = $("#myselect");
myselect[0].selectedIndex = 2;
myselect.selectmenu("refresh");

3. Checkboxes的refresh操作:
$("#mycheckboxid").attr("checked",true).checkboxradio("refresh");

4. Radio buttons的refresh操作:
$("#myradioid").attr("checked",true).checkboxradio("refresh");


新加的:来自:http://hi.baidu.com/life_to_you/item/bf3621365fa5974b033edcbc
各类标签的刷新
1.Textarea fields
1
2
$('body').prepend('<textarea id="myTextArea"></textarea>');
$('#myTextArea').textinput();






2.Text input fields
1
2
$('body').prepend('<input type="text" id="myTextField" />');
$('#myTextField').textinput();



3.Buttons
1
2
$('body').append('<a href="" data-theme="e" id="myNewButton">testing</a>');
$('#myNewButton').button();



4.Combobox or select dropdowns
1
2
3
4
5
6
7
8
9
10
<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');



5.Listviews
1
2
3
4
5
6
7
<ul id="myList"data-role="listview"data-inset="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
</ul>
  
$('#mylist').listview('refresh');



6.Slider control
1
2
3
4
5
6
<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');



7.Toggle switch
1
2
3
4
5
6
7
8
9
10
11
<div data-role="fieldcontain">
<label for="toggle">Flipswitch:</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");



8.Radio buttons
1
2
3
4
5
6
7
8
9
10
11
12
13
<div data-role="fieldcontain">
    <fieldset data-role="controlgroup"data-type="horizontal">
      <legend>Layout view:</legend>
          <input type="radio"name="radio-view"value="list"/>
          <labelfor="radio-view-a">List</label>
          <input type="radio"name="radio-view"value="grid"/>
          <labelfor="radio-view-b">Grid</label>
          <input type="radio"name="radio-view"value="gallery"/>
          <labelfor="radio-view-c">Gallery</label>
    </fieldset>
</div>
  
$("input[value=grid]").attr('checked',true).checkboxradio('refresh');



9.Checkboxes
1
2
3
4
5
6
7
8
9
<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');


it营
回复

使用道具 举报

23

主题

141

帖子

260

积分

中级会员

Rank: 3Rank: 3

积分
260
沙发
发表于 2013-9-27 16:01:56 | 只看该作者
不错不错,楼主您辛苦了。。。
it营
回复 支持 反对

使用道具 举报

6

主题

176

帖子

198

积分

注册会员

Rank: 2

积分
198
板凳
发表于 2013-10-1 01:50:03 | 只看该作者
相当不错,感谢无私分享精神!
回复 支持 反对

使用道具 举报

0

主题

108

帖子

116

积分

注册会员

Rank: 2

积分
116
地板
发表于 2013-10-3 17:08:37 | 只看该作者
我抢、我抢、我抢沙发~
回复 支持 反对

使用道具 举报

6

主题

176

帖子

198

积分

注册会员

Rank: 2

积分
198
5#
发表于 2013-10-5 09:01:06 | 只看该作者
支持一下:lol
回复 支持 反对

使用道具 举报

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
6#
 楼主| 发表于 2013-10-7 00:31:45 | 只看该作者
我是来刷分的,嘿嘿顺便学习一下
回复 支持 反对

使用道具 举报

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
7#
 楼主| 发表于 2013-10-8 13:05:52 | 只看该作者
不知该说些什么。。。。。。就是谢谢
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-6-19 00:09 , Processed in 0.062535 second(s), 32 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表