- 浏览: 150823 次
- 性别:
- 来自: 福建
文章分类
最新评论
-
caibinghong:
Ahua772 写道非常好,谢谢了,但是运行的图片怎么没有加载 ...
用于WebKit的CSS诀窍 -
Ahua772:
非常好,谢谢了,但是运行的图片怎么没有加载出来呢
用于WebKit的CSS诀窍 -
caibinghong:
呃是一个方法,现在改过来了,当时考的时候没有改!现在最底层是i ...
关于innerHTML 赋值问题 -
jayrao5566:
js的正确写法不是 .innerHTML = '<op ...
关于innerHTML 赋值问题 -
caibinghong:
在JQ与EXT里都解决的挺好的。http://caibingh ...
关于innerHTML 赋值问题
在之前的文章jQuery Mobile 入门教程里,我对jQueryMobile的使用进行了入门介绍,你可以使用它创造出非常华丽的移动站点——漂亮的按钮、优雅的界面等等等等。 然而仅仅是这样的话,你的需求肯定不会被满足的——你或许需要给header换个颜色来配合自己公司的logo?又或者需要突出显示一下某个静音按钮?总而言之,你需要自己控制jQueryMobile的显示效果。本文旨在介绍教大家如何在jQueryMobile构建的站点中控制主题显示的效果。 很显然,jQueryMobile是用CSS来控制在屏幕中的显示效果的,而在CSS文档中又包含两个主要的部分: 注意:为了尽量减少图片的使用(目的是减少请求数),jQueryMobile使用了css3的方式来替代传统的图片方式创建按钮等控件。当然用图片来设计也可以,但这并不是推荐的。 jQueryMobile中的每一个主题都可以包含一个或多个调板。调板主要用于设置工具栏、页面区块、按钮和列表的颜色。调板可以很方便的切换主题中的配色方案。 调板的设计思想是为了快速的切换已有网站的主题,在你使用默认主题的时候,可能偶尔需要更改某一些按钮的颜色来表示强调(如“试一试”按钮)或者弱化(如“不关注”按钮),这时便可以定义特定调板来完成。 jQueryMobile默认的CSS文件中包含五个调板(a、b、c、d、e),按照惯例,a是优先级最高的调板,默认为黑色(如下图): 以下是默认主题所规定的五种调板和其含义: jQueryMobile内建了主题控制相关模块。调板可以使用data-theme属性来控制。如果你不指定data-theme属性,将默认采用a调板。以下代码定义了一个采用默认调板的页面: 使用不同的调板: 从代码结构上看是一样的,仅仅使用一个data-theme="e"便可以将整个页面切换为黄色色调: 默认情况下页面上所有的控件都会继承page上设置的调板,这意味着你只需设置一次便可以更改整个page: 当然你也可以独立设置不同元素的调板,同样设置元素的data-theme属性来实现: 只是添加一个data-theme属性,改改HTML代码肯定不能使你满足,修改CSS代码可以让你控制更多的可视效果:边框、位置、边距等等。jQueryMobile的css代码定义在jquery.mobile-1.0b1.css文件中。 注意:当前版本的css文件是beta 1版本(译注:截止到译文发布时,jQueryMobile版本为beta 2),最终版本肯定会更改此文件。所以你要注意在版本更新后替换你修改过的文件名。 在这里下载jQueryMobile的文件后,让我们开始准备编辑css文件吧!像本文之前说的,css文件定义了主题和结构两部分。在主题部分定义了五个默认的主题。 所有调板几乎都是一样的代码结构,每种调板前面都有注释指明了它是哪种调板,比如以下是a调板的部分代码: 可以看到类名(ui-bar-a)有着特定的结构,后缀(a)指明了其所属调板,类ui-bar则控制着footer和header的显示。由于并没有使用图片,因此该类依赖于css3的文本阴影、渐变等效果。同理,b调板的类名为ui-bar-b。惊喜的是,你可以创建你自己的调板,并命名为类似ui-bar-x的结构即可(下文详述)。 如果你直接引用你自己服务器上的css文件,你可以直接在原始文件上修改(当然,最好还是留下一个备份),下例就将默认a调板中的文字颜色修改成了红色: css文件的前600行(译注:新版是566行)都是定义五种调板的,其余的代码用来定义一些通用特性,比如按钮的圆角等。下例是圆角相关的css代码: 这些class都是通用的,他们不依赖于特定的调板,每一个class都控制一个特定类型的圆角,由于浏览器对CSS3支持的不一致导致了每一个class里面都写有三行表示相同含义的代码。 css文件里包含许多class,你可以按需修改它们。 当你准备创建自己的主题时,我还是建议你对原始主题进行备份。修改css如下几步即可: 如何测试,将在下文详述。 jQueryMobile默认的主题各方面都非常好,唯一我想更改的就是调板。 要更改调板你有两个选择。一是像上文所诉的那样修改原始的文件,这样可能导致你的代码不易管理——尤其在jQuery更新版本的时候。 第二个选择是充分利用CSS的扩展性仅创建独立的调板文件,这样做可以不用修改原始的jQueryMobile文件,你的文件也更容易维护。 以下步骤展示了如何创建新的调板: 现在你可以开始修改具体的css代码了。当然,你可以更改任何你想更改的代码,以下例子中将更改按钮的背景,涉及到的class有: 可以看到代码组织结构都是相同的,原始的.ui-btn-down-i代码如下: 每一个按钮都采用了渐变的背景,如需修改颜色,请修改包含background, background-image, 和 -ms-filter属性的值。对于background-image 和-ms-filter属性而言,你需要设置渐变色的开始值和结束值,例如从浅绿(66FF79)渐变到深绿(00BA19): 因为不同的浏览器使用不同的机制来处理渐变,你需要在三个地方修改代码。这本例中第第一个background-image属性是Firefox浏览器专属的,第二个则是webkit内核浏览器专属(safari或者chrome),-ms-filter自然就就是微软的IE了。尽管语法有点各自为政,但基本还是有着同样的模式:均包含开始色和结束色。 每个调板都包含20多个class可以修改,你无须全部更改它们。在大多数情况下只需修改你想要修改的部分就可以了。 jQueryMobile一个特别大的优势就是它仅使用css来控制显示效果,这使得你可以最大程度上灵活控制你网站的显示。举例来说,本文附件中包含的f调板 (jquery-mobile-swatch-f.css)使用@font-face在页面中嵌入了许多字体。 每一个主题只能有26个调板(a-z),要使用他们只需要链接到你的页面就行了,下例展示了如何使用两个自定义调板: 然后你需要做的就是使用data-theme属性: 现目前我们修改jQueryMobile主题还都只能局限于修改css文件,幸运的是jQueryMobile团队正致力于开发jQueryMobile的可视化主题编辑器。根据官方网站的说法,此编辑器将于2011年jQueryMobile1.0正式发布时随同发布。 jQueryUI项目所包含的主题编辑器可以让你轻易创建自定义主题,而jQueryMobile项目的主题编辑器将会更加高效。 当然,主题编辑器会带来巨大的方便,但是我仍然建议你试着手写css代码来创建主题,这样能使你更好的理解jQueryMobile的主题系统是如何工作的。 上面介绍了这么多技术,相信你也是跃跃欲试了,如果有条件的话我建议你使用Dreamweaver来替代普通的文本编辑器,这样能使你更高效的编辑和而管理你的文件。 如果你有自己的web服务器,你可以托管你的文件上去,否则你只能直接在你的移动设备上打开你的网站。在电脑上本地测试时我建议你使用chrome来打开你的网站。 以下展示了主题修改的完整步骤: css相关知识对创建jQueryMobile主题是非常有帮助的。http://www.css3.info/包含许多 css3的知识,快速学习css3相关属性可以参考printable cheat sheet from Smashing Magazine。 有关jQueryMobile主题的更多细节可以参考jQuery themes page。jQueryMobile的主题(theme)和调板(swatches)
如何使用默认调板
<div data-role="page" id="page">
<div data-role="header">
<h1>Sample Page</h1>
</div>
<div data-role="content">
<p>I'm a sample page!</p>
</div>
</div><div data-role="page" id="page" data-theme="e">
<div data-role="header">
<h1>Sample Page</h1>
</div>
<div data-role="content">
<p>I'm a sample page!</p>
</div>
</div><div data-role="page" id="page" data-theme="e">
<div data-role="page" id="page">
<div data-role="header" data-theme="c">
<h1>Header</h1>
</div>
<div data-role="content" data-theme="d">
<p>Content</p>
<p> </p>
<ul data-role="listview" data-theme="b">
<li><a href="#page1">Page 1</a></li>
</ul>
<div data-role="collapsible-set">
<div data-role="collapsible" data-theme="b">
<h3>Header</h3>
<p>Content</p>
</div>
<div data-role="collapsible" data-collapsed="true" data-theme="a">
<h3>Header</h3>
<p>Content</p>
</div>
<div data-role="collapsible" data-collapsed="true" data-theme="e">
<h3>Header</h3>
<p>Content</p>
</div>
</div>
</p>
<p> <a href="#page4" data-role="button" data-icon="arrow-d" data-iconpos="left" data-theme="e">Go To Page 4</a></p>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>创建自己的主题
编辑调板
/* A -----------------------------------------------------------------------------------------------------------*/
.ui-bar-a {
border: 1px solid #2A2A2A;
background:#111111;
color:#ffffff;
font-weight: bold;
text-shadow: 0 -1px 1px #000000;
background-image: -moz-linear-gradient(top, #3c3c3c, #111111);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#3c3c3c),color-stop(1,#111111));
-ms-filter: "progidXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')"; }.ui-bar-a {
border: 1px solid #2A2A2A;
background:#111111;
color:red;
font-weight: bold;
text-shadow: 0 -1px 1px #000000;
background-image: -moz-linear-gradient(top, #3c3c3c, #111111);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#3c3c3c),color-stop(1,#111111));
-ms-filter: "progidXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')"; }修改其他样式
.ui-btn-corner-tl {
-moz-border-radius-topleft: 1em;
-webkit-border-top-left-radius:1em;
border-top-left-radius:1em;
}
.ui-btn-corner-tr {
-moz-border-radius-topright: 1em;
-webkit-border-top-right-radius:1em;
border-top-right-radius:1em;
}
.ui-btn-corner-bl {
-moz-border-radius-bottomleft: 1em;
-webkit-border-bottom-left-radius:1em;
border-bottom-left-radius:1em;
}
.ui-btn-corner-br {
-moz-border-radius-bottomright:1em;
-webkit-border-bottom-right-radius: 1em;
border-bottom-right-radius: 1em;
}
.ui-btn-corner-top {
-moz-border-radius-topleft: 1em;
-webkit-border-top-left-radius:1em;
border-top-left-radius:1em;
-moz-border-radius-topright: 1em;
-webkit-border-top-right-radius:1em;
border-top-right-radius:1em;
}
.ui-btn-corner-bottom {
-moz-border-radius-bottomleft: 1em;
-webkit-border-bottom-left-radius:1em;
border-bottom-left-radius:1em;
-moz-border-radius-bottomright:1em;
-webkit-border-bottom-right-radius: 1em;
border-bottom-right-radius: 1em;
}
.ui-btn-corner-right {
-moz-border-radius-topright: 1em;
-webkit-border-top-right-radius:1em;
border-top-right-radius:1em;
-moz-border-radius-bottomright:1em;
-webkit-border-bottom-right-radius: 1em;
border-bottom-right-radius: 1em;
}
.ui-btn-corner-left {
-moz-border-radius-topleft: 1em;
-webkit-border-top-left-radius:1em;
border-top-left-radius:1em;
-moz-border-radius-bottomleft: 1em;
-webkit-border-bottom-left-radius:1em;
border-bottom-left-radius:1em;
}
.ui-btn-corner-all {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}完成更改!
如何创建自定义调板
如何创建独立的调板文件
修改具体的样式
.ui-btn-down-i {
border: 1px solid #000;
background: #3d3d3d;
font-weight: bold;
color: #fff;
text-shadow: 0 -1px 1px #000;
background-image: -moz-linear-gradient(top,
#333333,
#5a5a5a);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #333333),
color-stop(1, #5a5a5a));
-ms-filter: "progidXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#5a5a5a')";
}.ui-btn-down-i {
border: 1px solid #000;
background:#00BA19;
font-weight: bold;
color:#fff;
text-shadow: 0 -1px 1px #000;
background-image: -moz-linear-gradient(top, #66FF79, #00BA19);
background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #66FF79),color-stop(1,#00BA19));
-ms-filter: "progidXImageTransform.Microsoft.gradient(startColorStr='#66FF79', EndColorStr='#00BA19')";
}如何使用新的调板
<link rel="stylesheet" type="text/css" href=" jquery.mobile-1.0b1.css "/>
<link rel="stylesheet" type="text/css" href="jquery-mobile-swatch-i.css"/>
<link rel="stylesheet" type="text/css" href="jquery-mobile-swatch-r.css"/><div data-role="page" id="page">
<div data-role="header" data-theme="r">
<h1>Header</h1>
</div>
<div data-role="content" data-theme="i">
<p>Content</p>
<p> </p>
<div data-role="collapsible-set">
<div data-role="collapsible" data-theme="i">
<h3>Header</h3>
<p>Content</p>
</div>
<div data-role="collapsible" data-collapsed="true" data-theme="i">
<h3>Header</h3>
<p >Content</p>
</div>
<div data-role="collapsible" data-collapsed="true" data-theme="i">
<h3>Header</h3>
<p>Content</p>
</div>
</div>
</p>
<p> <a href="#page4" data-role="button" data-icon="arrow-d" data-iconpos="left" data-theme="i">Go To Page 4</a></p>
</div>
<div data-role="footer" data-theme="r">
<h4>Footer</h4>
</div>
</div>开发中的主题编辑器(ThemeRoller)
最后一步,测试你的主题
<!DOCTYPE html />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample Page</title>
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.0b1.css"/>
<script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" data-theme="e">
<h1>Sample Page</h1>
</div>
<div data-role="content">
<p>I'm a sample page!</p>
</div>
<a href="#page2" data-role="button" data-icon="arrow-d" data-iconpos="left" data-theme="e">Button</a>
</div>
</body>
</html>
上面代码中第一行是HTML5的文档声明,老旧的浏览器将会忽略它。
head元素中引用了jQueryMobile的三个核心文件:
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.0b1.css"/>
<script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
其中,第一行是本地的css文件,当然,如果你不需要更改样式的话你也可以使用jQuery官网提供的cdn。二三两行链接到jQuery和jQueryMobile的js文件——来自CDN。
body元素包含了屏幕中将被显示的内容。使用了header、footer、list等组件,更多详情请参见[翻译]jQuery Mobile 入门教程。color: red;
<link rel="stylesheet" type="text/css" href="jquery.mobile.theme.css"/>
现在你可以按照前文所述步骤创建独立的调板文件来试试。<link rel="stylesheet" type="text/css" href="jquery-mobile-i.css"/>
<a href="#page4" data-role="button" data-icon="arrow-d" data-iconpos="left" data-theme="i">Button</a>
接下来呢?
发表评论
-
移动web资源整理
2016-05-12 10:42 5482013年初接触移动端,简单做下总结,首先了解下移动we ... -
移动端开发小结
2012-05-17 11:31 10801.viewport viewport就是除去所有工具 ... -
CSS3动画库,很棒哦
2012-05-17 11:30 789官网地址Animate CSS官网地址 Github地 ... -
IOS下Safari渲染Transition时页面闪动Bug
2012-05-17 11:30 5955http://classjs.com/category/tec ... -
移动平台WEB前端开发技巧汇总
2012-05-17 11:29 0原名《移动平台3G手机网站前端开发布局技巧汇总》,由武方 ... -
iScroll框架解析(翻译)
2011-11-03 17:08 1648iScroll框架解析(翻译)http://cubiq.org ... -
你需要了解的 10 个 jQuery mobile 贴士和代码片段
2011-09-05 10:45 10881. 一个完整的基本页面 <!DOCTY ... -
jQuery Mobile优秀网站及资源汇总贴
2011-09-05 10:18 24081、JQM 案例展示:http://www.jqmgaller ... -
指尖下的js —— 多触式web前端开发之三:处理复杂手势
2011-08-31 10:10 1150指尖下的js —— 多触式web前端开发之三:处理复杂手势 ... -
指尖下的js ——多触式web前端开发之二:处理简单手势
2011-08-31 10:09 1158指尖下的js ——多触 ... -
指尖下的js ——多触式web前端开发之一:对于Touch的处理
2011-08-31 10:08 1260水果公司的那些small an ... -
用于WebKit的CSS诀窍
2011-08-31 09:55 1288使用在WebKit中可用的CSS高级特性,可以为你的网站或 ... -
webkit webApp 开发技术要点总结
2011-08-31 09:51 1431webkit webApp 开发技术要点总结 ...
相关推荐
jQuery_Mobile入门教程——主题的使用和定制.docx jQuery_Mobile使用指南.doc jQuery_Mobile中文手册.pdf jQuery Mobile 开发跨平台移动应用1.0.pdf JqueryMobile+Jsp整合开发的DEMO.docx jqueryMobileA4中文手册....
《jQuery Mobile快速入门245页完整版》是一份详尽的教程,旨在帮助初学者和开发者迅速掌握jQuery Mobile框架的使用。jQuery Mobile是基于jQuery库的轻量级、跨平台的移动应用开发框架,特别适合构建触屏优化的移动...
综上所述,"jQuery Mobile快速入门源码"涵盖了从基本页面构建到复杂组件使用的全方位实例,是深入学习jQuery Mobile不可或缺的参考资料。通过这些源码,你可以逐步掌握如何构建适应各种移动设备的交互式Web应用。在...
### jQuery Mobile 开发入门手册——知识点详解 #### 概述 jQuery Mobile 是一款基于 jQuery 的移动设备框架,专为智能手机和平板电脑等移动设备设计。它提供了一套完整的 UI 组件,可以快速构建美观且功能丰富的...
### jQuery Mobile (HTML5) 入门教程第二篇——深入理解UI Grid布局 #### 四、jQuery Mobile 布局详解 在本章节中,我们将详细介绍 jQuery Mobile 中一种非常实用的布局方式——UI Grid(网格布局)。对于移动设备...
6. **license_freeware.txt**:框架的许可协议,规定了使用和分发的条款。 7. **readme.txt**:通常包含安装指南、快速入门示例和其他重要信息。 8. **locale**:包含了多种语言的本地化资源,使得EasyUI能够支持多...
- **可扩展性**:支持自定义插件和主题,可以根据项目需求进行个性化定制。 - **案例分析**: - **案例1**:[http://kayosite.com/web-app-by-jquery-mobile-and-html5-directory.html]...
总之,这个教程为想要涉足移动开发的前端开发者提供了实践基础,通过学习和实践,他们可以掌握构建混合移动应用的关键技能,理解Web技术与原生平台之间的桥梁——Cordova的工作原理。在实际开发过程中,开发者还需要...
- **Ubuntu 11.04 使用 Unity 作为默认桌面环境:** Unity界面的设计理念是简化操作流程,使其更加直观易用,这反映了Linux桌面环境的发展趋势——更加注重用户体验。 #### 互联网 - **Firefox 4 时代 Firebug 的...