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 相关文章推荐
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
常用的javascript设计模式
Jan 11 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
微信小程序动态添加view组件的实例代码
May 23 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
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 反射机制实现动态代理的代码
2008/10/22 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
JS 时间显示效果代码
2009/08/23 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
Python 使用office365邮箱的示例
2020/10/29 Python
python中str内置函数用法总结
2020/12/27 Python
介绍一下如何优化MySql
2016/12/20 面试题
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
庆七一活动总结
2014/08/27 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
大学学生会竞选稿
2015/11/19 职场文书
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
详解在OpenCV中如何使用图像像素
2022/03/03 Python
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python