1 / 41

jQuery Mobile 頁 面、按鈕與對話方塊

jQuery Mobile 頁 面、按鈕與對話方塊. 教材. 陳會安 著（ 2013 ）， PHP+MySQL 與 jQuery Mobile 跨行動裝置網站開發， 碁峰資訊股份有限公司， ISBN 9789862768563 （書號 ACL037900 ） 楊仁和 譯（ 2012 ）， 深入淺出行動網站開發， 碁峰資訊股份有限公司， ISBN 9789862765005 （書號 A310 ）

graiden-poole
Download Presentation

jQuery Mobile 頁 面、按鈕與對話方塊

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. jQuery Mobile頁面、按鈕與對話方塊

  2. 教材 陳會安 著（2013）， PHP+MySQL與 jQuery Mobile 跨行動裝置網站開發， 碁峰資訊股份有限公司， ISBN 9789862768563 （書號 ACL037900） 楊仁和 譯（2012）， 深入淺出行動網站開發， 碁峰資訊股份有限公司， ISBN 9789862765005 （書號 A310） 榮欽科技、陳婉凌(2012)， 網頁設計必學的程式實作技術-HTML5+CSS3+JavaScript， 博碩文化， ISBN: 978-986-201-664-0 （書號 PG31237 ）

  3. 大綱 建立多頁面的jQuery Mobile程式 巡覽jQuery Mobile頁面 對話方塊與頁面轉換特效 按鈕 可摺疊內容 多欄與表格版面配置

  4. 建立多頁面的jQuery Mobile程式 • 以id屬性為頁面命名 <div data-role="page" id="home"> <div data-role="header">…</div> <div data-role="content"> … <a href="#register">報名研討會</a><br/> </div> <div data-role="footer"></div> </div>

  5. 建立多頁面的jQuery Mobile程式 <div data-role="page" id="register"> <div data-role="header"></div> <div data-role="content"></div> </div>

  6. 建立多頁面的jQuery Mobile程式

  7. 建立多頁面的jQuery Mobile程式 • 預設所有頁面使用同一個<title>標題文字 • 使用data-title屬性指定頁面標題文字 <div data-role="page" id="register" data-title ="Register"> <div data-role="header"> <h1>報名研討會</h1> </div> <div data-role="content"></div> </div>

  8. jQuery Mobile框架多頁面巡覽 • 多頁面巡覽由jQuery Mobile框架處理 • 使用巡覽堆疊記錄連接頁面 • 返回上一頁 • 使用Ajax技術載入連接頁面 • 最佳化的頁面切換效果 • 使用標準HTML超連結<a>元素 • 連接的目的地種類: • 同一個jQuery Mobile程式裡的其他頁面 • 其他jQuery Mobile程式的頁面（單一頁面） • 連接非jQuery Mobile的網頁，或其他網站的網頁

  9. 巡覽堆疊

  10. 頁面的返回鈕 • 預設隱藏，看不到返回按鈕 • 瀏覽器本身擁有回到上一頁的按鈕

  11. 在頁面顯示返回鈕 • 使用data-add-back-btn屬性切換顯示返回鈕 <div data-role="page" id="about" data-add-back-btn="true"> … </div>

  12. 指定返回鈕的標題文字 • 使用data-back-btn-text屬性更改標題文字 <div data-role="page" id="about" data-add-back-btn="true" data-back-btn-text="上一頁"> … </div>

  13. 連接其他程式的jQuery Mobile頁面 • 維持巡覽堆疊的條件： • 目的地在同一網域內。 • 單一頁面。 • 如果目的地是目錄，加上斜線: • 例如：href="/sales/" • 不可使用target屬性

  14. 對話方塊 • 超連結加上data-rel=dialog <a href="#register" data-rel="dialog">報名研討會</a>

  15. 對話方塊 • 建立data-role=dialog的對話方塊頁面 <div data-role="dialog" id="information"> <div data-role="header"> </div> <div data-role="content"> </div> </div>

  16. 正常頁面 vs. 對話方塊頁面 • 對話方塊不會填滿整個頁面 • 外觀如同彈出視窗 • 對話方塊左上角提供關閉按鈕 • 功能如同頁面的返回鈕 • 巡覽堆疊不儲存對話方塊

  17. 頁面轉換特效（Page Transitions） • 轉換頁面時的特殊效果 <a href="#register" data-transition="slideup"> 報名研討會 </a>

  18. 頁面轉換特效

  19. 按鈕 • 可以使用 <a>、<button>、<input> 建立按鈕 • <a>標籤加入data-role="button"屬性 • <button>標籤 • <input>標籤 • type=button • type=submit • type=reset

  20. 單行按鈕 • 佔用整個螢幕寬度的按鈕 <a href="register.html" data-role="button">報名研討會</a> <a href="speakers.html" data-role="button">講師陣容</a>

  21. 行內按鈕 • 多個按鈕一個接著一個排在同一行 • 加上data-inline="true" <a href="schedule.html" data-role="button" data-inline="true">課程內容</a> <a href="information.html" data-role="button" data-inline="true" data-theme="b">聯絡資訊</a>

  22. 按鈕群組控制 • 相關的按鈕 • 在<div>內使用data-role="controlgroup" <div data-role="controlgroup" data-type="horizontal"> <a href="schedule.html" data-role="button">課程內容</a> <a href="information.html" data-role="button">聯絡資訊</a> </div>

  23. 按鈕的圖示與位置 <a href="#" data-role="button" data-icon="plus" data-iconpos="top">新增</a>

  24. 按鈕的圖示與位置

  25. 按鈕自訂圖示 • 圖示尺寸18 x 18 • 格式可以是GIF、JPG或PNG（建議使用PNG） • CSS樣式指定自訂圖示 .ui-icon-phone-silent { background-image : url(phone_silent.png); } <a href="#" data-role="button" data-icon="phone-silent">靜音</a>

  26. 長方形按鈕 • 按鈕預設圓角 • data-corners="false"取消圓角，顯示長方形 <a href="#" data-role="button" data-inline="true" data-corners="false">新增</a>

  27. 按鈕除去陰影 • 按鈕預設有陰影 • 使用data-shadow="false"取消陰影 <a href="#" data-role="button" data-inline="true" data-shadow="false">新增</a>

  28. 圖示按鈕 • 按鈕預設同時顯示圖示和標題文字 • 使用data-iconpos="notext"取消顯示文字 <a href="#" data-role="button" data-inline="true" data-icon="plus" data-iconpos="notext">新增</a>

  29. 可摺疊內容 • 只顯示標題文字 • 按一下標題文字才展開顯示內容 • 再按一下標題文字，向上摺疊隱藏內容 • data-role=“collapsible”

  30. 可摺疊內容

  31. 巢狀可摺疊內容 • 展開的內容是另一個可摺疊內容 • 不建議建立超過兩層的巢狀可摺疊內容

  32. 巢狀可摺疊內容

  33. 手風琴內容 • 手風琴內容（Accordion Content）使用類似彈奏手風琴的方式展開和摺疊內容

  34. 手風琴內容

  35. 多欄與表格版面配置 • 多欄版面配置 • 表格版面配置

  36. 多欄版面配置-說明 • jQuery Mobile框架是使用格子區塊（Grids）建立版面配置，這是一個100%寬、沒有邊線和背景色彩的不可見區塊。在jQuery Mobile提供4種預設樣式類別來建立不同欄數的版面配置，如下所示： • 二欄版面配置：使用ui-grid-a樣式類別。 • 三欄版面配置：使用ui-grid-b樣式類別。 • 四欄版面配置：使用ui-grid-c樣式類別。 • 五欄版面配置：使用ui-grid-d樣式類別。

  37. 多欄版面配置-多欄版面配置 • jQuery Mobile的ui-grid樣式類別可以將<div>、<section>和<fieldset>等容器標籤建立成格子容器，其內容就是格子區塊，例如：二欄的格子容器，如下所示： • <div class="ui-grid-a"> • <div class="ui-block-a"> • <a href="#" data-role="button">確定</a> • </div> • <div class="ui-block-b"> • <a href="#" data-role="button">取消</a> • </div> • </div> 2個class屬性值ui-block-a和ui-block-b的div子元素，可以建立兩欄的左和右區塊

  38. 表格版面配置-說明 • 表格版面配置是建立多列的格子容器（Multiple Row Grids），在格子容器擁有多列的格子區塊，例如：三欄版面配置（ui-grid-b樣式類別）擁有6個格子區塊，即二列，每列3個區塊（因為三欄），在子div元素需要重複2次class屬性值ui-block-a/b/c，即a、b、c、a、b、c。

  39. 表格版面配置-範例 • <section class="ui-grid-b"> • <div class="ui-block-a"><img src="sun.jpg"/></div> • <div class="ui-block-b"><img src="sun.jpg"/></div> • <div class="ui-block-c"><img src="sun.jpg"/></div> • <div class="ui-block-a"><img src="sun.jpg"/></div> • <div class="ui-block-b"><img src="sun.jpg"/></div> • <div class="ui-block-c"><img src="sun.jpg"/></div> • </section>

More Related