jquery mobile界面数据刷新的实现方法

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

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

各类标签的刷新

1.Textarea fields

$('body').prepend('<textarea id="myTextArea"></textarea>');
$('#myTextArea').textinput();

2.Text input fields

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

3.Buttons

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

4.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');

5.Listviews

<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

<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

<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

<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

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

以上这篇jquery mobile界面数据刷新的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JqueryMobile动态生成listView并实现刷新的两种方法

    JqueryMobile动态生成listView并实现刷新的两种方法 复制代码 代码如下: function queryEntfernungen(tx, results)   alert("This Hello works");   var len = results.rows.length;     // This For works fine for (var i = 0; i < len; i++) {       $("div[data-role=content

  • jqueryMobile 动态添加元素,展示刷新视图的实现方法

    jQuery Mobile的是一个很好的移动开发框架,你可能已经知道,虽然它有很多难以解决的问题,但是我相信后续版本jquery会修复--我是很喜欢jquery的.这并不是说它很完美无暇,很多开发人员遇到的情况也都难解决,比如:尝试使用代码来添加,更新或删除元素,使用JavaScript的页面跳转.在这篇博客文章中,我列出了一些动态添加组建重新刷新的方法. 1.Textarea field $('body').prepend('<textarea id="myTextArea"&

  • jquerymobile checkbox及时刷新才能获取其准确值

    解决办法: 复制代码 代码如下: $('input[type="checkbox"]').bind('click',function() { $(this).prop('checked').checkboxradio("refresh"); // 绑定事件及时更新checkbox的checked值 }); 如果要用js去改变checkbox的值时也要及时刷新. 复制代码 代码如下: $('input [type="checkbox"]').att

  • jquerymobile局部渲染的各种刷新方法小结

    在JQueryMobile页面在第一次初始化进行一次整体渲染,动态生成的需要局部渲染. 在jquerymobile实现listview局部渲染的方法: 复制代码 代码如下: function queryPublishOrderList(trackOrDealOrInsp,userCode,type,pageNum){      var queryPublishOrderListURL="http://xxx.xxx.xxx.xxx/Myapp/WorkOrderSelByTypeService.

  • jQuery Mobile动态刷新页面样式的实现方法

    jQuery Mobile动态刷新页面样式的实现方法

    当我们使用Ajax或者javascript动态在页面上添加元素后,如添加select控件的option元素,添加ul的li元素.添加之后我们会发现,它们显示的样式不是jQuery Mobile的炫酷样式了,而变成了很丑陋的元素样式.如下图所示: 代码如下: <script> function myFunction() { var ul = document.getElementById("myul"); var li1 = "<li data-role=\&

  • jquery mobile界面数据刷新的实现方法

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

  • jquery+json实现数据二级联动的方法

    本文实例讲述了jquery+json实现数据二级联动的方法.分享给大家供大家参考,具体如下: function GetCityInfo1() { $("#ddlCITY1").empty(); //$("#ddlCOUNTY").empty(); var strId = $("#ddlPROVINCE1").attr("value"); $('#HiddenPro').val(strId); $.get("../as

  • jQuery调取jSon数据并展示的方法

    本文实例讲述了jQuery调取jSon数据并展示的方法.分享给大家供大家参考.具体如下: 以下代码是将页面中的展示部分 复制代码 代码如下: function searchProductlistByfilterCondition(index, type, sort, filterWord) {      //cite_html      var citem_html = '<div class="citem"><div class="citemtop&quo

  • jquery实现界面无刷新加载登陆注册

    jquery实现界面无刷新加载登陆注册

    官网的登陆注册每次要跳转到另一个界面,能不能做一个简单的,在界面弹出一个框框登陆,我想了想做了这么一个案例,大家来看看成不成 贴上代码,实现了在同一个弹出窗上加载了登陆注册功能!可自由点击!当然样式丑了一些!还请见谅!demo在下面 1这里是html内容 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi

  • jQuery Mobile的loading对话框显示/隐藏方法分享

    显示loading对话框方法是: 复制代码 代码如下: $.mobile.showPageLoadingMsg(); 也可设置参数 复制代码 代码如下: $.mobile.showPageLoadingMsg("b","加载中",false); 隐藏loading对话框方法是: 复制代码 代码如下: $.mobile.hidePageLoadingMsg();

  • jquery mobile changepage的三种传参方法介绍

    本来觉得changePage 那么多option,传几个参数应该没问题结果翻遍国内外网站,基本方法只有三种 1,显性传参,就是利用url这个地址把参数带上,然后到changepage后的新页面,用函数分割下来,提取 2,利用全局变量,应该就是所谓的内存法,在changePage时候,把参数干脆搞个变量存起来,之后到新的页面再提取 3,利用storage了.localstorage,sessionstorage,格式正好是键值格式,先转字符,然后用的时候转成json对象用就是 实在话,不管哪种方法

  • Jquery Mobile 自定义按钮图标

    Jquery Mobile 自定义按钮图标

    很多朋友都反应jquery mobile自带的图标真的是少之又少,另外我也觉得图标偏小(系统自带的是18*18的),于是琢磨着如何自定义按钮图标,下面小编把我的方法分享给大家. 刚接触Jquery Mobile框架,遇到个很现实问题,就是如何自定义按钮图标,我觉得jquery mobile 自带的图标实在是太少了,另外我觉得图标也偏小(系统自带的应该是18*18的)下面是我的方法,希望大家踊跃拍砖. 1.第一种方法是比较简单的,但是有前提,前提就是你自定义的图标大小应该和系统内置的保持一致,这样

  • 让jQuery Mobile不显示讨厌loading界面的方法

    jQuery Mobile 的一个BUG: 当不采用 ajax 以及 他自己的 back 返回的时候,即: 点击浏览器后退按钮时,将会从缓存之中加载页面,此时,讨厌的 loading 动画出来了,而且一直不消失. 网上找了好多解决方法,搜索了好久都没有好用的,今天突然想起来个釜底抽薪,直接动jqeury-mobile 的类库. 用编辑器打开, 找到显示pageLoading的方法, showPageLoadingMsg 的定义处: 然后加上一句代码,if("".length<5)

  • bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法

    异步请求 var postData = { "env_name" : new_env_name, "env_url": new_env_url, "env_desc" : new_env_desc }; $.ajax({ type: 'POST', url : '/test_env_add/', data : postData, dataType : 'json', success : function(data){ $('#table_test

随机推荐