jQueryMobile主题修改的若干问题

缺乏、安全感 2022-08-26 05:55 203阅读 0赞

## jQueryMobile主题修改的若干问题 ##

![此博文包含图片][sg_trans.gif] (2011-11-03 14:42:33)

![sg_trans.gif][]转载▼

<table style="margin:0px; padding:0px"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px 10px 0px 0px; font-family:宋体; vertical-align:top"> <span style="color:rgb(99,113,96)">标签：</span>&nbsp; <h3 style="margin:0px 5px 0px 0px; padding:0px; border:0px; list-style:none; display:inline; font-size:12px; font-weight:normal"> <a href="http://search.sina.com.cn/?c=blog&amp;q=jquerymobile&amp;by=tag" style="text-decoration:none; color:rgb(9,67,130); white-space:nowrap" rel="nofollow">jquerymobile</a></h3> &nbsp; <h3 style="margin:0px 5px 0px 0px; padding:0px; border:0px; list-style:none; display:inline; font-size:12px; font-weight:normal"> <a href="http://search.sina.com.cn/?c=blog&amp;q=css%BD%E7%C3%E6&amp;by=tag" style="text-decoration:none; color:rgb(9,67,130); white-space:nowrap" rel="nofollow">css界面</a></h3> &nbsp; <h3 style="margin:0px 5px 0px 0px; padding:0px; border:0px; list-style:none; display:inline; font-size:12px; font-weight:normal"> <a href="http://search.sina.com.cn/?c=blog&amp;q=css%D6%F7%CC%E2&amp;by=tag" style="text-decoration:none; color:rgb(9,67,130); white-space:nowrap" rel="nofollow">css主题</a></h3> &nbsp; <h3 style="margin:0px 5px 0px 0px; padding:0px; border:0px; list-style:none; display:inline; font-size:12px; font-weight:normal"> <a href="http://search.sina.com.cn/?c=blog&amp;q=it&amp;by=tag" style="text-decoration:none; color:rgb(9,67,130); white-space:nowrap" rel="nofollow">it</a></h3> </td> 
   <td style="margin:0px; padding:0px; font-family:宋体; vertical-align:top; width:220px; white-space:nowrap"> <span style="color:rgb(99,113,96)">分类：</span>&nbsp;<a href="http://blog.sina.com.cn/s/articlelist_2301558112_5_1.html" style="text-decoration:none; color:rgb(9,67,130)" rel="nofollow">css3</a></td> 
  </tr> 
 </tbody> 
</table>

原作：[Using and customizing jQuery Mobile themes][] —— [Matthew David][]

翻译：[filod][]

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

--------------------

在之前的文章[jQuery Mobile 入门教程][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是优先级最高的调板，默认为黑色（如下图）：

![jQueryMobile主题修改的若干问题][jQueryMobile]

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

1.  a：最高优先级，黑色
2.  b：优先级次之，蓝色
3.  c：基准优先级，灰色
4.  d：可选优先级，灰白色
5.  e：表示强调，黄色

![jQueryMobile主题修改的若干问题][jQueryMobile 1]

### 如何使用默认调板 ###

jQueryMobile内建了主题控制相关模块。调板可以使用**data-theme**属性来控制。如果你不指定data-theme属性，将默认采用a调板。以下代码定义了一个采用默认调板的页面：

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

![jQueryMobile主题修改的若干问题][jQueryMobile 2]

使用不同的调板：

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

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

![jQueryMobile主题修改的若干问题][jQueryMobile 3]

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

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

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

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

![jQueryMobile主题修改的若干问题][jQueryMobile 4]

### 创建自己的主题 ###

只是添加一个data-theme属性，改改HTML代码肯定不能使你满足，修改CSS代码可以让你控制更多的可视效果：边框、位置、边距等等。jQueryMobile的css代码定义在jquery.mobile-1.0b1.css文件中。

**注意：**当前版本的css文件是beta 1版本（译注：截止到译文发布时，jQueryMobile版本为beta 2），最终版本肯定会更改此文件。所以你要注意在版本更新后替换你修改过的文件名。

在[这里][Link 1]下载jQueryMobile的文件后，让我们开始准备编辑css文件吧！像本文之前说的，css文件定义了主题和结构两部分。在主题部分定义了五个默认的主题。

#### 编辑调板 ####

所有调板几乎都是一样的代码结构，每种调板前面都有注释指明了它是哪种调板，比如以下是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: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')"; }

可以看到类名（ui-bar-a)有着特定的结构，后缀（a）指明了其所属调板，类ui-bar则控制着footer和header的显示。由于并没有使用图片，因此该类依赖于css3的文本阴影、渐变等效果。同理，b调板的类名为ui-bar-b。惊喜的是，你可以创建你自己的调板，并命名为类似ui-bar-x的结构即可（下文详述）。

如果你直接引用你自己服务器上的css文件，你可以直接在原始文件上修改（当然，最好还是留下一个备份），下例就将默认a调板中的文字颜色修改成了红色：

.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: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')"; }

#### 修改其他样式 ####

css文件的前600行（译注：新版是566行）都是定义五种调板的，其余的代码用来定义一些通用特性，比如按钮的圆角等。下例是圆角相关的css代码：

.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;
    }

这些class都是通用的，他们不依赖于特定的调板，每一个class都控制一个特定类型的圆角，由于浏览器对CSS3支持的不一致导致了每一个class里面都写有三行表示相同含义的代码。

css文件里包含许多class，你可以按需修改它们。

#### 完成更改！ ####

当你准备创建自己的主题时，我还是建议你对原始主题进行备份。修改css如下几步即可：

1.  打开jquery.mobile-1.0b1.css，另存为其他名字，例如：jquery.mobile.theme.css。
2.  修改新建的文件，比如修改上面说到的圆角值。
3.  保存。
4.  在你的HTML页面中，修改对样式文件的引用链接。

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

![jQueryMobile主题修改的若干问题][jQueryMobile 5]

### 如何创建自定义调板 ###

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代码如下：

.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: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#5a5a5a')";
    }

每一个按钮都采用了渐变的背景，如需修改颜色，请修改包含background, background-image, 和 -ms-filter属性的值。对于background-image 和-ms-filter属性而言，你需要设置渐变色的开始值和结束值，例如从浅绿（66FF79）渐变到深绿（00BA19）：

.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: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#66FF79', EndColorStr='#00BA19')";
    }

因为不同的浏览器使用不同的机制来处理渐变，你需要在三个地方修改代码。这本例中第第一个background-image属性是Firefox浏览器专属的，第二个则是webkit内核浏览器专属（safari或者chrome），-ms-filter自然就就是微软的IE了。尽管语法有点各自为政，但基本还是有着同样的模式：均包含开始色和结束色。

每个调板都包含20多个class可以修改，你无须全部更改它们。在大多数情况下只需修改你想要修改的部分就可以了。

jQueryMobile一个特别大的优势就是它仅使用css来控制显示效果，这使得你可以最大程度上灵活控制你网站的显示。举例来说，[本文附件][Link 2]中包含的f调板 (jquery-mobile-swatch-f.css)使用@font-face在页面中嵌入了许多字体。

#### 如何使用新的调板 ####

每一个主题只能有26个调板（a-z），要使用他们只需要链接到你的页面就行了，下例展示了如何使用两个自定义调板：

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

<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） ###

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

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

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

### 最后一步，测试你的主题 ###

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

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

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

1.  依然是在官网下载[相关文件][Link 1]。
2.  解压到你网站目录下。
3.  新建一个HTML文件，名为test.html，并复制以下代码：
    
    　　
    
        <!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 入门教程][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. 保存并刷新页面，现在按钮点击时已经会变绿了。

[sg_trans.gif]: /images/20220824/7c24344ac7a244a99a257279034cb913.png
[Using and customizing jQuery Mobile themes]: http://www.adobe.com/devnet/dreamweaver/articles/theme-control-jquery-mobile.html
[Matthew David]: http://www.adobe.com/devnet/author_bios/matthew_david.html
[filod]: http://www.filod.net/
[jQuery Mobile]: http://blog.filod.net/jquerymobile-2/295.html
[jQueryMobile]: http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/dreamweaver/articles/theme-control-jquery-mobile/fig01.jpg
[jQueryMobile 1]: http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/dreamweaver/articles/theme-control-jquery-mobile/fig02.jpg
[jQueryMobile 2]: http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/dreamweaver/articles/theme-control-jquery-mobile/fig03.jpg
[jQueryMobile 3]: http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/dreamweaver/articles/theme-control-jquery-mobile/fig04.jpg
[jQueryMobile 4]: http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/dreamweaver/articles/theme-control-jquery-mobile/fig05.jpg
[Link 1]: http://jquerymobile.com/download/
[jQueryMobile 5]: http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/dreamweaver/articles/theme-control-jquery-mobile/fig06.jpg
[Link 2]: http://download.macromedia.com/pub/developer/dreamweaver/jqm-sample.zip
[Link 3]: http://jqueryui.com/themeroller/