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


Posted in Javascript onMay 28, 2016

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

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.最常见的动态添加 listview>li 标签

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

还有很多还需要慢慢发现!我做的是一个移动点餐系统:目前产品界面显示如下图:不知道有没有谁自己封装的listview,或者号的插件推荐我使用的!或有更好的建议……欢迎发表。

以上这篇jqueryMobile 动态添加元素,展示刷新视图的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 错误处理的几种方法
Jun 13 Javascript
javascript Math.random()随机数函数
Nov 04 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 #Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 #Javascript
jQuery操作动态生成的内容的方法
May 28 #Javascript
javascript 用函数实现继承详解
May 28 #Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 #Javascript
jQuery实现布局高宽自适应的简单实例
May 28 #Javascript
jquery mobile界面数据刷新的实现方法
May 28 #Javascript
You might like
php程序效率优化的一些策略小结
2010/07/17 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
php写app用的框架整理
2019/09/29 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
Python 文件处理注意事项总结
2017/04/10 Python
机器学习10大经典算法详解
2017/12/07 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
澳大利亚相机之家:Camera House
2017/11/30 全球购物
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
主题实践活动总结
2014/05/08 职场文书
岗位说明书怎么写
2014/07/30 职场文书
文明单位申报材料
2014/12/23 职场文书
记者节感言
2015/08/03 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android