利用 ThemeRoller 設計版面

themroller-mobile-logo
我是到前一陣子才發現 ThemeRoller 這個好用到一個不行的工具,調整版面對我來說實在是一個很痛苦的事情,又是哪個東西改個顏色、改個寬度、改個配色,東修西改一半的開發時間都花在這上面了。如果有要用 jQuery Mobile 來開發的人,強烈建議一開始就使用 ThemeRoller
image
一開始進入頁面就可以看到這個編輯器,預設會先有三個空白的 theme 可以做設定,而左側功能列就是有相關的選項可以做選擇,可以看到基本模組都是可以做調整的。在設定完之後只要按下左上方的 Download Theme 就可以做匯出的動作,include 的方法也非常簡單,匯出的時候就有說明了。
image
在右上方輸入 Theme 的自訂名稱,並且在下載之後加入專案當中,也要在頁面中引用,要在 jQuery Mobile 的 js 跟 css 之前。不過有用過  jQuery Mobile 原本就有預設五種 Theme 可以使用,在官網也有介紹,當一加入 ThemeRoller 產生出來的 css 檔案之後,原本的 Theme 效果就會被覆蓋掉了,如果說想要保留原本的預設樣式要怎麼做呢?幸好還有另外一個 import 功能。
image
選擇右上角的 Import Default Theme 就可以載入 jQuery Mobile 預設的範本,不用害怕會覆蓋掉現在已經在運作的 jQuery Mobile ,或是說如果想要預設的樣式還要自己設定,如果已經有 ThemeRoller 匯出的檔案也只要複製 css 直接匯入就可以看到之前修改的結果。
image
image
如果開啟 Inspector 可以直接點選畫面上想要調整的地方,左側功能列表就自動開啟相對應的設定
官方還有另一個 valencia 樣式可以選擇。
image

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *