经过一个半月的摸索,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在移动设备网页上运用的不足:
待续。。
开个头,有空随时更新 。。
分享到:
相关推荐
jQuery Mobile是一款基于HTML5的用户界面系统,旨在使所有智能手机,平板电脑和桌面设备上都可以访问的响应网站和应用。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI...
通过使用jQuery Mobile 可以 "写更少的代码,做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页,且兼容所有移动设备。 lamp 不同设备使用了不同开发语言,jQuery Mobile可以很好的兼容不同的设备或操作...
资源名称:jQuery Mobile构建时髦的手机Web网站内容简介:手机网站(新旧对比)jQuery Mobile 简单介绍一个最简单的 jQuery Mobile 网页使用 jQuery Mobile 开发手机网站jQuery Mobile 支持的设备jQuery Mobile 的...
jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能...
本书以HTML与CSS为主,配合jQuery制作网页,并搭配jQuery Mobile制作移动网页,通过具体的范例从基础到高级循序渐进地讲解。全书首先介绍了HTML5网页开发和CSS网页美化,只要按本书的顺序学习,就能够轻松掌握网页...
jQuery Mobile(jQueryMobile) 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile...
jQuery Mobile[1-2]是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能...
jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发...
jQuery Mobile[1-2]是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能...
jQuery Mobile 是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发...
jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发...
jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能...
jQuery Mobile(jQueryMobile)是jQuery在手机上和平板设备上的版本。jQuery Mobile不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。构建/定制: 当前...
jQuery Mobile(jQueryMobile)是jQuery在手机上和平板设备上的版本。jQuery Mobile不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。 构建/定制: 当前...
jQuery Mobile项目(jQuery框架中的一个组件)是一个基于HTML5的开发框架,在它的帮助下,开发者可以设计出能够适配目前主流移动设备和桌面系统的响应式Web站点以及应用程序。实际上,jQuery Mobile不仅可以为主流...
为紧跟网站推出“移动版”的潮流,书中列举了 如何根据网络设备,自动切换pc版网页和移动版网页 ,另辟专门章节讲解如何使用jquery mobile快速开 发移动版网站,以及如何在移动版网站内使用php与 mysol进行数据库...
摘要:脚本资源,jQuery,jQuery下载 jQuery.Mobile.js jQuery移动版...jQuery移动版Beta 1比原始版本更快,更强的可扩展性能更好的支持动态JS驱动的网站,兼容性更好,增加更广泛的设备支持,例如智能手机、平板电脑等。
第三部分主要介绍目前比较流行的两套JavaScript移动开发框架jQuery Mobile、Sencha Touch,以及PhoneGap,并配备丰富的例子作为实践;第四部分主要结合Sencha Touch框架库和HTML5技术构建进行讲解,旨在帮助读者将...
全书分为11章,包含网页效果、DOM元素与属性、HTML事件、CSS样式、用户输入自动完成、拖放、图形图像、AJAX、算法、jQuery Mobile应用、浏览器、Cookies等jQuery技术内容,对提高网站开发人员和设计人员的jQuery技术...