`

JQuery Mobile 移动设备上网页开发总结

mobilejquerymobile jquery 
阅读更多
经过一个半月的摸索，JQuery Mobile移动设备上网页开发总算告一段落了， 版本已发布出去了，感觉不是很完美，现在总结一下，有类似运用的朋友可以交流一下，希望能够起到抛砖引玉的效果


1.官方DEMO地址： http://jquerymobile.com/

2.官方论坛地址： http://forum.jquery.com/

3.开发过程中遇到的问题示例：
3.1 主题（data-theme）的问题
    jquery mobile的主题有下面几种
    data-theme="a"
    data-theme="b"
    data-theme="c"
    data-theme="d"
    data-theme="e"
各种主题的效果请参考：http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/pages/pages-themes.html
当然一般开发的时候，不会都用默认的jquery mobile风格的主题，通常要用公司风格的主题样式，下面是我扩展jquery mobile的主题，我从z开始，可以从官方的主题css样式拷贝一份改改： 

//jqm-theme-extend.css
/* Z 一级标题样式
-----------------------------------------------------------------------------------------------------------*/

.ui-bar-z {
	border-top: 			1px solid 		#33CC42;
	border-right: 			0;
	border-bottom: 			1px solid 		#1D7425;
	border-left: 			0;
	background: 			#004000;
	color: 					#fff;
	font-weight: bold;
	line-height: 1.4;
        //背景色渐变效果
	background-image: -moz-linear-gradient(top, 
							#33CC42, 
							#1D7425);
	background-image: -webkit-gradient(linear,left top,left bottom,
		color-stop(0, 		#33CC42),
		color-stop(1, 		#1D7425));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#049000', EndColorStr='#03b108')";
}
.ui-bar-z,
.ui-bar-z input,
.ui-bar-z select,
.ui-bar-z textarea,
.ui-bar-z button {
	font-family: Helvetica, Arial, sans-serif;
}
.ui-bar-z .ui-link-inherit {
	color: 					#fff;
}
.ui-bar-z .ui-link {
	color: 					#7cc4e7;
	font-weight: bold;
}

.ui-body-z {
	border: 1px solid 		#C6C6C6;
	background: 			#cccccc;
	color: 					#333333;
	font-weight: normal;
	line-height: 1.4;
	background-image: -moz-linear-gradient(top, 
							#e6e6e6, 
							#cccccc);
	background-image: -webkit-gradient(linear,left top,left bottom,
		color-stop(0, 		#e6e6e6),
		color-stop(1, 		#cccccc));
	 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#e6e6e6', EndColorStr='#cccccc')";
}
.ui-body-z,
.ui-body-z input,
.ui-body-z select,
.ui-body-z textarea,
.ui-body-z button {
	font-family: Helvetica, Arial, sans-serif;
}
.ui-body-z .ui-link-inherit {
	color: 					#333333;
}
.ui-body-z .ui-link {
	color: 					#2489CE;
	font-weight: bold;
}
.ui-btn-up-z {
	border: 1px solid 		#049000;
	background: 			#049000;
	font-weight: bold;
	color: 					#fff;
        //去除背景色渐变效果	
        /* 
	background-image: -moz-linear-gradient(top, 
							#049000, 
							#049000);
	background-image: -webkit-gradient(linear,left top,left bottom,
			color-stop(0, 	#049000),
			color-stop(1, 	#049000));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#049000', EndColorStr='#049000')";
	 */
}
.ui-btn-up-z a.ui-link-inherit {
	color: 					#fff;
}
.ui-btn-hover-z {
	border: 1px solid 		#74C138;
	background: 			#33CC42;
	font-weight: bold;
	color: 					#fff;
	/*
	background-image: -moz-linear-gradient(top, 
							#74C138, 
							#74C138);
	background-image: -webkit-gradient(linear,left top,left bottom,
			color-stop(0, 	#74C138),
			color-stop(1, 	#74C138));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#74C138', EndColorStr='#74C138')";
	*/
}
.ui-btn-hover-z a.ui-link-inherit {
	color: 					#fff;
}
.ui-btn-down-z {
	border: 1px solid 		#03B108;
	background: 			#03B108;
	font-weight: bold;
	color: 					#ffffff;
	/*
	background-image: -moz-linear-gradient(top, 
							#03B108, 
							#03B108);
	background-image: -webkit-gradient(linear,left top,left bottom,
		color-stop(0, 		#03B108),
		color-stop(1, 		#03B108));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#03B108', EndColorStr='#03B108')";
	*/
}
.ui-btn-down-z a.ui-link-inherit {
	color: 					#fff;
}
.ui-btn-up-z,
.ui-btn-hover-z,
.ui-btn-down-z {
	font-family: Helvetica, Arial, sans-serif;
	text-decoration: none;
}


/* Y 二级标题
-----------------------------------------------------------------------------------------------------------*/
.ui-bar-y {
	border: 0;
	background: 			transparent;
	color: 					#004000;
	font-weight: normal;
}
.ui-body-y {
	border: 0;
	background: 			transparent;
	color: 					#004000;
	font-weight: normal;
	line-height: 1.4;
}
.ui-btn-up-y {
	border: 1px solid 		#049000;
	background: 			#049000;
	font-weight: bold;
	font-size: 14px;
	color: 					#fff;
	line-height: 1.4;
	/* 
	background-image: -moz-linear-gradient(top, 
							#049000, 
							#049000);
	background-image: -webkit-gradient(linear,left top,left bottom,
			color-stop(0, 	#049000),
			color-stop(1, 	#049000));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#049000', EndColorStr='#049000')";
	 */
}
.ui-btn-up-y a.ui-link-inherit {
	color: 					#fff;
}
.ui-btn-hover-y {
	border: 1px solid 		#74C138;
	background: 			#74C138;
	font-weight: bold;
	font-size: 14px;
	color: 					#fff;
	/* 
	background-image: -moz-linear-gradient(top, 
							#74C138, 
							#74C138);
	background-image: -webkit-gradient(linear,left top,left bottom,
			color-stop(0, 	#74C138),
			color-stop(1, 	#74C138));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#74C138', EndColorStr='#74C138')";
	 */
}
.ui-btn-hover-y a.ui-link-inherit {
	color: 					#fff;
}
.ui-btn-down-y {
	border: 1px solid 		#03B108;
	background: 			#03B108;
	font-weight: bold;
	font-size: 14px;
	color: 					#fff;
	/* 
	background-image: -moz-linear-gradient(top, 
							#03B108, 
							#03B108);
	background-image: -webkit-gradient(linear,left top,left bottom,
		color-stop(0, 		#03B108),
		color-stop(1, 		#03B108));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#03B108', EndColorStr='#03B108')";
	 */
}
.ui-btn-down-y a.ui-link-inherit {
	color: 					#fff;
}
.ui-btn-up-y,
.ui-btn-hover-y,
.ui-btn-down-y {
	font-family: Helvetica, Arial, sans-serif;
	text-decoration: none;
}


/* X 正文内容
-----------------------------------------------------------------------------------------------------------*/

.ui-bar-x {
	border: 1px solid 		#B3B3B3;
	border-collapse:collapse;
	background: 			transparent;
	color: 					#3E3E3E;
	font-weight: normal;
	font-size: 14px;
	line-height: 1.4;
}
.ui-bar-x,
.ui-bar-x input,
.ui-bar-x select,
.ui-bar-x textarea,
.ui-bar-x button {
	font-family: Helvetica, Arial, sans-serif;
}
.ui-body-x {
	border: 1px solid 		#B3B3B3;
	border-collapse:collapse;
	font-weight: normal;
	font-size: 14px;
	color: 					#333333;
	background: 			transparent;
	line-height: 1.4;
}
.ui-body-x,
.ui-body-x input,
.ui-body-x select,
.ui-body-x textarea,
.ui-body-x button {
	font-family: Helvetica, Arial, sans-serif;
}
.ui-body-x .ui-link-inherit {
	color: 					#333333;
}
.ui-body-x .ui-link {
	color: 					#2489CE;
	font-weight: bold;
}
.ui-btn-up-x {
	border: 1px solid 		#049000;
	background: 			#049000;
	font-weight: bold;
	font-size: 14px;
	color: 					#fff;
	/* 
	background-image: -moz-linear-gradient(top, 
							#049000, 
							#049000);
	background-image: -webkit-gradient(linear,left top,left bottom,
			color-stop(0, 	#049000),
			color-stop(1, 	#049000));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#049000', EndColorStr='#049000')";
	 */
}
.ui-btn-up-x a.ui-link-inherit {
	color: 					#fff;
}
.ui-btn-hover-x {
	border: 1px solid 		#74C138;
	background: 			#74C138;
	font-weight: bold;
	font-size: 14px;
	color: 					#fff;
	/* 
	background-image: -moz-linear-gradient(top, 
							#74C138, 
							#74C138);
	background-image: -webkit-gradient(linear,left top,left bottom,
			color-stop(0, 	#74C138),
			color-stop(1, 	#74C138));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#74C138', EndColorStr='#74C138')";
	 */
}
.ui-btn-hover-x a.ui-link-inherit {
	color: 					#fff;
}
.ui-btn-down-x {
	border: 1px solid 		#03B108;
	background: 			#03B108;
	font-weight: bold;
	font-size: 14px;
	color: 					#fff;
	/* 
	background-image: -moz-linear-gradient(top, 
							#03B108, 
							#03B108);
	background-image: -webkit-gradient(linear,left top,left bottom,
		color-stop(0, 		#03B108),
		color-stop(1, 		#03B108));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#03B108', EndColorStr='#03B108')";
	 */
}
.ui-btn-down-x a.ui-link-inherit {
	color: 					#fff;
}
.ui-btn-up-x,
.ui-btn-hover-x,
.ui-btn-down-x {
	font-family: Helvetica, Arial, sans-serif;
	text-decoration: none;
}

   
3.2 修改页面的背景色，假设页面的都是这样： 
<body>
<div id="mainPage" data-role="page" class="type-index">
<decorator:body />
</div>
</body>


type-index是jquery mobile里自带的样式，重写type-index这个样式如下： 
//mobile.css

/** 除登录界面以外的页面的背景及渐变色 */
div.type-index{
    background:#f4f4f4;
    
    background-image: -webkit-gradient(linear,left top,left bottom,
        color-stop(0,         #f4f4f4),
        color-stop(1,         #f4f4f4));
}



3.3 解决手指向上滑动时，页面动态加载下一页的问题：
    var clientHeight = document.body.clientHeight;    //网页可见区域高
    待续。。


3.4 页面之间的滑动效果的初探
   待续。。


3.5 页面上比较难控制大小的元素的样式解决方法举例：
   待续。。


3.6 Ajax的运用：
   待续。。


3.6 fieldset的grid用法：
   待续。。

4 移动设备网页性能上的顾虑：
   待续。。

5 jquery mobile在移动设备网页上运用的不足：
   待续。。




开个头，有空随时更新 。。
1
顶
2
踩
分享到：
| 几个有用的css属性
评论
6 楼 pkwjava 2012-02-03  
做的是地址级联选择的东西，我把请求的改成同步就没有问题了，谢谢各位
5 楼 modiliany 2012-02-02  
如果用adriod模拟器，
需要在AndroidManifest.xml，里面加入
<uses-permission android:name="android.permission.INTERNET"/>
4 楼 modiliany 2011-12-25  
pkwjava 写道
楼主大哥，我想问一下关于jqm异步请求的问题，我用$.ajax()在web浏览器中没有问题，但是一到手机上就获取不了数据，能否告知怎么解决？先谢过


alert和断点调试一下。
3 楼 modiliany 2011-11-05  
pkwjava 写道
楼主大哥，我想问一下关于jqm异步请求的问题，我用$.ajax()在web浏览器中没有问题，但是一到手机上就获取不了数据，能否告知怎么解决？先谢过

你用safari浏览器调试，如果能alert出查找的数据的话， 在safari mobile浏览器上应该没有问题的。
例子：
$.ajax({
url: this.url,
data: this.urlParams,
async: true,
dataType: "text",
success: function(data){
callBackFun(data);
isLoading = false;
},
//执行ajax时出错
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
isLoading = false;
}
});
-------
例子：
//后台取明细
$.ajax({
url: viewUrl,
data: this.params,
async: true,
dataType: "xml",
success: function(data){
callBackFun(data);
isLoading = false;
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
isLoading = false;
}
}); 
Jquery mobile是基于Jquery的，ajax异步方法的用法是一样的。
2 楼 pkwjava 2011-10-13  
楼主大哥，我想问一下关于jqm异步请求的问题，我用$.ajax()在web浏览器中没有问题，但是一到手机上就获取不了数据，能否告知怎么解决？先谢过
1 楼 codingstandards 2011-08-29  
楼主继续努力
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Jquery mobile 从设计到开发

    jQuery Mobile 是一个广泛使用的框架，特别适合于移动设备和桌面浏览器。它允许开发者使用HTML5、CSS3和JavaScript来创建响应式网页应用。这个框架之所以在移动开发中受到青睐，是因为它可以将现有的网页转换成触摸...

    HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站_陈婉凌.pdf

    jQuery Mobile是一个轻量级的JavaScript库，专门用于简化移动设备上的Web开发。它提供了一套统一的事件处理、触控优化的用户界面组件（如按钮、下拉菜单、滑块等），以及页面导航和数据链接功能。jQuery Mobile的...

    移动新闻网站,掌上移动新闻,移动新闻客户端,jQuery Mobile移动新闻网站,移动新闻网站demo,新闻阅读器开发

    移动新闻网站和新闻阅读器开发是现代信息技术领域中不可或缺的一部分，尤其在智能手机普及的今天，人们越来越倾向于通过移动设备获取实时新闻和资讯。这个主题涵盖了多个技术层面，包括前端开发、移动应用设计以及...

    jQuery Mobile API文档

    jQuery Mobile是一款基于HTML5的用户界面系统，旨在使所有智能手机，平板电脑和桌面设备上都可以访问的响应网站和应用。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI...

    jQuery Mobile 所需要的部署文件

    jQuery Mobile 是一个轻量级的、基于 jQuery 库的框架，专为移动设备上的网页应用设计，它提供了丰富的用户界面（UI）组件和交互效果，让开发者能够快速构建响应式和触控友好的Web应用程序。这个资源包以“Hello ...

    使用JqueryMobile开发购物网站

    JqueryMobile是一款强大的前端框架，专为移动设备上的Web应用程序设计，提供了丰富的UI组件和交互效果。它基于HTML5，CSS3和jQuery库，使得开发者可以快速构建响应式、触摸友好的网页应用，特别适合用于购物网站的...

    手机模拟器+jQueryMobile教程

    总结，手机模拟器与jQueryMobile是移动开发中的得力工具。理解并熟练运用手机模拟器，能够高效地进行跨平台测试；掌握jQueryMobile，能够快速构建响应式、交互性强的移动Web应用。结合两者，开发者可以更加便捷地...

    jQuery Mobile源代码.zip

    jQuery Mobile 是一个流行的前端框架，专为移动设备设计，用于构建响应式和触控友好的网页应用。它基于 jQuery 和 jQuery UI，提供了丰富的组件、统一的事件处理以及优化的触控交互，使得开发者能够轻松创建跨平台、...

    构建跨平台APP jQuery Mobile移动应用实战代码

    2. **表单**：自动处理输入框、选择器和提交，确保在移动设备上友好。 3. **网格系统**：使用栅格布局，帮助你创建灵活的多列布局。 4. **可切换开关**：提供一种直观的切换选项，通常用于开启/关闭设置。 5. **下拉...

    jquerymobile设计完整例子

    学习这个例子，开发者可以快速掌握jQuery Mobile的核心功能，从而高效地开发出适应各种移动设备的交互式应用。无论是新手还是经验丰富的开发者，都能从中受益，提升其在移动Web开发领域的技能。

    jquery mobile 1.4.1版

    jQuery Mobile 是一个功能强大的前端框架，专门针对移动设备的网页开发而设计。在1.4.1版本中，它提供了一系列优化的CSS和JavaScript文件，使得开发者能够快速、高效地创建具有响应式布局和触摸友好的用户界面。这个...

    Jquery mobile 中文开发文档

    jQuery Mobile 是一个强大的、响应式的前端框架，专为创建移动设备上的交互式网页应用而设计。它基于 jQuery 库，提供了丰富的组件和API，使得开发者可以快速构建功能丰富的触屏优化网站和应用。这份中文开发文档将...

    jQueryMobile-HTML5模板

    **jQuery Mobile HTML5模板详解** ...总的来说，jQuery Mobile HTML5模板是学习和快速开发移动Web应用的宝贵资源，通过深入理解和实践，开发者能够提升在HTML5和jQuery Mobile上的技能，打造高质量的移动用户体验。

    jQuery Mobile开发源码 api文档中文

    jQuery Mobile是一款强大的前端框架，专为移动设备设计，旨在简化移动Web应用程序的开发。它基于jQuery库，提供了丰富的UI组件和交互功能，让开发者能够快速构建响应式和触控友好的网页应用。 jQuery Mobile的核心...

    使用jQuery Mobile移动开发框架将博客网站快速转化为Mobile网站

    【jQuery Mobile 移动开发框架】是一个强大的工具，专门用于构建适应移动设备的Web应用程序。这个框架基于jQuery库，提供了一套预设的UI组件和交互模式，简化了跨平台移动应用的开发工作。在本教程中，我们将探讨...

    jquery mobile官方git资源

    jQuery Mobile是一款专为触摸设备设计的前端框架，它基于jQuery库，简化了跨平台的移动Web应用开发。通过使用HTML5和CSS3，jQuery Mobile提供了一套统一的用户界面（UI）组件和交互模式，使得开发者可以快速创建功能...

    jQuery Mobile音乐播放实例源码

    通过使用jQuery Mobile 可以 "写更少的代码，做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页，且兼容所有移动设备。 lamp 不同设备使用了不同开发语言，jQuery Mobile可以很好的兼容不同的设备或操作...

    jQuery Mobile 开发跨平台移动应用

    jQuery Mobile 提供了一个统一的UI框架，这意味着无论是在哪种移动设备上运行，应用的外观和感觉都保持一致。这对于确保良好的用户体验至关重要。 **2.3 自适应布局** 为了适应不同尺寸的屏幕，jQuery Mobile 使用...

    jquery移动开发组件包

    jQuery Mobile 的核心设计理念是提供一致的跨平台用户体验，支持多种移动设备和浏览器，如 iOS、Android、Windows Phone 等。它通过自动的页面增强、触控友好的组件和可定制的主题系统，简化了移动 Web 应用的开发...

Magicbox
Global site tag (gtag.js) - Google Analytics