怎么使用JQuery Mobile开发移动网站
方法/步骤
1
简单的说明一下JQueryMobile. 它是一个很好的跨平台的移动端网站开发框架。 是一个前台的框架。现在要使用这个框架组一个界面，这个界面很简单， 但是麻雀虽小五脏俱全， 然后模板实现， 知识讲解完毕。html要使用HTML5的标准来写， 因为JQueryMobile是基于HTML5的。 书写html5的格式如图，
2
既然使用JQueryMobile就要有这个框架， 这里可以使用本地引用的方式， 和网上引用， 也叫做cdn引用。就是比较稳定和快速的引用外部文件的一种方式。 这里使用cdn的方式， 这样只要可以上网就可以使用该框架。
3
在写移动端的网站的时候， 一定要写一个meta的name为viewport的属性， 因为该属性代表着网站页面的自适应。简单的写法为： 代表着网站为驱动设备的宽度。
4
然后加入框架之后， 写一个简单的界面。 这里面JQueryMobile大量的使用了一个data-的属性， 这里使用最多的事data-role。 代表着他默认的样式规则。 就是提前定义好了很多的样式来供你使用。 常用的page. 代表着页面， listview， 代表着一个列表视图。下面是代码和效果图
5
稍微说明一下。
data-role="page" 是代表着一个页面可以看做该内容下是一个页面显示的内容
data-role=”header"代表着 页面的页头， 就是页面的最上面显示的内容这里需要注意， 里面要加上子标签内容， 要不然， 就不会居中显示内容了。推荐使用h1.
data-role="footer"代表着页脚的内容。 也是网站的一个说明信息。 或者是一个底部导航菜单。 还有一部分， 就是data-role="content" 是代表着页面内容部分， 主要的内容在这里面显示。
这3个部分构成了一个简单的页面。 所以， 现在可以体验到它的强大， 不用写太多的代码一个简单的框架就好了， 下面继续增加一个listveiw的列表视图。
6
完成列表视图的代码， 增加一个文章列举表的代码， 这里列表是使用data-role="listview" 来修饰样式。 然后这里只需要加上data-role="listview" 你发现想要的list效果就实现了。 这样我们一个简单的页面效果就实现了。
jQuery Mobile有哪些强大的功能
jQuery Mobile 是创建移动 web 应用程序的框架。
jQuery Mobile 适用于所有流行的智能手机和平板电脑。
jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。
1.跨平台
目前大部分的移动设备浏览器都支持HTML5标准,jQuery Mobile以HTML5标记配置网页,所以可以跨不同的移动设备,如Apple iOS,Android,BlackBerry,Windows Phone,Symbian和MeeGo等;
2.容易学习
jQuery Mobile通过HTML5的标记与CSS规范来配置与美化页面,对于已经熟悉HTML5及CSS3的读者来说,架构清晰,又易于学习.
3.提供多种函数库
例如键盘,触碰功能等,不需要辛苦编写程序代码,只要稍加设置,就可以产生想要的功能,大大了编写程序所花费的时间;
4.多样的布景主题和ThemeRoller工具
jQuery UI的ThemeRoller在线工具,只要通过下拉旱行设置,就能够自制出相当有特色的网页风格,并且可以将代码下载下来应用,另外,JQuery Mobile还提供布景主题,轻轻松松就能够快速创建高质感的网页.
如何在 jQuery Mobile 的 Listview 中动态移除某一条的图标
checkbox
1
2
3
4
-------------------------------------------------------------
$(document).ready(function() {
$("td[id^='k_']").hide();
var check = $(":checkbox"); //得到所有被选中的checkbox
var actor_config; //定义变量
check.each(function(i){
actor_config = $(this);
actor_config.click(
function(){
if($(this).attr("checked")==true){
$("#k_"+$(this).val()).show();
}else{
$("#k_"+$(this).val()).hide();
}
}
);
});
});