- May 28 Tue 2013 08:41
-
【新奇週邊】救援、攻堅、探索，甚至送報一把罩!?四軸飛行的時代火熱登場!(Parrot AR Drone 2.0)
- May 28 Tue 2013 08:37
-
【APP推薦】Repix：別再說不會畫圖沒天份，繪圖大師換你作作看！
- May 27 Mon 2013 19:32
-
【限時免費】05/27 iOS APP 限時免費軟體組合包 (遊戲x3 程式x2)
- May 24 Fri 2013 22:42
-
【限時免費】05/24 iOS APP 限時免費軟體組合包
- May 24 Fri 2013 09:02
-
【APP推薦】Arno the Hunter : 左右奔馳於戰場中的外星獵人~!! 一款橫向捲軸射擊遊戲
- May 24 Fri 2013 08:42
-
【APP推薦】Plant Nanny: 喝水養生養植物，療癒系植物保姆與你的健康同步成長
- May 24 Fri 2013 08:39
-
【APP開發技術分享】原生以外另一種思維：PhoneGap X iOS 簡易的Table View及導覽轉景效果
之前介紹了如何使用PhoneGap去製作包裝iOS App，這次要透過jQuery Mobile(JQM)這套函式庫製作另一個App，去模擬iOS原生程式開發常用到的Table View及導覽控制器(Navigation Controller)轉景效果。
首先新增一個專案於/demo/projects/view_test資料夾底下，這裡是取名為View_Test，封包名稱為com.demo.viewTest。PhoneGap新增專案的方法為用終端機進入/phonegap-2.7.0/lib/ios/bin資料夾底下再輸入以下指令:./create /demo/projects/view_test/ com.demo.viewTest View_Test
接下來要下載安裝JQM函式庫，可從jQuery Mobile首頁點選下載連結。目前版本為1.3.1
這裡要使用最簡單的安裝法，也就是跳過下載直接使用官方推薦的檔案聯結
用Xcode開啟專案，找到www資料夾內的index.html檔案並注解掉如下圖用紅框圈起來的部分
於<head>加入官方的JQM函式庫連結
輸入新的程式碼如下圖，接著以模擬器執行App
跟Hello World的時候相比，可愛的PhoneGap機器人不見了，取代的是向各位打招呼的訊息。步驟4注解掉的部分是PhoneGap的預設程式碼，每次新增專案時都會自動填入；雖然制作精美，但跟本文無關只好忍痛刪掉。接下來在body元件內填入以下程式碼
剛剛填入的是常見的HTML<ul>清單語法，但經過JQM包裝過於模擬器執行就產生如下圖般的效果；這種呈現方式跟就跟iOS原生套件中的Table View很接近，光看截圖很難分辨出其中的差異。到目前為止輸入的程式碼有個共通點，就是起始標籤內的data-role屬性；這就是JQM用來指定各種元件功能的語法，而目前已經使用的則有：分頁(page)、標題(header)、內容(content)跟清單(listview)。JQM函式庫會依照輸入的data-role屬性去判斷指定的元件，並作出相對應的呈現
剛剛的清單頁面看起來簡單明瞭，但實際上卻缺乏良好的分類結構(三個年級各個分班全部擠在一起)。因此接下來要製作一個可收合式(collapsible)清單介面，程式碼如下
跟清單的做法有所不同，可收合式元件需要用到一個<div>元件；除了data-role屬性填入collapsible外，還多了額外的data-collapsed、data-theme及data-content-theme屬性。其中data-collapsed用於控制頁面讀取時元件為展開或收合狀態，而data-theme及data-content-theme則用於控制該元件的預設界面風格。<div>元件內則包含了作為群組標題的<h4>元件(無需另外設定data-role)以及一個清單元件用於呈現一年以下的所有班級；程式碼執行時應呈現如下面左邊的截圖。這裡只修改了一年級的部分，有興趣的話可以將二三年級一併修改成一樣的風格，那看起來就會如同下方右邊的截圖
目前的清單介面已經做到可以自由展開收合，接下來就要加入iOS App常有的推頁轉景效果。先在目前的分頁(page)元件結束的</div>標籤之後再加入一組分頁元件，程式碼如下
JQM其實容許單一網頁檔案下存在複數分頁的，各分頁間只要設好獨立的ID就可以互相呼叫。接下來將步驟8修改的清單元件內容作出以下修改
這裡主要是將原本清單項目內容以超連結<a>的方式重新包裝，超連結的href屬性內容指向要讀取的檔案並在副檔名後方加上井字符號及ID，就可指定讀取該ID所屬的分頁。href屬性內容最前方page-transitions-字串並非路徑的一部分，其功能是標示此超連結要套用轉景(transition)特效；效果的指定則使用data-transition屬性來作設定。App執行的結果如下
跟步驟9呈現出來的效果略有不同，各班級項目的後方都多了一個向右的箭頭，代表該項目後續還有資料。點擊後會產生水平橫移的轉景效果並移至以下頁面
除了標頭文字外，本頁的返回字樣也是使用了超連結元件來製作；特別的是這個超連結的href屬性為空值，且多了個data-rel屬性並設為back。該語法所呈現的效果跟iOS原生App常見的返回鍵如出一撤，屬於超連結語法的一部分，會自動的將介面導回之前的一頁。可嘗試於連接標籤內加入data-role屬性並設為button，這樣一來返回的呈現就會由原本的超連結變成按鈕的形狀
- May 23 Thu 2013 13:34
-
【限時免費】05/23 iOS APP 限時免費軟體組合包
- May 22 Wed 2013 17:29
-
【限時免費】05/22 iOS APP 限時免費軟體組合包 (遊戲x3 程式x2)
- May 22 Wed 2013 10:39
-
【APP推薦】DailyCost：超簡約記帳程式，讓你徹底擺脫月光族！
- May 21 Tue 2013 18:40
-
【限時免費】05/21 iOS APP 限時免費軟體組合包 (程式x5)
- May 21 Tue 2013 08:43
-
【APP推薦】Moves: 只要一個Moves，整個運動數據我Hold住！
