欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

jquery mobile 移动设备下网页开发总结

更新时间: 2014-01-05 01:55:54 责任编辑: Author_N1

 

JQuery Mobile 移动设备上网页开发总结
经过一个半月的摸索,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在移动设备网页上运用的不足:
   待续。。




开个头,有空随时更新 。。
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 01:55:54
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/3264/
本文WWW.DOC100.NET DOC100.NET版权所有。