现在位置首页 / 生活多美好 /正文

jQuery Mobile入门教程——主题的使用和定制

作者: IT小兵 | 2013年8月6日| 热度:℃ | 评论: |参与:

原作:Using and customizing jQuery Mobile themes   —— Matthew David

翻译:filod

转载声明:请注明原作者、翻译者以及译文链接。


在之前的文章jQuery Mobile 入门教程里,我对jQueryMobile的使用进行了入门介绍,你可以使用它创造出非常华丽的移动站点——漂亮的按钮、优雅的界面等等等等。

然而仅仅是这样的话,你的需求肯定不会被满足的——你或许需要给header换个颜色来配合自己公司的logo?又或者需要突出显示一下某个静音按钮?总而言之,你需要自己控制jQueryMobile的显示效果。本文旨在介绍教大家如何在jQueryMobile构建的站点中控制主题显示的效果。

jQueryMobile的主题(theme)和调板(swatches)

很显然,jQueryMobile是用CSS来控制在屏幕中的显示效果的,而在CSS文档中又包含两个主要的部分:

  • 结构:用于控制元素(如按钮、tab等)的在屏幕中显示的位置,内外边距等。

  • 主题:用于控制可视元素的视觉效果,例如字体、颜色、渐变、阴影、圆角等。你可以通过修改主题来控制可视元素(如按钮)的效果。

注意:为了尽量减少图片的使用(目的是减少请求数),jQueryMobile使用了css3的方式来替代传统的图片方式创建按钮等控件。当然用图片来设计也可以,但这并不是推荐的。

jQueryMobile中的每一个主题都可以包含一个或多个调板。调板主要用于设置工具栏、页面区块、按钮和列表的颜色。调板可以很方便的切换主题中的配色方案。

调板的设计思想是为了快速的切换已有网站的主题,在你使用默认主题的时候,

可能偶尔需要更改某一些按钮的颜色来表示强调(如“试一试”按钮)或者弱化(如“不关注”按钮),这时便可以定义特定调板来完成。

jQueryMobile默认的CSS文件中包含五个调板(a、b、c、d、e),按照惯例,a是优先级最高的调板,默认为黑色(如下图):

以下是默认主题所规定的五种调板和其含义:

  1. a:最高优先级,黑色

  2. b:优先级次之,蓝色

  3. c:基准优先级,灰色

  4. d:可选优先级,灰白色

  5. e:表示强调,黄色

如何使用默认调板

jQueryMobile内建了主题控制相关模块。调板可以使用data-theme属性来控制。如果你不指定data-theme属性,

将默认采用a调板。以下代码定义了一个采用默认调板的页面:

复制代码
  
    Sample Page
  
  
    I'm a sample page!
复制代码

  

使用不同的调板:

复制代码
  
    Sample Page
  
  
    I'm a sample page!
复制代码

  

从代码结构上看是一样的,仅仅使用一个data-theme="e"便可以将整个页面切换为黄色色调:

默认情况下页面上所有的控件都会继承page上设置的调板,这意味着你只需设置一次便可以更改整个page:

<div data-role="page" id="page" data-theme="e">

  

当然你也可以独立设置不同元素的调板,同样设置元素的data-theme属性来实现:

复制代码
  
    Header
  
  
    Content
        
    
      Page 1
     
      
        Header
        Content
      
      
        Header
        Content
      
      
        Header
        Content
      
    
    
Go To Page 4
  
  
    Footer
复制代码

  

创建自己的主题

只是添加一个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如下几步即可:

  1. 打开jquery.mobile-1.0b1.css,另存为其他名字,例如:jquery.mobile.theme.css。

  2. 修改新建的文件,比如修改上面说到的圆角值。

  3. 保存。

  4. 在你的HTML页面中,修改对样式文件的引用链接。

如何测试,将在下文详述。

如何创建自定义调板

jQueryMobile默认的主题各方面都非常好,唯一我想更改的就是调板。

要更改调板你有两个选择。一是像上文所诉的那样修改原始的文件,这样可能导致你的代码不易管理——尤其在jQuery更新版本的时候。

第二个选择是充分利用CSS的扩展性仅创建独立的调板文件,这样做可以不用修改原始的jQueryMobile文件,你的文件也更容易维护。

如何创建独立的调板文件

以下步骤展示了如何创建新的调板:

  1. 创建一个新的css文件,名为jquery.mobile.swatch.i.css。

  2. 将原始css文件中a调板的代码复制进去。(16到149行)

  3. 粘贴到你的文件中。

  4. 更改每一个class的名字中的后缀,比如将ui-bar-a更改为ui-bar-i.

  5. 当然还是保存啦。

修改具体的样式

现在你可以开始修改具体的css代码了。当然,你可以更改任何你想更改的代码,以下例子中将更改按钮的背景,涉及到的class有:

  • .ui-btn-up-i

  • .ui-btn-hover-i

  • .ui-btn-down-i

可以看到代码组织结构都是相同的,原始的.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),要使用他们只需要链接到你的页面就行了,下例展示了如何使用两个自定义调板:

  

<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"/>

  

然后你需要做的就是使用data-theme属性:

  

复制代码
  
    Header
  
  
    Content
        
      
        Header
        Content
      
      
        Header
        Content
      
      
        Header
        Content
      
    
    
Go To Page 4
  
  
    Footer
复制代码

  

开发中的主题编辑器(ThemeRoller)

现目前我们修改jQueryMobile主题还都只能局限于修改css文件,幸运的是jQueryMobile团队正致力于开发jQueryMobile的可视化主题编辑器。根据官方网站的说法,此编辑器将于2011年jQueryMobile1.0正式发布时随同发布。

jQueryUI项目所包含的主题编辑器可以让你轻易创建自定义主题,而jQueryMobile项目的主题编辑器将会更加高效。

当然,主题编辑器会带来巨大的方便,但是我仍然建议你试着手写css代码来创建主题,这样能使你更好的理解jQueryMobile的主题系统是如何工作的。

最后一步,测试你的主题

上面介绍了这么多技术,相信你也是跃跃欲试了,如果有条件的话我建议你使用Dreamweaver来替代普通的文本编辑器,这样能使你更高效的编辑和而管理你的文件。

如果你有自己的web服务器,你可以托管你的文件上去,否则你只能直接在你的移动设备上打开你的网站。在电脑上本地测试时我建议你使用chrome来打开你的网站。

以下展示了主题修改的完整步骤:

  1. 依然是在官网下载相关文件

  2. 解压到你网站目录下。

  3. 新建一个HTML文件,名为test.html,并复制以下代码:

      

    复制代码
    Sample Page
      
        Sample Page
      
      
        I'm a sample page!
      
      Button
    复制代码

      


    上面代码中第一行是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 入门教程

  4. 保存,现在可以在chrome中或者你的移动设备中查看你的页面了。

  5. 备份jquery.mobile-1.0b1.css文件,修改新的文件名为jquery.mobile.theme.css。

  6. 打开此文件,找到.ui-bar-e这个class,修改color值为red:

    color: red;
  7. 移除原来对jquery.mobile-1.0b1.css的引用,替换成下面的:

    <link rel="stylesheet" type="text/css" href="jquery.mobile.theme.css"/>
  8. 保存,并刷新浏览器,现在header中的文字应该已经变为红色的了。
    现在你可以按照前文所述步骤创建独立的调板文件来试试。

  9. 编辑test.html,引用jquery-mobile-i.css文件:

    <link rel="stylesheet" type="text/css" href="jquery-mobile-i.css"/>
  10. 把data-theme的值由e改为i:

    <a href="#page4" data-role="button" data-icon="arrow-d" data-iconpos="left" data-theme="i">Button</a>
  11. 保存并刷新页面,现在按钮点击时已经会变绿了。

接下来呢?

css相关知识对创建jQueryMobile主题是非常有帮助的。http://www.css3.info/包含许多 css3的知识,快速学习css3相关属性可以参考printable cheat sheet from Smashing Magazine

有关jQueryMobile主题的更多细节可以参考jQuery themes page

要想知道最新的jQueryMobile消息,可以订阅其博客或者关注其微博



点击阅读本文所属分类的更多文章: 生活多美好 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询