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 相关文章推荐
屏蔽Flash右键信息的js代码
Jan 17 Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
mpvue将vue项目转换为小程序
Sep 30 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实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
python计算最小优先级队列代码分享
2013/12/18 Python
Python 私有函数的实例详解
2017/09/11 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
python开启debug模式的方法
2019/06/27 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
Pytorch之parameters的使用
2019/12/31 Python
tensorboard显示空白的解决
2020/02/15 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
Linux的主要特性
2014/10/06 面试题
高中体育教学反思
2014/01/24 职场文书
525心理活动总结
2014/07/04 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
基于Python实现一个春节倒计时脚本
2022/01/22 Python
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis
Android Rxjava3 使用场景详解
2022/04/07 Java/Android