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 相关文章推荐
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
javascript表单验证大全
Aug 12 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
element多个表单校验的实现
May 27 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
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
Convert Seconds To Hours
2007/06/16 Javascript
看了就知道什么是JSON
2007/12/09 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
python的keyword模块用法实例分析
2015/06/30 Python
Python解析树及树的遍历
2016/02/03 Python
Python读取word文本操作详解
2018/01/22 Python
python实现图片九宫格分割
2021/03/07 Python
Numpy之reshape()使用详解
2019/12/26 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
AUC计算方法与Python实现代码
2020/02/28 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
python中有函数重载吗
2020/05/28 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
CSS3 box-sizing属性
2009/04/17 HTML / CSS
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
自荐信格式
2013/12/01 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
英文投诉信格式
2015/07/03 职场文书
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL