1 / 56

jQuery Mobile 工具列與ListView清單

jQuery Mobile 工具列與ListView清單. 教材. 陳會安 著（ 2013 ）， PHP+MySQL 與 jQuery Mobile 跨行動裝置網站開發， 碁峰資訊股份有限公司， ISBN 9789862768563 （書號 ACL037900 ） 楊仁和 譯（ 2012 ）， 深入淺出行動網站開發， 碁峰資訊股份有限公司， ISBN 9789862765005 （書號 A310 ）

mandar
Download Presentation

jQuery Mobile 工具列與ListView清單

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工具列與ListView清單

  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. 大綱 巡覽工具列 標準工具列 基本ListView清單 進階ListView清單

  4. 巡覽工具列 • 三種工具列 • 巡覽工具列（Navigation Bar） • 巡覽工具列提供網站的主巡覽功能 • 在iOS或Nokia稱為標籤列（Tab bar）。 • 標題工具列（Header Bar） • 頁面標題文字外，還可以加上2個按鈕。 • 通常是每一個頁面的第1個元素 • 註腳工具列（Footer Bar） • 通常是頁面的最後1個元素 • 提供頁面功能按鈕和版權文字等內容。

  5. 巡覽的基礎 • 網站巡覽（Site Navigation） • 超連結、選單、工具列或樹狀結構

  6. 建立巡覽工具列 <div data-role="navbar"> <ul> <li><a href="#">按鈕一</a></li> <li><a href="#">按鈕二</a></li> <li><a href="#">按鈕三</a></li> </ul> </div>

  7. 建立巡覽工具列 • 在標題區塊的巡覽工具列 • 在<div data-role="header">標籤之中 • 按鈕預設套用標題工具列樣式 • 在註腳區塊的巡覽工具列 • 在<div data-role="footer">標籤之中 • 按鈕套用註腳工具列的樣式 • 預選按鈕 • class="ui-btn-active"

  8. Ch5_1_2.html

  9. 在巡覽工具列按鈕加上圖示 <div data-role="navbar"> <ul> <li><a href="#" data-icon="home" class="ui-btn-active">報名研討會</a></li> <li><a href="#" data-icon="search">講師陣容</a></li> <li><a href="#" data-icon="info">課程內容</a></li> </ul> </div>

  10. Ch5_1_3.html

  11. 標準工具列 • 標題工具列 • 註腳工具列 • 標準固定模式 • 全螢幕固定模式 • 固定不變的註腳工具列

  12. 標題工具列 • 標題工具列在頁面的最上方 • 標題文字 • 左、右2個按鈕 • 作為巡覽用途 • 標題文字使用<h1> • 視情況使用<h1>~<h6>

  13. 標題工具列 <div data-role="header"> <a href="#">登入</a> <h1>Mobile研討會</h1> </div>

  14. Ch5_2_1.html

  15. 標題工具列 <div data-role="header"> <a href="#" data-theme="b">登入</a> <h1>Mobile研討會</h1> <a href="#" data-icon="gear">設定</a> </div>

  16. Ch5_2_1a.html

  17. 標題工具列 <div data-role="header"> <a href="#" data-icon="star">登入</a> <h1><img src="logo.jpg"></h1> <a href="#" data-icon="gear">設定</a> </div>

  18. Ch5_2_1b.html

  19. 註腳工具列 • 註腳工具列預設對巡覽工具列或元件沒有任何填充距離 • 使用class="ui-bar"加填充 <div data-role="footer" class="ui-bar"> <a href="#" data-icon="delete">刪除</a> <a href="#" data-icon="plus">新增</a> <a href="#" data-icon="gear">設定</a> </div>

  20. Ch5_2_2.html

  21. 標準固定模式 • 同行模式（Inline Mode） • 預設 • 如同頁面的第1行和最後1行 • 標準固定模式（Standard Fixed Mode） • 不論頁面尺寸，標題工具列位在螢幕的最上方；註腳工具列是位在最下方。 • 全螢幕固定模式（Full-screen Fixed Mode） • 點選或觸摸螢幕時，工具列自動隱藏。

  22. 標準固定模式 • 工具列固定顯示在螢幕可見區域最上方和最下方 • 文件自由捲動時工具列自動隱藏 • 標題和註腳區塊<div data-position="fixed">

  23. 標準固定模式 Ch5_2_3.html

  24. 標準固定模式 <div data-role="header" data-position="fixed"> <h1>Mobile研討會</h1> </div> <div data-role="content"> ...... </div> <div data-role="footer" data-position="fixed"> <h1>舉辦者: 陳會安</h1> </div>

  25. 全螢幕固定模式 • 工具列可見時一定固定顯示在螢幕可見區域的最上和最下方 • 半透明 • 工具列自動隱藏 • <div data-fullscreen='true'>

  26. 全螢幕固定模式 Ch5_2_4.html

  27. 全螢幕固定模式 <div data-role="page" id="home" data-fullscreen="true"> <div data-role="header" data-position="fixed"> <h1>Mobile研討會</h1> </div> <div data-role="content"> ...... </div> <div data-role="footer" data-position="fixed"> <h1>舉辦者: 陳會安</h1> </div> </div>

  28. 固定不變的註腳工具列 • 在註腳工具列建立整個Mobile網頁應用程式的巡覽工具列 • 切換頁面時，仍然固定顯示在最下方 • <div>加 • 相同的data-id屬性值 • data-position="fixed"

  29. 固定不變的註腳工具列 Ch5_2_5.html

  30. 固定不變的註腳工具列 <div data-role="footer" data-id="main" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#home" class="ui-btn-active ui-state-persist">首頁</a></li> <li><a href="#register">報名研討會</a></li> <li><a href="#speakers">講師陣容</a></li> </ul> </div> </div>

  31. 基本ListView清單 • 建立ListView元件 • 在ListView新增標題列 • 巢狀ListView • 互動列的圖示

  32. 建立ListView元件 • 清單與項目加上data-role="listview" <ul data-role="listview"> <li>HTML5</li> <li>CSS3</li> <li>JavaScript</li> </ul>

  33. 建立ListView元件 • 互動列清單 • 可點選的項目 • 互動列（Interactive Rows） <ul data-role="listview" data-inset="true"> <li><a href="http://jquery.com/download/">jQuery</a></li> <li><a href="http://jquerymobile.com/download/">jQuery Mobile</a></li> </ul>

  34. Ch5_3_1.html

  35. 在ListView加標題列 • data-role="list-divider" Ch5_3_2.html

  36. 在ListView加標題列 <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider">主選單</li> <li><a href="register.html">報名研討會</a></li> <li><a href="speakers.html">講師陣容</a></li> <li><a href="schedule.html">課程內容</a></li> <li><a href="information.html">聯絡資訊</a></li> </ul>

  37. 巢狀ListView • 巢狀清單 • Nested Lists Ch5_3_3.html

  38. 巢狀ListView <ul data-role="listview"> <li>客戶端網頁技術 <ol data-role="listview"> <li>HTML5</li> <li>CSS3</li> <li>JavaScript</li> </ol> </li> <li>伺服端網頁技術</li> .... </ul>

  39. 互動列的圖示 • 在<li>使用data-icon <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider">主選單</li> <li><a href="register.html">報名研討會</a></li> <li data-icon="false"><a href="speakers.html">講師陣容</a></li> <li data-icon="star"><a href="schedule.html">課程內容</a></li> <li data-icon="info"><a href="information.html">聯絡資訊</a></li> </ul>

  40. 互動列的圖示 Ch5_3_4.html <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider">主選單</li> <li><a href="register.html">報名研討會</a></li> <li data-icon="false"><a href="speakers.html">講師陣容</a></li> <li data-icon="star"><a href="schedule.html">課程內容</a></li> <li data-icon="info"><a href="information.html">聯絡資訊</a></li> </ul>

  41. 進階ListView清單 • 分割列清單 • 項目的文字內容 • 在清單項目顯示圖片 • 氣泡計數清單 • 篩選ListView清單的項目

  42. 分割列清單 • 一個項目兩種動作 • Split Row Lists

  43. Ch5_4_1.html

  44. 項目的文字內容 • 調整項目的重要性在 • <h2>或<h3> • 使用<p>表示比較不重 <ul data-role="listview" data-inset="true"> <li><h3>HTML5</h3></li> <li><p>CSS3</p></li> <li><h2>JavaScript</h2></li> </ul>

  45. 項目的文字內容 • 輔助說明文字加上class="ui-li-aside" <ul data-role="listview" data-inset="true"> <li data-role="list-divider">早餐店</li> <li><h3>漢堡</h3> <span class="ui-li-aside">$75</span> <li><h3>奶茶</h3> <div class="ui-li-aside">$25</div> </li> <li><h3>蛋餅</h3> <p class="ui-li-aside">$30</p> </li> </ul>

  46. Ch5_4_2.html

  47. 項目的文字內容 • 標題與描述 • 標題文字使用<h3>等HTML標題標籤 • 描述文字使用<p>標籤 <ul data-role="listview" data-inset="true"> <li> <a href="#"><h3>jQuery</h3> <p>一種JavaScript函數庫</p></a> </li> <li> <h3>jQuery Mobile</h3> <p>基於jQuery建立的手機平台框架</p> </li> </ul>

  48. 在清單項目顯示圖片 • 圖示列（Row Icons） • 在項目左邊顯示一張16 X 16的圖示 • 在<li>標籤中加<img> <ul data-role="listview"> <li> <imgsrc="icon.jpg" class="ui-li-icon"> <h3>jQuery函數庫</h3> <p>9:00 AM - 9:30 AM(講師 B)</p> <p>jQuery函數庫的實戰技巧.</p> </li> .... </ul>

  49. 在清單項目顯示圖片 • 縮圖列（Thumbnails） • 在項目左邊顯示一張80 X 80的縮圖 • 在<li>標籤中加上<img>標籤的圖片，但沒有指定class <ul data-role="listview"> <li> <imgsrc="speakerA.jpg"> <h3>講師 A</h3> <p>講師 A的經歷與專長</p> </li> ... </ul>

More Related