2015年3月7日 星期六

jQuery Mobile - Footer

與頁首一樣，也可以在頁尾部份加入按鈕，但與頁首不同的是，頁尾的按鈕依序由左至右排列，例如：
【執行結果】
亦可加入預設圖示：
【執行結果】
若加入data-iconpos="notext"屬性，則僅顯示圖示：
【執行結果】
此外與頁首不同的是，可使用data-role="controlgroup"屬性，群組數個頁尾按鈕：
【執行結果】
除此之外，亦可使用HTML表單物件，以下範例示範<select>選項：
【執行結果】

右圖為點選選項時的效果：
若內文部份的內容過多時，當向上滑動螢幕時，將導致頁尾部份跟著向下捲動而消失，為避免此情況發生，可加入data-position="fixed"屬性，以固定頁尾部份，以下範例同時固定頁首與頁尾部份：
【執行結果】
特別是在顯示尺寸較大的相片時，固定頁首與頁尾部份，可得到較佳的效果，例如：
【參考資料】

[1] XAMPP：https://www.apachefriends.org
[2] jQuery Mobile：http://jquerymobile.com
[3] jQuery：http://jquery.com

© Chia-Hui Huang
張貼者： 於 沒有留言:
標籤：

jQuery Mobile - Header

jQuery Mobile以page定義畫面，並將page分為header (頁首)、content (內文) 與footer (頁尾) 三個部份，分別由以下<div>網頁標籤之屬性設定：
  • data-role="page"：畫面部份。
  • data-role="header"：頁首部份。
  • data-role="content"：內文部份。
  • data-role="footer"：頁尾部份。
其程式架構如下所示：

  ...
  

    ...
  

  

    ...
  

  

    ...
欲在頁首部份加入按鈕，可使用以下方式：
下列寫法可得到相同的效果：
【執行結果】
若只有一個按鈕，預設置放在頁首左側，欲將按鈕置放在頁首右側，可在<a></a>中加入class="ui-btn-right"屬性；反之，欲將按鈕置放在頁首左側，可在<a></a>中加入class="ui-btn-left"屬性：
【執行結果】
亦可加入以下預設圖示：

屬性 說明 屬性 說明
data-icon="action" Action圖示 data-icon="alert" Alert圖示
data-icon="arrow-d" Down Arrow圖示 data-icon="arrow-d-l" Down Left Arrow圖示
data-icon="arrow-d-r" Down Right Arrow圖示 data-icon="arrow-l" Left Arrow圖示
data-icon="arrow-r" Right Arrow圖示 data-icon="arrow-u" Up Arrow圖示
data-icon="arrow-u-l" Up Left Arrow圖示 data-icon="arrow-u-r" Up Right Arrow圖示
data-icon="audio" Audio圖示 data-icon="back" Back圖示
data-icon="bars" Bars圖示 data-icon="bullets" Bullets圖示
data-icon="calendar" Calendar圖示 data-icon="camera" Camera圖示
data-icon="carat-d" Carat Down圖示 data-icon="carat-l" Carat Left圖示
data-icon="carat-r" Carat Right圖示 data-icon="carat-u" Carat Up圖示
data-icon="check" Check圖示 data-icon="clock" Clock圖示
data-icon="cloud" Cloud圖示 data-icon="comment" Comment圖示
data-icon="delete" Delete圖示 data-icon="edit" Edit圖示
data-icon="eye" Eye圖示 data-icon="forbidden" Forbidden圖示
data-icon="forward" Forward圖示 data-icon="gear" Gear圖示
data-icon="grid" Grid圖示 data-icon="heart" Heart圖示
data-icon="home" Home圖示 data-icon="info" Information圖示
data-icon="location" Location圖示 data-icon="lock" Lock圖示
data-icon="mail" Mail圖示 data-icon="minus" Minus圖示
data-icon="navigation" Navigation圖示 data-icon="phone" Phone圖示
data-icon="plus" Plus圖示 data-icon="power" Power圖示
data-icon="recycle" Recycle圖示 data-icon="refresh" Refresh圖示
data-icon="search" Search圖示 data-icon="shop" Shop圖示
data-icon="star" Star圖示 data-icon="tag" Tag圖示
data-icon="user" User圖示 data-icon="video" Video圖示

例如：
【執行結果】
若加入data-iconpos="notext"屬性，則僅顯示圖示：
【執行結果】
若內文部份的內容過多時，當向下滑動螢幕時，將導致頁首部份跟著向上捲動而消失，為避免此情況發生，可加入data-position="fixed"屬性，以固定頁首部份，例如：
【執行結果】
若頁首不需要顯示標題文字時，除了不設定標題文字之外，另外需加入<span class="ui-title" />網頁標籤，若沒有加入<span class="ui-title" />，將不顯示頁首部份僅顯示按鈕，例如：
【執行結果】
【參考資料】

[1] XAMPP：https://www.apachefriends.org
[2] jQuery Mobile：http://jquerymobile.com
[3] jQuery：http://jquery.com

© Chia-Hui Huang
張貼者： 於 沒有留言:
標籤：

2015年3月6日 星期五

jQuery Mobile - Listview

一般的HTML網頁是以<ol></ol>與<ul></ul>網頁標籤分別定義編號與項目符號，並以<li></li>網頁標籤定義各項目清單 (List)，例如：
    
  
  1. JavaFX 8技術手冊.
    2. 
  
  2. JavaFX遊戲程式設計.
    3. 
  
  3. Visual C++ Web程式設計.
    4. 
  
  4. 深入研究JavaFX 2.
    5. 
  
  5. 深入研究Java Swing.
    6. 


...

     
  
  • Graphical Decision Model.
    • 
  
  • Big Data.
    • 
  
  • Cloud Computing.
    • 
  
  • Rich Internet Application.
    • 
  
  • Supply Chain Management.
    •
jQuery Mobile則是以<ul></ul>網頁標籤與data-role="listview"屬性定義Listview，例如：

  

    
Listview

  

  

    
    
      
  • JavaFX 8技術手冊.
    • 
      
  • JavaFX遊戲程式設計.
    • 
      
  • Visual C++ Web程式設計.
    • 
      
  • 深入研究JavaFX 2.
    • 
      
  • 深入研究Java Swing.
    • 
      
  • 完全探索網路程式設計 - 使用Java.
    • 
      ...
【執行結果】

以下為以Android智慧型手機瀏覽器執行的結果：
若在<li></li>中加入<a></a>網頁標籤，則成為含有超連結的Listview，並在右側顯示向右圖示，代表含有超連結，當點選清單時則可連結至指定的超連結：
【執行結果】
若將<ul></ul>改為<ol></ol>，則成為編號之項目清單，例如：
【執行結果】
此外，可在項目清單中加入圖片，而圖片最大顯示範圍，長寬分別為80px：
【執行結果】
在<img>中加入class="ui-li-icon"屬性，則以圖示代替項目清單：
【執行結果】
在<ul></ul>中加入data-inset="true"屬性，則將項目清單分成兩部份，其右側將新增一連結圖示部份，此外在<ul></ul>中再加入data-split-icon屬性，代表此部份所有圖示均一致，以下範例將右側圖示設為Gear圖示：
【執行結果】
亦可以下列方式設定個別圖示：
【執行結果】
以下範例加入data-filter="true"屬性以建立搜尋篩選器 (Search Filter)：
【執行結果】

輸入關鍵字則顯示相關清單：
在<a></a>中再加入<span class="ui-li-count"></span>，則在項目清單右側顯示計數器 (Counter)：
【執行結果】
【參考資料】

[1] XAMPP：https://www.apachefriends.org
[2] jQuery Mobile：http://jquerymobile.com
[3] jQuery：http://jquery.com

© Chia-Hui Huang
張貼者： 於 沒有留言:
標籤：
訂閱： 文章 (Atom)