jquery mobile界面数据刷新

野性酷女 2022-07-15 06:50 279阅读 0赞

jquery mobile界面数据刷新

JQM里面当我们更新了某些页面标签(如: listview, radiobuttons, checkboxes, select menus)里的数据时,必须做refresh操作.

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

各类标签的刷新

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”
>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”
);

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” 
/>


          
<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’
);

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’
);

JQM动态渲染各种问题的解决办法：

1、select动态渲染——“cannot call methods on selectmenu prior to initialization; attempted to call”

  1. 1 $('#selectID').selectmenu();
  2. 2 $('#selectID').selectmenu("refresh");

代码改变世界，我的《源代码》，我的世界！

发表评论

表情：
评论列表 （有 0 条评论，279人围观）

还没有评论，来说两句吧...

相关阅读

    相关 jQuery Mobile

    jQuery Mobile是一个基于jQuery Core的触摸友好UI框架，适用于所有流行的移动，平板电脑和桌面平台。 官网：[http://jquerymobile.co

    小灰灰小灰灰/ 0 赞/ 613 阅读