|
注: 本教程您可以使用任意版本的Dreamweaver或文本編輯器 在上一篇文章jQuery Mobile入門中，我提供了一種使用jQuery Mobile 框架為智能手機和平板電腦構(gòu)建優(yōu)秀 Web體驗的介紹,。大致來講,，利用jQuery Mobile建立的網(wǎng)站看上去很不錯，按鈕有光澤,，漸變平滑,，整體界面優(yōu)雅。 根據(jù)你的設(shè)計要求,，然而,，你可能想混搭顏色以配合貴公司的顏色或品牌，或突出或柔和的按鈕和標簽,?？傊憧赡芟肟刂苆Query Mobile網(wǎng)站的外觀感覺,。本教程演示了在jQuery Mobile網(wǎng)站中如何擴展視覺化結(jié)構(gòu)和主題的方法,。 jQuery Mobile的主題和樣本jQuery Mobile使用級聯(lián)樣式表（CSS）來控制內(nèi)容在屏幕上的可視化布局。jQuery Mobile CSS文檔主要有兩部分構(gòu)成：
注:為了減少圖像的使用（和服務(wù)器請求）,，jQuery Mobile依賴CSS3屬性添加圓角,，陰影，而不是傳統(tǒng)技術(shù)要求JPEG或PNG圖像,。按鈕,，背景和制表欄都可利用CSS進行創(chuàng)建。使用圖像來控制你的布局這是可能的,，但這是例外而不是規(guī)則,。 每個主題可以包括一個或多個樣本。在主題中一個樣本可為內(nèi)容塊,，按鈕,，列表項設(shè)置顏色，您可以使用樣本輕松地切換配色方案。 樣本背后的想法是為一個給定網(wǎng)站提供快速替換顏色方案,。雖然對于所有網(wǎng)站的頁面一般來說都采用統(tǒng)一配色方案,，但有些場合頁面上的特定元素需要加以突出（例如，Try It按鈕）或低調(diào)（如,，不感興趣的按鈕）處理,。樣本定義可讓您使用替換的配色方案以應付這些情況。 jQuery Mobile內(nèi)置的CSS文檔主題具有一組5種樣本,，名稱分別為 a, b, c, d, and e.按協(xié)定a處于視覺最高優(yōu)先級別，在默認主題中它是黑色的,。 (見圖1). 
圖1 使用默認主題和樣本創(chuàng)建的屏幕,。
jQuery五個默認樣本使用（見圖2）見于下面jQuery約定：
圖2.從a（左）至e（右）為5種默認樣本
jQuery Mobile利用默認樣本直接內(nèi)置到j(luò)Query Mobile的主題控制，利用 <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>
圖3.使用默認樣本的一個示例頁面
在頁面上要使用不同的樣本需設(shè)置data-theme屬性,，如下面的代碼： <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>
從結(jié)構(gòu)上看,，頁面是一樣的。顏色卻已經(jīng)改變,，這是因為使用了data-theme="e"樣本已切換到E,。頂部現(xiàn)在是一個黃色的漸變，背景是白色到黃色的漸變,，文本也是不同的顏色（見圖4）,。 
圖4.使用了樣本E后同一個基礎(chǔ)頁面
默認情況下，在一個頁面上所有組件和視覺元素繼承于一個樣本,，這意味著你只需要引用樣本一次,，所有的組件將繼承新的配色方案。在上面示例代碼中,，樣本給了整個頁面設(shè)置,。 <div data-role="page" id="page" data-theme="e">
你還可以獨立控制每個元素的樣本（見圖5），通過設(shè)置元素的 <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>
圖5.樣本設(shè)置在個別元素上
創(chuàng)建自己的主題到這一點你已經(jīng)會修改HTML進行簡單操作,，為整個頁面或個別元素添加 注： 當前jQuery Mobile CSS文件（jquery.mobile1.0b1.css）版本為Beta 1 ，該文件名稱可能在最終版有所變更。雖然該技術(shù)用于本文中,，但具有最終發(fā)布版后,，你將需要用1.0正式版中使用的文件名替換jquery.mobile- 1.0b1.css 。 從 jQuery 下載頁面下載這個文件后,，在Dreamweaver或您喜愛的文本編輯器打開它,。如上所述，CSS文件定義主題（顏色,，漸變,，字體，陰影,，等）和結(jié)構(gòu)（填充和結(jié)構(gòu)元素的位置）,。在主題部分包括五個默認樣本。 編輯樣本樣本部分都有著相似的結(jié)構(gòu),。每個樣本前面的注釋標識著樣本的名稱,。 下面是樣本a的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')"; }
類名（在這種情況下， 如果你主持自己的jquery.mobile-1.0b1.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行左右是專門定義默認主題的五個樣本。CSS文件的其余部分是用來定義主題的常規(guī)外觀,，如按鈕的導角,。下面的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;
}
這些類是通用的,。他們不引用一個特定的樣本,。在上面的CSS類中,，每個類控制元素的半徑，新的CSS3屬性支持跨瀏覽器支持不一致的 需求,，每個類有三個屬性的,，本質(zhì)上是相同的。 在CSS文件中有數(shù)百個類,，您可以控制屏幕上的每一個視覺元素外觀的修改,。 實施變化當你準備創(chuàng)建自己的主題，或修改默認的主題,，我建議你使用默認CSS文件的副本,。
在自己的設(shè)備上進行測試的說明詳見 測試主題,。 
圖6.頁眉無圓角。
創(chuàng)建你自己的樣本總的來說,，我發(fā)現(xiàn)jQuery Mobile的默認主題設(shè)置都非常好,。奈何我通常要改變樣本。 要改變樣本你有兩個選擇,。首先是在上一節(jié)所述,，復制默認的CSS文件進行編輯。這會導致混亂,，難以管理,，特別是如果jQuery版本更新文件。 第二種選擇是利用CSS的可擴展性的優(yōu)勢,，為你的新樣本創(chuàng)建第二個CSS文檔,。好處是不會修改原始的jQuery Mobile CSS文件，而你的類也容易定義,。 創(chuàng)建一個獨立的CSS樣本文件按照以下步驟開始使用第二種方法創(chuàng)建一個新的樣本：
修改樣式現(xiàn)在你可以開始修改CSS,。你可以隨意修改想要的任何變化。在這個例子中,，你將更更改按鈕組件的背景,。控制按鈕樣式有三個主要CSS類它們是：
這些類的每一個結(jié)構(gòu)方式是相同的,。以下是原始的 .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')";
}
按鈕的背景樣式是一個漸變,。要改變背景顏色，需改變 .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')";
}
由于不同的瀏覽器使用不同的機制來應用漸變，你需要在三處更改顏色,。在這個例子中,，第一個 每個jQuery Mobile樣本有兩個以上的12個不同類別，你可以編輯,。在大多數(shù)情況下你不需要編輯,，可以做一個類似的樣本復制，編輯你要更改的屬性,。 利用jQuery Mobile工作有一件很好的事情是樣式都是些CSS,。這給你在jQuery Mobile網(wǎng)站的外觀感覺處理有一個很大的靈活性。例如,，在f樣本包括在本文的示例文件(jquery-mobile-swatch-f.css) 使用 使用新的樣本文件樣本的創(chuàng)建在數(shù)量上沒有限制（然而每個主題最多26個樣本）。你所要做的是將它們鏈接到您的網(wǎng)頁,。下面的代碼,，例如,，連接兩個樣本文件jquery-mobile-swatch-i.css 和 jquery-mobile-swatch-r.css: <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"/>
最后一步是在你的HTML中更改 <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 for jQuery Mobile目前,，在jQuery Mobile中定制主題和樣本需要編輯CSS文檔。Moving forward,jQuery Mobile團隊正在制作一個特殊版本ThemeRoller for jQuery Mobile,。據(jù)jQuery Mobile網(wǎng)站,，ThemeRoller工具的新版本將在2011年推出jQuery Mobile的1.0版本。 原ThemeRoller工具（jQuery不是jQuery Mobile）使您可以輕松設(shè)計一個自定義的jQuery UI主題,。欲了解更多信息,，請參閱 http:///themeroller/。然而,，jQuery Mobile采用CSS3來控制圓角,，文本，陰影,，背景漸變等等比原始的jQuery ThemeRoller來創(chuàng)建主題更為有效,。 雖然ThemeRoller移動版本肯定會使其更容易為您的移動網(wǎng)站創(chuàng)建的主題，重要的是要了解jQuery Mobile CSS工作原理及其結(jié)構(gòu),。在使用ThemeRoller for jQuery Mobile之前,，我鼓勵你手工編寫你的CSS樣本文件。jQuery開發(fā)團隊已經(jīng)做了一項偉大的工作使其開發(fā)盡可能容易,。 測試主題現(xiàn)在你需要把這篇文章中所用的新技術(shù)深入到實踐，將要創(chuàng)建一個基本的移動頁面使用一個自定義樣本,。你可以使用Dreamweaver或 文字編輯器來編輯 HTML和CSS文件,。然而，如果可能的話,，我建議你使用Dreamweaver管理一個jQuery Mobile網(wǎng)站,。這將有助于編輯和管理文件，稍后,，上傳文件到移動網(wǎng)站,。 如果你有一個Web服務(wù)器，你可以定位該文件,，然后在移動設(shè)備上訪問它們,。否則，你可以直接從您的硬盤驅(qū)動器打開它們,。我推薦使用Chrome來進行本地測試,。 按照這些步驟來創(chuàng)建一個簡單的頁面來測試主題：
<!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-1.6.min.js" type="text/javascript"></script>
<script src="http://code./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>
上面的HTML第一行聲明了該HTML文檔為HTML5,。老版瀏覽器仍然會呈現(xiàn)頁面,，但將忽略HTML5的聲明。
· <link rel="stylesheet" type="text/css" href="jquery.mobile-1.0b1.css"/>
· <script src="http://code./jquery-1.6.min.js" type="text/javascript"></script>
· <script src="http://code./mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
第一行是指本地的CSS文件,，表明本文件中采用jQuery主持版本，不可更改,。接下來兩行是JavaScript引用文件表示 jQuery核心庫和jQuery Mobile庫,，它們都是jQuery必不可缺的文件。
直接編輯一個樣本可如創(chuàng)建自己的主題 所述，按照下面的四個步驟,。 color: red;<link rel="stylesheet" type="text/css" href="jquery.mobile.theme.css"/>現(xiàn)在,，您可以在“創(chuàng)建您自己的 jQuery Mobile 色板”中創(chuàng)建的獨立 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>延伸閱讀創(chuàng)建一個優(yōu)秀的jQuery Mobile定制主題CSS知識至關(guān)重要,。CSS最新信息資源 http://www./,。關(guān)于CSS3屬性快捷參考請參考printable cheat sheet from Smashing Magazine. 欲了解更多jQuery Mobile主題詳情，請參考 jQuery themes page,。 最后,，要獲取jQuery Mobile最新信息請關(guān)注 jQuery Mobile blog 或從Twitter訂閱jQuery Mobile(@jquerymobile).
本產(chǎn)品經(jīng) Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 許可。Adobe 提供超出該許可范圍,、與本產(chǎn)品包含的代碼示例相關(guān)的權(quán)限,。 More Like This
|
|
|
