JQuery Mobile - 解决动态更新页面内容,CSS失效问题!
今天编写JQuery Mobile程序,需要对数组数据动态创建,并且每条数据对应一个复选框,于是我很顺利写了一个Demo,当我运行时候发现,和我期望的不一样!复选框确实创建出来了,但是却没有CSS效果,完全是Html的!于是上网搜索,想尽快解决,但是,发现网上目前提供的方法都无法解决!!最终,我就算是搞定这个问题了吧,下面我说说解决方法,抛砖引玉!
我最开始的想法是直接使用控件组,那样直接就创建出来一组复选框了,我对这个复选框父控件插入我动态更新的内容,不就可以了吗?这是我最开始的代码:
<fieldset data-role="controlgroup" style="margin-left: -5px" id="activity-controlgroup" class="test">
<label for="red">包饺子</label>
<input type="checkbox" name="activity-radio" id="red" value="red">
<label for="green">丢手绢</label>
<input type="checkbox" name="activity-radio" id="green" value="green">
<label for="blue">投沙包</label>
<input type="checkbox" name="activity-radio" id="blue" value="blue">
</fieldset>
但是,经过一番努力,发现在动态更新了里面内容后,怎么也无法让JQuery Mobile启动CSS,和其它控件风格一致!!!!
折腾半天后,停下来,喝了一点咖啡,随后我就开始想,这个东西到底该怎么能到达或接近JQuery Mobile的CSS效果呢?让这些复选框和这个页面中的其它JQuery Mobile效果一致?在我的程序里面,很多地方用到了listview,它也需要动态更新数据,listview有个方法“refresh”,在更新完数据后,调用这个方法就可以了!于是,我就去JQuery Mobile的官方网站看资料去了,最终查看以下这么多控件具备“refresh”方法:
具备refresh方法的控件:
10,Tabs Widget
好了,我为什么去看哪些控件具备“refresh”方法呢?换成Delphi来说吧,并不是所有它的控件都具备容器功能,有容器功能的控件可以容纳其它控件,不仅仅是Delphi,包括其它很多种图形界面开发工具和具有图形库的语言,都是这样的!那么很可能,在JQuery Mobile里,具备“refresh”方法的控件,是容器功能控件,可以容纳其它控件!如果是这样,那么,我把我要动态加载的复选框放到具备“refresh”方法的容器控件里,是不是就可以了呢?下面就是我当前的代码:
1,被点击的按钮。点击它,动态创建那些要更新的内容,并更新到指定位置。
<a href="#" id="activityDetail2-selectCourse" onclick="CreateActivity()"
class="ui-btn ui-corner-all ui-shadow ui-btn-inline"
style="padding-top: 5px;padding-bottom: 5px;padding-left: 15px;padding-right: 15px;margin-left: -5px;margin-top: -5px">选择课时</a>
2,响应上面按钮的函数。
<script language="JavaScript"> function CreateActivity() { //要更新的数据
var temp = '';
for (var i = 1; i < 5; i++) { temp += '<label for="activity-' + i + '" >活动 ' + i + '</label>';
temp += '<input type="checkbox" name="activity" id="activity-' + i + '" value="">';
} //对指定的工具栏更新数据
$("#activity-controlgroup").html(temp); //刷新刚动态更新数据的工具栏
$("#activity-controlgroup").toolbar("refresh");
}
</script>
3,两个Toolbar类型的容器。两个做对比。
<div data-role="footer" id="activity-controlgroup2">
<h4>Powered by jQuery Mobile</h4>
</div> <br> <div data-role="footer" id="activity-controlgroup" class="ui-corner-all ui-shadow">
<h4>Powered by jQuery Mobile</h4>
</div>
截图就不上了,把这些代码放到可以正常运行的JQuery Mobile页面中,运行一下就可以看到效果了!目前这种程度不一定完全适合每个人,个人根据自己需要继续调整CSS吧!!
参考:
https://api.jquerymobile.com/category/widgets/
http://demos.jquerymobile.com/1.4.4/toolbar/#&ui-state=dialog
JQuery Mobile - 解决动态更新页面内容,CSS失效问题!的更多相关文章
- Jquery Mobile局部刷新后js和css失效,需局部渲染
$(function () { $("#submit").click(function(){ var storage = window.localStorage; ...
- 【Jquery mobile】动态加载ListView 转
[Jquery mobile]动态加载ListView 分类: Jquery Mobile2011-12-01 09:04 13984人阅读 评论(1) 收藏 举报 jquerylistviewmob ...
- jquery mobile左右滑动切换页面
jquery mobile左右滑动切换页面 $(function() {$("body").bind('swiperight', function() { $.mobile.ch ...
- jquery mobile Checkbox动态添加刷新及事件绑定
jquery mobile Checkbox动态添加刷新及事件绑定 在微信项目中,涉及到一个多选功能.数据来自后台数据库,需要动态加载. 项目结构:微信api+web app.使用jquery mob ...
- 动态为页面添加CSS样式文件引用
动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...
- Jquery Mobile通过超链接跳转后CSS样式不起作用的解决办法
Jquery Mobile中的超链接默认是采用AJAX跳转的,ajax获取到页面的内容之后,就直接替换当前页面的内容了,它只是单纯的获取页面的HTML代码,并不会再去下载引用的CSS代码和JS代码,因 ...
- Android+Jquery Mobile学习系列(4)-页面跳转及参数传递
关于页面转场,这个必须得专门列出来说明一下,因为Jquery Mobile与普通的Web发开有一些区别,这个对于新手如果不了解的话,就会钻到死胡同.撸主前段时间就是很急躁地上手开发程序,结果在页面转场 ...
- Android+Jquery Mobile学习系列(4)-页面转场及参数传递
关于页面转场,这个必须得专门列出来说明一下,因为Jquery Mobile与普通的Web发开有一些区别,这个对于新手如果不了解的话,就会钻到死胡同.撸主前段时间就是很急躁地上手开发程序,结果在页面转场 ...
- jquery mobile转场时加载js失效(转)
jquery mobile拦截了所有的http请求,并使用ajax请求取代传统的http.请求发出后,框架会将请求的内容插入到页面中data- role="page"的部分,取代原 ...
随机推荐
- FormValidator表单验证
所需的库文件 红色框内是所需要的JavaScript库文件. <%@ page language="java" contentType="text/html; ch ...
- FutureTask详解
1 基本概念 1.1 Callable与Future Runnable封装一个异步运行的任务,可以把它想象成为一个没有参数和返回值的异步方法.Callable与Runnable类似,但是有返回值.Ca ...
- 使用 EWS(Exchange Web Service)协议读取邮件、发送邮件
问题: 公司之前可以通过POP3协议收发邮件,因而在SoapUI中用JavaMail可以读取邮件,后来配置了Office 365,POP3协议端口不再开放,邮件全部读取失败,报login timeou ...
- c++11多线程学习笔记之一 thread基础使用
没啥好讲的 c++11 thread类的基本使用 #include "stdafx.h" #include <iostream> #include <thre ...
- fms +fme 视频直播
1.安装fms 按默认安装即可 2.安装fme 安装完成后启动fme FMS URL是发布到fms的地址默认就可以, 然后点击 Connect 连接成功后左下角会出现connected的提示, 然后点 ...
- sqlserver中怎么查询字段为空的记录
sqlserver中怎么查询字段为空的记录的两种方法: 详细介绍请查看全文:https://cnblogs.com/qianzf/ 原文博客的链接地址:https://cnblogs.com/qzf/
- hdu - 1072(dfs剪枝或bfs)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1072 思路:深搜每一个节点,并且进行剪枝,记录每一步上一次的s1,s2:如果之前走过的时间小于这一次, ...
- hdu-1061(快速幂)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1061 思路:快速幂 #include<iostream> #include<cstd ...
- py-函数基础
定义: 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可 特性: 1.减少重复代码2.使程序变的可扩展3.使程序变得易维护 函数参数 形参变量 只有在被调 ...
- Shiro ini 过滤器
http://shiro.apache.org/web.html#Web-WebINIconfiguration Filter Name Class anon org.apache.shiro.web ...