jquery mobile界面数据刷新

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

# [jquery mobile界面数据刷新][jquery mobile] #

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

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

各类标签的刷新

1.Textarea fields

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""> 
    <div style="">
      1 
    </div> 
    <div style="">
      2 
    </div> </td> 
   <td style=""> 
    <div style=""> 
     <div style=""> 
      <code style="">$(</code> 
      <code style="">'body'</code> 
      <code style="">).prepend(</code> 
      <code style="">'&lt;textarea&nbsp;id="myTextArea"&gt;&lt;/textarea&gt;'</code> 
      <code style="">);</code> 
     </div> 
     <div style=""> 
      <code style="">$(</code> 
      <code style="">'#myTextArea'</code> 
      <code style="">).textinput();</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

2.Text input fields

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""> 
    <div style="">
      1 
    </div> 
    <div style="">
      2 
    </div> </td> 
   <td style=""> 
    <div style=""> 
     <div style=""> 
      <code style="">$(</code> 
      <code style="">'body'</code> 
      <code style="">).prepend(</code> 
      <code style="">'&lt;input&nbsp;type="text"&nbsp;id="myTextField"&nbsp;/&gt;'</code> 
      <code style="">);</code> 
     </div> 
     <div style=""> 
      <code style="">$(</code> 
      <code style="">'#myTextField'</code> 
      <code style="">).textinput();</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

3.Buttons

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""> 
    <div style="">
      1 
    </div> 
    <div style="">
      2 
    </div> </td> 
   <td style=""> 
    <div style=""> 
     <div style=""> 
      <code style="">$(</code> 
      <code style="">'body'</code> 
      <code style="">).append(</code> 
      <code style="">'&lt;a&nbsp;href=""&nbsp;data-theme="e"&nbsp;id="myNewButton"&gt;testing&lt;/a&gt;'</code> 
      <code style="">);</code> 
     </div> 
     <div style=""> 
      <code style="">$(</code> 
      <code style="">'#myNewButton'</code> 
      <code style="">).button();</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

4.Combobox or select dropdowns

5.Listviews

6.Slider control

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""> 
    <div style="">
      1 
    </div> 
    <div style="">
      2 
    </div> 
    <div style="">
      3 
    </div> 
    <div style="">
      4 
    </div> 
    <div style="">
      5 
    </div> 
    <div style="">
      6 
    </div> </td> 
   <td style=""> 
    <div style=""> 
     <div style=""> 
      <code style="">&lt;div&nbsp;data-role=</code> 
      <code style="">"fieldcontain"</code> 
      <code style="">&gt;</code> 
     </div> 
     <div style=""> 
      <code style="">&lt;label&nbsp;</code> 
      <code style="">for</code> 
      <code style="">=</code> 
      <code style="">"slider-2"</code> 
      <code style="">&gt;Input&nbsp;slider:&lt;/label&gt;</code> 
     </div> 
     <div style=""> 
      <code style="">&lt;input&nbsp;type=</code> 
      <code style="">"range"</code>&nbsp; 
      <code style="">id=</code> 
      <code style="">"slider-2"</code>&nbsp; 
      <code style="">value=</code> 
      <code style="">"25"</code>&nbsp; 
      <code style="">min=</code> 
      <code style="">"0"</code>&nbsp; 
      <code style="">max=</code> 
      <code style="">"100"</code>&nbsp; 
      <code style="">/&gt;</code> 
     </div> 
     <div style=""> 
      <code style="">&lt;/div&gt;</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;</code>&nbsp; 
     </div> 
     <div style=""> 
      <code style="">$(</code> 
      <code style="">'#slider-2'</code> 
      <code style="">).val(80).slider(</code> 
      <code style="">'refresh'</code> 
      <code style="">);</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

7.Toggle switch

8.Radio buttons

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

9.Checkboxes

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

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

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

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

[jquery mobile]: http://www.cnblogs.com/wshiqtb/p/3232829.html