nativeDroid：一款簡潔的jQuery Mobile 1.3主題

本文介紹nativeDroid，一款為jQuery Mobile 1.3打造的全新簡潔主題。其首個(gè)版本(v0.1)可在nativedroid.godesign.ch免費(fèi)下載，可用于任何個(gè)人和商業(yè)項(xiàng)目，只需在項(xiàng)目署名中添加反向鏈接即可。

nativeDroid特性:

• 界面設(shè)計(jì)接近Android HOLO風(fēng)格。
• 基于純CSS3/HTML5，無需圖片(使用Font Awesome提供圖標(biāo))。
• 提供5種顏色方案(藍(lán)/綠/紫/紅/黃)，可與亮色和暗色主題任意組合。
• 適用于任何移動(dòng)項(xiàng)目的起始框架。
• 無需額外JavaScript代碼。
• 提供所有jQuery Mobile 1.3組件的示例。
• 可通過jQM的data-icon屬性添加所有Font Awesome圖標(biāo)。

使用技巧與注意事項(xiàng):

nativeDroid只是一個(gè)jQuery Mobile主題，您可以使用jQM提供的任何功能，但為了獲得更好的視覺效果，請(qǐng)注意以下幾點(diǎn)：

1. 所有樣式都應(yīng)用于data-theme='b'。
2. 只使用jQuery Mobile的結(jié)構(gòu)樣式表(css/jquerymobile.css)，不包含主題樣式。 jQuery Mobile的Themeroller生成的樣式表會(huì)破壞設(shè)計(jì)。
3. data-inset='true|false'參數(shù)在nativeDroid中無效。請(qǐng)使用<div class="inset">標(biāo)簽進(jìn)行替代。 <li> <code>data-role='header'僅與data-position='fixed'和data-tap-toggle='false'組合使用，并為header內(nèi)的鏈接元素單獨(dú)應(yīng)用data-theme='b'。
4. data-role='footer'尚未設(shè)計(jì)，謹(jǐn)慎使用。建議您從演示中的HTML文檔復(fù)制一個(gè)作為起始點(diǎn)。

顏色和樣式:



• 基礎(chǔ)CSS:

  • css/font-awesome.min.css: 包含nativeDroid使用的字體和圖標(biāo)。
  • css/jquerymobile.css: jQuery Mobile的原始結(jié)構(gòu)樣式表(已壓縮)，不包含主題樣式。
  • css/jquerymobile.nativedroid.css: nativeDroid所需的結(jié)構(gòu)調(diào)整。

• 主題:

  • css/jquerymobile.nativedroid.light.css: 亮色主題。
  • css/jquerymobile.nativedroid.dark.css: 暗色主題。

• 顏色:

  • css/jquerymobile.nativedroid.color.blue.css: 藍(lán)色樣式。
  • css/jquerymobile.nativedroid.color.green.css: 綠色樣式。
  • css/jquerymobile.nativedroid.color.purple.css: 紫色樣式。
  • css/jquerymobile.nativedroid.color.red.css: 紅色樣式。
  • css/jquerymobile.nativedroid.color.yellow.css: 黃色樣式。

您可以復(fù)制任意一個(gè)基礎(chǔ)顏色CSS文件并調(diào)整顏色代碼來創(chuàng)建自己的顏色樣式。

未來發(fā)展:

nativeDroid將持續(xù)更新，添加新功能并修復(fù)bug。



(以下為原文FAQ部分的簡化版，避免重復(fù)信息) 該部分內(nèi)容已高度概括，保留了核心信息，并對(duì)問題進(jìn)行了重新組織和表達(dá)。

常見問題:

• 安裝: 下載主題，解壓文件，并將文件放置到項(xiàng)目目錄中，然后在HTML文件中鏈接CSS和JS文件即可。
• 兼容性: 專為jQuery Mobile 1.3設(shè)計(jì)，其他版本兼容性未保證。
• 自定義: 可自定義CSS和JS文件。記得備份原始文件。
• 疑難解答: 檢查安裝和鏈接是否正確，查看控制臺(tái)錯(cuò)誤信息。
• 響應(yīng)式設(shè)計(jì): 支持響應(yīng)式設(shè)計(jì)。
• 商業(yè)用途: 可用于商業(yè)項(xiàng)目。
• 更新: 定期發(fā)布更新，下載最新版本替換舊文件即可。
• RTL語言支持: 原生不支持，需修改CSS文件。
• 插件添加: 在HTML文件中包含插件的JS和CSS文件，確保放在主題文件之后。
• 其他JavaScript框架: 建議與jQuery Mobile一起使用。