引自:[url]http://tech.it168.com/a2011/1209/1286/000001286393_all.shtml[/url]
随着移动互联世界的到来,目前已发展到多种移动操作系统割据的局面,而开发者则急需要能运用原有的开发知识和技能,快速方便地构建移动应用程序,并期望能运行在不同的手机操作平台上,比如Android,iOS,黑莓等。
而目前,出现了一批十分优秀的支持HTML5/CSS3的移动应用开发框架,其中最为大家熟悉的是jQuery Mobile框架(http:// jquerymobile.com),它可以让熟悉jQuery框架的开发者快速开发出基于HTML5的移动应用,而且直接通过手机的浏览器即可浏览。除此以外,jQuery Mobile也有很好的扩展性,用户可以很好地对其进行定制修改,本文将指导读者对jQuery Mobile的提供的主题样式进行自定义,从而创建符合用户需要的样式。
本文假设读者已具备初步的jQuery Mobile相关知识,如果读者不大了解jQuery Mobile,可以通过如下几篇文章进行学习,文章链接地址为:
统一接口工具JQuery Mobile简介
[url]http://tech.it168.com/a2010/1210/1136/000001136835.shtml[/url]
使用JQuery Mobile实现手机新闻浏览器
[url]http://tech.it168.com/a2011/0321/1168/000001168231.shtml[/url]
JQuery Mobile实现手机新闻浏览器(2)
[url]http://tech.it168.com/a2011/0323/1169/000001169682.shtml[/url]
使用jQuery Mobile实现新闻浏览器(3)
[url]http://tech.it168.com/a2011/0324/1170/000001170077.shtml[/url]
jQuery Mobile中的主题
在jQuery Mobile中,有一个建议的页面模版结构,其中包含了比如页面头部,页面主体和页脚等部分。jQuery Mobile使用HTML5中的data-role属性进行定义,下面的代码中就显示了一个主体页面的框架:
而另外一个建议使用的元素是标签,这个标签的作用是指定浏览器以何种方式在手机上显示网页,代码如下:
<meta viewport>标签对于在移动设备上正确显示移动网页是十分重要的,如果不使用该标签,则页面内容在显示时可能会失真或者变形,或者是根本不能适合移动设备浏览。在下图中,显示了一个使用标签的页面,可以看到,页面内容的显示能适合移动设备的大小。
jQuery Mobile中的主题
jQuery Mobile框架中,包含了一个页面主题的框架,它提供了对页面样式的相关控制功能。通过使用HTML5的data-theme属性标签,能轻易为某一个页面元素应用已有的jQuery Mobile的样式。默认的主题样式有5种,使用英文字母去区分,比如A-E开头的都内置的样式,开发者可以通过下载jQuery Mobile的代码中去学习了解这样样式文件是如何编写的。假如开发者要编写新的样式,可以使用F-Z字母中的任意一个去命名新建立的样式,然后就可以编写相关的代码。
页面的主题样式
我们先来看下如何定义页面主题样式。页面的主题样式是通过data-role来指定属性的值为page,再使用data-theme主题指定使用的样式,如下代码:
<div data-role="page" data-theme="f">
这里指定了使用一个新的主题样式,命名为”f”。实际上,jQuery mobile框架为自动为当前的页面增加对应的CSS样式,下面代码就是浏览器在执行代码后返回生成的代码:
可以看到,其中的样式class="ui-page ui-body-f ui-page-active"为jQuery mobile添加的样式。其中ui-page和ui-page-active为根据data-role的设定样式去进行设置赋值,而ui-body-f则为用户自定义的样式,下面是一个自定义的ui-body-f样式的代码:
在这个自定义的样式中,定义了背景颜色和字体。如果要对某一个移动页面中的某些元素进行自定义,也是可行的,可以使用的方法为在样式中指定页面的元素名,如下代码所示:
其中指定了对页面中的文本框和密码框,使用的是ui-body-f的CSS样式。
因此,只要掌握了这种方法,开发者就可以对页面中的各类元素进行样式的定义了,十分方便。
工具栏样式的定义
在jQuery Mobile框架中,工具条属于页面的头部和底部元素。为了将工具条定义为头部或者底部,可以使用data-role属性去指定,如下代码所示,表示在一个页面中同时定义了头部的工具栏和底部的工具栏:
同样,为页面的头部和底部指定一个样式也是很简单的,也是利用data-theme属性,如下代码所示:
为此,需要创建一个CSS样式,如下:
就是说,新创建的这个样式是装饰所有的data-theme为F的页面元素。然而,有的时候,可能需要页面的底部使用不同的样式,那么可以另外在新建一个名为g的样式,创建的代码如下:
在这个样式中,设置了一些基本的CSS3属性外,还为不同的浏览器设计了不同的背景颜色和相关的渐变背景,更详细的关于CSS3 渐变背景的设置请参考相关资料。
内容的主题样式
接下来,我们学习下在内容页部分,是如何应用主题样式的。例子代码如下:
注意,在这里,使用了data-role属性的值为collaspsible,表明这个页面的div是一个可折叠的层,并且设置了data-collapsed属性为true,其效果为当页面加载时,显示的是折叠状态,而当用户点标题栏时,才会显示登陆的表单。同样,在data-theme属性中设置样式为f,其样式定义如下:
在上面的这段CSS中,为标题工具栏定义了三种状态的样式,即:非激活,激活中和鼠标移动在上面。其中
的标签会被CSS修饰转变为一个带有ui-collapsible-heading的样式,而它包含的文字,这里是指“Login”将会被转化为带有样式的链接,其中有三种不同的链接的样式,分别为ui-btn-up-f,ui-btn-down-f,ui-btn-hover-f,分别代表的工具条的三种不同的状态(up,down,hover)。以上的样式中,会根据data-theme中指定的样式号而有所变化,比如开发者指定的是使用g的新样式,则以上的CSS样式中,则会全部以-g结尾。
列表样式
在移动页面应用中,列表样式是十分普遍的,因为它们很容易地导航。在jQuery Mobile中,使用列表很简单,只需要在data-role中指定为listview即可,如下代码所示:
默认的样式如下图所示:
列表样式开发
如果要上面的列表实现圆角效果的话,可以增加data-inset属性,并将其属性值设置为true即可,如下效果图,出现了圆角:
列表样式开发
同样,为列表增加样式也十分简单,只需要设置data-theme属性的值为样式的名称即可,比如同样增加样式f,定义样式f如下:
这里,设定了文字的颜色为白色,并且使用ui-btn-up-f,ui-btn-down-f,ui-btn-hover-f设置了列表选项的三种不同状态(up,down,hover)。
表单及按钮的主题样式
在jQuery mobile中,增加表单及按钮,其实跟普通的网页中增加差不多,只需要增加相关的input标签元素或button标签元素即可,代码示例如下:
同样,我们指定表单的样式如下:
这里我们在上文中已经谈到,即将输入文本框和密码框都使用f样式,在上面的代码中,请留意
标签一段,其中分别对两个按钮使用了不同的样式,对于RESET按钮,
使用的是默认的jQuery mobile的样式,而对submit按钮,则使用的是data-theme=f的样式,
最后看下f样式的css代码定义,如下:
本文的代码可以在如下这个连接下载(http://www.ibm.com/developerworks/apps/download/index.jsp?contentid=774893&filename=jquery-mobile-custom-themes.zip&method=http&locale= )
小结
本文讲解了如何在jQuery Mobile 框架中,自定义合适各种布局的样式主题,其中关键点在于使用data-theme属性指定和命名新建立的CSS样式,并且要注意样式的命名和编写要符合jQuery Mobile的规范即可,更多的关于jQuery Mobile自定义样式的内容,请参考其官方网站的文档指引。
随着移动互联世界的到来,目前已发展到多种移动操作系统割据的局面,而开发者则急需要能运用原有的开发知识和技能,快速方便地构建移动应用程序,并期望能运行在不同的手机操作平台上,比如Android,iOS,黑莓等。
而目前,出现了一批十分优秀的支持HTML5/CSS3的移动应用开发框架,其中最为大家熟悉的是jQuery Mobile框架(http:// jquerymobile.com),它可以让熟悉jQuery框架的开发者快速开发出基于HTML5的移动应用,而且直接通过手机的浏览器即可浏览。除此以外,jQuery Mobile也有很好的扩展性,用户可以很好地对其进行定制修改,本文将指导读者对jQuery Mobile的提供的主题样式进行自定义,从而创建符合用户需要的样式。
本文假设读者已具备初步的jQuery Mobile相关知识,如果读者不大了解jQuery Mobile,可以通过如下几篇文章进行学习,文章链接地址为:
统一接口工具JQuery Mobile简介
[url]http://tech.it168.com/a2010/1210/1136/000001136835.shtml[/url]
使用JQuery Mobile实现手机新闻浏览器
[url]http://tech.it168.com/a2011/0321/1168/000001168231.shtml[/url]
JQuery Mobile实现手机新闻浏览器(2)
[url]http://tech.it168.com/a2011/0323/1169/000001169682.shtml[/url]
使用jQuery Mobile实现新闻浏览器(3)
[url]http://tech.it168.com/a2011/0324/1170/000001170077.shtml[/url]
jQuery Mobile中的主题
在jQuery Mobile中,有一个建议的页面模版结构,其中包含了比如页面头部,页面主体和页脚等部分。jQuery Mobile使用HTML5中的data-role属性进行定义,下面的代码中就显示了一个主体页面的框架:
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
而另外一个建议使用的元素是标签,这个标签的作用是指定浏览器以何种方式在手机上显示网页,代码如下:
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta viewport>标签对于在移动设备上正确显示移动网页是十分重要的,如果不使用该标签,则页面内容在显示时可能会失真或者变形,或者是根本不能适合移动设备浏览。在下图中,显示了一个使用标签的页面,可以看到,页面内容的显示能适合移动设备的大小。
jQuery Mobile中的主题
jQuery Mobile框架中,包含了一个页面主题的框架,它提供了对页面样式的相关控制功能。通过使用HTML5的data-theme属性标签,能轻易为某一个页面元素应用已有的jQuery Mobile的样式。默认的主题样式有5种,使用英文字母去区分,比如A-E开头的都内置的样式,开发者可以通过下载jQuery Mobile的代码中去学习了解这样样式文件是如何编写的。假如开发者要编写新的样式,可以使用F-Z字母中的任意一个去命名新建立的样式,然后就可以编写相关的代码。
页面的主题样式
我们先来看下如何定义页面主题样式。页面的主题样式是通过data-role来指定属性的值为page,再使用data-theme主题指定使用的样式,如下代码:
<div data-role="page" data-theme="f">
这里指定了使用一个新的主题样式,命名为”f”。实际上,jQuery mobile框架为自动为当前的页面增加对应的CSS样式,下面代码就是浏览器在执行代码后返回生成的代码:
<div data-role="page" data-theme="f"
class="ui-page ui-body-f ui-page-active" style="min-height: 580px;">
可以看到,其中的样式class="ui-page ui-body-f ui-page-active"为jQuery mobile添加的样式。其中ui-page和ui-page-active为根据data-role的设定样式去进行设置赋值,而ui-body-f则为用户自定义的样式,下面是一个自定义的ui-body-f样式的代码:
.ui-body-f {
background-color: #f9f9f9;
font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif;
}
在这个自定义的样式中,定义了背景颜色和字体。如果要对某一个移动页面中的某些元素进行自定义,也是可行的,可以使用的方法为在样式中指定页面的元素名,如下代码所示:
.ui-body-f input[type="text"],
.ui-body-f input[type="password"] {
background-color: #ccc;
}
其中指定了对页面中的文本框和密码框,使用的是ui-body-f的CSS样式。
因此,只要掌握了这种方法,开发者就可以对页面中的各类元素进行样式的定义了,十分方便。
工具栏样式的定义
在jQuery Mobile框架中,工具条属于页面的头部和底部元素。为了将工具条定义为头部或者底部,可以使用data-role属性去指定,如下代码所示,表示在一个页面中同时定义了头部的工具栏和底部的工具栏:
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
同样,为页面的头部和底部指定一个样式也是很简单的,也是利用data-theme属性,如下代码所示:
<div data-role="header" data-theme="f">
<h1>Page Title</h1>
</div>
为此,需要创建一个CSS样式,如下:
.ui-bar-f {
padding: 10px 0px;
background-color: #069;
border-bottom: 2px solid #036;
color: #fff;
}
就是说,新创建的这个样式是装饰所有的data-theme为F的页面元素。然而,有的时候,可能需要页面的底部使用不同的样式,那么可以另外在新建一个名为g的样式,创建的代码如下:
.ui-bar-g {
margin-top: 20px;
padding: 10px 0;
color: #fff;
border-bottom: 2px solid #000;
background-color: #000;
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(0,0,0,0.65) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
rgba(204,204,204,1)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,
rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%);
/* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%);
/* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc',
endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%);
/* W3C */
}
在这个样式中,设置了一些基本的CSS3属性外,还为不同的浏览器设计了不同的背景颜色和相关的渐变背景,更详细的关于CSS3 渐变背景的设置请参考相关资料。
内容的主题样式
接下来,我们学习下在内容页部分,是如何应用主题样式的。例子代码如下:
<div data-role="collapsible" data-collapsed="true" data-theme="f">
<h3>>Login</h3>
Login form will go here
</div>
注意,在这里,使用了data-role属性的值为collaspsible,表明这个页面的div是一个可折叠的层,并且设置了data-collapsed属性为true,其效果为当页面加载时,显示的是折叠状态,而当用户点标题栏时,才会显示登陆的表单。同样,在data-theme属性中设置样式为f,其样式定义如下:
ui-body-f .ui-collapsible-contain
.ui-collapsible-heading .ui-btn-up-f {
background: #666;
color: #fff;
text-decoration: none;
}
.ui-body-f .ui-collapsible-contain
.ui-collapsible-heading .ui-btn-down-f,
.ui-body-f .ui-collapsible-contain
.ui-collapsible-heading .ui-btn-hover-f {
background: #999;
color: #fff;
text-decoration: none;
}
在上面的这段CSS中,为标题工具栏定义了三种状态的样式,即:非激活,激活中和鼠标移动在上面。其中
的标签会被CSS修饰转变为一个带有ui-collapsible-heading的样式,而它包含的文字,这里是指“Login”将会被转化为带有样式的链接,其中有三种不同的链接的样式,分别为ui-btn-up-f,ui-btn-down-f,ui-btn-hover-f,分别代表的工具条的三种不同的状态(up,down,hover)。以上的样式中,会根据data-theme中指定的样式号而有所变化,比如开发者指定的是使用g的新样式,则以上的CSS样式中,则会全部以-g结尾。
列表样式
在移动页面应用中,列表样式是十分普遍的,因为它们很容易地导航。在jQuery Mobile中,使用列表很简单,只需要在data-role中指定为listview即可,如下代码所示:
<ul data-role="listview" data-inset="true" data-theme="f">
<li><a href="#">Title name</a></li>
<li><a href="#">Title name</a></li>
<li><a href="#">Title name</a></li>
</ul>
默认的样式如下图所示:
列表样式开发
如果要上面的列表实现圆角效果的话,可以增加data-inset属性,并将其属性值设置为true即可,如下效果图,出现了圆角:
列表样式开发
同样,为列表增加样式也十分简单,只需要设置data-theme属性的值为样式的名称即可,比如同样增加样式f,定义样式f如下:
.ui-listview .ui-btn-up-f a,
.ui-listview .ui-btn-down-f a,
.ui-listview .ui-btn-hover-f a {
color: #fff;
}
这里,设定了文字的颜色为白色,并且使用ui-btn-up-f,ui-btn-down-f,ui-btn-hover-f设置了列表选项的三种不同状态(up,down,hover)。
表单及按钮的主题样式
在jQuery mobile中,增加表单及按钮,其实跟普通的网页中增加差不多,只需要增加相关的input标签元素或button标签元素即可,代码示例如下:
<div data-role="collapsible" data-collapsed="true" data-theme="f">
<h3>>Login</h3>
<form action="" method="post">
<label for="username">Username</label>
<input type="text" name="username" id="username" />
<label for="username">Password</label>
<input type="password" name="password" id="password" />
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<button type="reset" data-inline="true">Reset</button>
</div>
<div class="ui-block-b">
<button type="submit" data-inline="true" data-theme="f">Submit</button>
</div>
</fieldset>
</form>
</div>
同样,我们指定表单的样式如下:
.ui-body-f input[type="text"],
.ui-body-f input[type="password"] {
background-color: #ccc;
}
这里我们在上文中已经谈到,即将输入文本框和密码框都使用f样式,在上面的代码中,请留意
标签一段,其中分别对两个按钮使用了不同的样式,对于RESET按钮,
使用的是默认的jQuery mobile的样式,而对submit按钮,则使用的是data-theme=f的样式,
最后看下f样式的css代码定义,如下:
.ui-btn-up-f {
background: -moz-linear-gradient(top, rgba(57,107,158,1) 0%,
rgba(78,137,197,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
rgba(57,107,158,1)), color-stop(100%,rgba(78,137,197,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(57,107,158,1) 0%,
rgba(78,137,197,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(57,107,158,1) 0%,
rgba(78,137,197,0.65) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(57,107,158,1) 0%,
rgba(78,137,197,0.65) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#396b9e',
endColorstr='#a64e89c5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(57,107,158,1) 0%,
rgba(78,137,197,0.65) 100%); /* W3C */
border: 1px solid #225377;
text-shadow: #225377 0px -1px 1px;
color: #fff;
}
.ui-btn-down-f,
.ui-btn-hover-f {
background: -moz-linear-gradient(top, rgba(114,176,212,1) 0%,
rgba(75,136,182,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
rgba(114,176,212,1)), color-stop(100%,rgba(75,136,182,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(114,176,212,1) 0%,
rgba(75,136,182,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(114,176,212,1) 0%,rgba(75,136,182,0.65) 100%);
/* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(114,176,212,1) 0%,
rgba(75,136,182,0.65) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72b0d4',
endColorstr='#a64b88b6',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(114,176,212,1) 0%,rgba(75,136,182,0.65) 100%);
/* W3C */
border: 1px solid #00516E;
text-shadow: #014D68 0px -1px 1px;
color: #fff;
}
本文的代码可以在如下这个连接下载(http://www.ibm.com/developerworks/apps/download/index.jsp?contentid=774893&filename=jquery-mobile-custom-themes.zip&method=http&locale= )
小结
本文讲解了如何在jQuery Mobile 框架中,自定义合适各种布局的样式主题,其中关键点在于使用data-theme属性指定和命名新建立的CSS样式,并且要注意样式的命名和编写要符合jQuery Mobile的规范即可,更多的关于jQuery Mobile自定义样式的内容,请参考其官方网站的文档指引。