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

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

nativeDroid特性:

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

使用技巧與註意事項:

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

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

顏色和樣式:



• 基礎CSS:

  • css/font-awesome.min.css: 包含nativeDroid使用的字體和圖標。
  • 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: 藍色樣式。
  • css/jquerymobile.nativedroid.color.green.css: 綠色樣式。
  • css/jquerymobile.nativedroid.color.purple.css: 紫色樣式。
  • css/jquerymobile.nativedroid.color.red.css: 紅色樣式。
  • css/jquerymobile.nativedroid.color.yellow.css: 黃色樣式。

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

未來發(fā)展:

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



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

常見問題:

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