2015年3月6日 星期五

jQuery Mobile - Listview

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

jQuery Mobile - Button

一般的HTML網頁是以<button></button>網頁標籤定義按鈕 (Button),若為超連結 (Hyperlink),則以<a></a>網頁標籤定義,例如:

Hyperlink
jQuery Mobile的按鈕同樣以<button></button>網頁標籤定義,但若按鈕含有超連結,除了以<a></a>網頁標籤定義之外,並需加入以data-role="button"屬性,例如:

Button

Button with Hyperlink
同樣的,為能執行jQuery Mobile應用程式,需在<head></head>網頁標籤部份匯入以下之css與js檔案:
  • jquery.mobile-1.4.5.min.css
  • jquery.mobile-1.4.5.min.js
  • jquery-2.1.0.min.js
例如:
... 






...
【執行結果】

以下為以Android智慧型手機瀏覽器執行的結果,雖然兩者的樣式相同,但若點選下方的按鈕,則可連結至指定的超連結:
以下範例加入數個超連結按鈕:

【執行結果】

同樣的,點選按鈕則可連結至指定的超連結:
除了data-role="button"屬性之外,可加入data-mini="true"屬性改為迷你按鈕,例如:

Mini v.s. Normal Button

【執行結果】
欲群組按鈕,可使用<div data-role="controlgroup"></div>網頁標籤,預設為垂直群組;欲使用水平群組,需額外加入data-type="horizontal"屬性,例如以下範例分別設定垂直群組與水平群組:

Vertical Group

Horizontal Group

【執行結果】
此外,按鈕可顯示預設圖示分別由以下data-icon屬性設定:

屬性 說明 屬性 說明
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-iconpos屬性設定:

屬性 說明
data-iconpos="top" 圖示位於文字的上方
data-iconpos="bottom" 圖示位於文字的下方
data-iconpos="left" 圖示位於文字的左方
data-iconpos="right" 圖示位於文字的右方

例如:

【執行結果】
【參考資料】

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

© Chia-Hui Huang

2015年3月5日 星期四

jQuery Mobile網頁架構

HTML網頁將程式分為head與body兩部份,head為網頁標題,body為網頁內容,jQuery Mobile以page定義畫面,並將page分為header (頁首)、content (內文) 與footer (頁尾) 三個部份,如下圖所示:
為能執行jQuery Mobile應用程式,需在<head></head>網頁標籤部份匯入以下之css與js檔案:
  • jquery.mobile-1.4.5.min.css
  • jquery.mobile-1.4.5.min.js
  • jquery-2.1.0.min.js
其程式如下所示:
... 






...
其中以下程式為調整平版電腦或智慧型手機的螢幕寬度,viewport定義平版電腦或智慧型手機的顯示畫面,content用以設定螢幕的寬度,為隨著平版電腦或智慧型手機之不同而自動調整螢幕寬度,因此設定為width=device-width,代表以裝置之寬度為螢幕寬度,如此則可隨著平版電腦或智慧型手機之不同而自動調整螢幕寬度:

...
其餘相關viewport設定如下表所示:

參數 說明
height 設定螢幕高度,若設定為device-height,代表以裝置之高度為螢幕高度。
width 設定螢幕寬度,預設為980像素,若設定為device-width,代表以裝置之寬度為螢幕寬度。
initial-scale 設定畫面的顯示比例,若設定為1.0,代表畫面顯示寬度與螢幕寬度一致。
minimum-scale 設定畫面的最小顯示比例。
maximum-scale 設定畫面的最大顯示比例。
user-scalable 設定是否允許使用者縮放畫面,若設定為Yes,則使用者可以縮放畫面。

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

page

header

content

footer

【執行結果】

以下為以Apple iPad平版電腦瀏覽器執行的結果:
以下為以Android智慧型手機瀏覽器執行的結果:
【參考資料】

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

© Chia-Hui Huang

2015年3月4日 星期三

jQuery Mobile環境設定

jQuery Mobile應用程式與一般的HTML網頁程式不同,HTML網頁不需Web Server則可直接在本機電腦以瀏覽器執行,但jQuery Mobile應用程式必須在Web Server環境才能正常執行。模擬用的Web Server有很多免費的軟體,其中XAMPP可以說是其中的佼佼者,XAMPP為Apache+MySQL+PHP +Perl之縮寫,因此其中XAMPP亦支援MySQL, PHP, Perl之執行。

XAMPP安裝程式可至 https://www.apachefriends.org 下載,目前版本為5.6.3,支援Microsoft Windows, Mac OS X, Linux等作業系統,以Microsoft Windows作業系統為例,自XAMPP網站下載XAMPP安裝程式 (xampp-win32-5.6.3-0-VC11-installer.exe) 之後,直接執行安裝程式,其中安裝目錄選擇預設目錄C:\xampp,待安裝完成之後,安裝程式將詢問是否啟動XAMPP Control Panel,如下圖所示,勾選選項並按「Finish」按鈕,則完成安裝並啟動XAMPP Control Panel。

XAMPP Control Panel如下圖所示,預設支援Apache, MySQL, FileZilla, Mercury與Tomcat服務,jQuery Mobile應用程式需以Apache執行,因此點選Apache服務右側的「Start」按鈕則可啟動Apache服務。
啟動Apache服務時,將出現以下之防火牆警告訊息,分別依需求,勾選「私人網路」或「公用網路」選項,並點選「允許存取」按鈕則完成XAMPP之設定。
為執行jQuery Mobile,需自 http://jquerymobile.com 網站下載jQuery Mobile套件,目前版本為1.4.5,檔案包括:
  • jquery.mobile-1.4.5.min.css
  • jquery.mobile-1.4.5.min.js
此外,並需要jQuery電腦版之JS檔案,可自 http://jquery.com 網站下載,例如jquery-2.1.0.min.js。其中檔案名稱含有「min」,代表此檔案經過壓縮處理,較沒有「min」字樣的檔案為小,因此下載與匯入時間較短。

接著在XAMPP的安裝目錄C:\xampp\htdocs下建立一目錄如mobile,並在mobile目錄下分別建立css與js目錄,將上述之jquery.mobile-1.4.5.min.css複製至css目錄下、jquery-2.1.0.min.js與jquery.mobile-1.4.5.min.js複製至js目錄下,如此則完成jQuery Mobile的環境設定。

為測試是否安裝正確,接著在C:\xampp\htdocs\mobile目錄下建立一index.html網頁,其內容如下:

...
黃嘉輝教學網站 






...
  
...
內容基本上類似於一般的HTML網頁,但為能執行jQuery Mobile,因此在網頁標題 (Head) 部份加入上述之css與js檔案設定:
黃嘉輝教學網站 






...
【執行結果】

欲執行上述程式,可使用平版電腦或智慧型手機的瀏覽器執行http://<主機IP Address>/mobile/index.html,以下為以Apple iPad平版電腦執行的結果:
以下為以Android智慧型手機執行的結果:
【參考資料】

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

© Chia-Hui Huang

2015年3月3日 星期二

jQuery Mobile

之前有過以jQuery開發網頁的經驗,現在要認真學習jQuery Mobile,花了一個下午,寫了一些範例,jQuery Mobile真的讓人驚豔,簡單易學,而且網路一堆實作範例,不怕找不到Idea,接著要在本Blog分享jQuery Mobile的學習經驗。

© Chia-Hui Huang

2015年3月2日 星期一

jQuery - Sliding Image Menu (2)

除了預設的設定之外,亦可透過JavaScript設定jQuery Sliding Image Menu的不同效果,以下是設定以Fade in & out (淡入淡出),其中mode屬性設為fade、easing屬性設為jswing:

...
【執行結果】

當以滑鼠移至Sliding Image Menu上方時,將以淡入淡出的效果顯示選單:
以下是設定以Sequential Fade in & out (連續式淡入淡出) 的效果顯示選單,其中mode屬性設為seqFade、easing屬性設為jswing、seqfactor屬性設為100:

...
以下是設定以Horizontal Slide (水平滑動) 的效果顯示選單,其中mode屬性設為horizontalSlide、easing屬性設為jswing、seqfactor屬性設為100:

...
以下是設定以Horizontal Bounce Slide (水平彈跳滑動) 的效果顯示選單,其中mode屬性設為horizontalSlide、easing屬性設為easeOutBounce、seqfactor屬性設為100:

...
以下是設定以Sequential Horizontal Slide (連續式水平滑動) 的效果顯示選單,其中mode屬性設為seqHorizontalSlide、easing屬性設為jswing、seqfactor屬性設為100:

...
以下是設定以Vertical Slide (垂直滑動) 的效果顯示選單,其中mode屬性設為verticalSlide、easing屬性設為jswing、seqfactor屬性設為100:

...
以下是設定以Sequential Vertical Slide (連續式垂直滑動) 的效果顯示選單,其中mode屬性設為seqVerticalSlide、easing屬性設為jswing、seqfactor屬性設為100:

...
以下是設定以Vertical Alternating Slide (垂直交替滑動) 的效果顯示選單,其中mode屬性設為verticalSlideAlt、easing屬性設為jswing、seqfactor屬性設為100:

...
【參考資料】

[1] jQuery:http://jquery.com

© Chia-Hui Huang

2015年3月1日 星期日

jQuery - Sliding Image Menu (1)

jQuery Sliding Image Menu需在<head></head>網頁標籤部份匯入以下js檔案:
  • jquery-2.1.0.min.js
  • jquery.bgImageMenu.js
  • jquery.easing.js
其程式如下所示:
 



...
並以JavaScript設定預設Menu的背景圖片:
  
...
接著以<div></div>網頁標籤設定Sliding Image Menu選項:

【執行結果】

當以滑鼠移至Sliding Image Menu上方時,將顯示選單,此外背景圖片會隨著選單之不同而自動更新:
【參考資料】

[1] jQuery:http://jquery.com

© Chia-Hui Huang

jQuery - Rolling Rounded Menu

jQuery Rolling Rounded Menu需在<head></head>網頁標籤部份匯入以下js檔案:
  • jquery-2.1.0.min.js
  • jquery-css-transform.js
  • jquery-animate-css-rotate-scale.js
其程式如下所示:
 



...
並以JavaScript設定Hover, Expand與Collapse等動作:

...
接著以<div></div>網頁標籤設定Rolling Rounded Menu選項:
 
【執行結果】

當以滑鼠移至Rolling Rounded Menu上方時,將以旋轉的方式顯示Rolling Rounded Menu:
Rolling Rounded Menu中的內容亦可為文字欄位,如下圖所示:
亦可為數個超連結,如下圖所示:
【參考資料】

[1] jQuery:http://jquery.com

© Chia-Hui Huang

jQuery - Lavalamp Menu

jQuery Lavalamp Menu需在<head></head>網頁標籤部份匯入以下js檔案:
  • jquery-2.1.0.min.js
  • lavalamp.js
其程式如下所示:
 


...
接著以<li></li>網頁標籤設定Lavalamp Menu選項則完成,其中以<li class="active">設定預設的Menu選項:

【執行結果】

當以滑鼠移至Lavalamp Menu上方時,Menu選項將以灰框顯示:
【參考資料】

[1] jQuery:http://jquery.com
[2] jQuery Lavalamp Menu Plugin:http://plugins.jquery.com/lavalamp/

© Chia-Hui Huang

jQuery - Sweet Menu

jQuery Sweet Menu需在<head></head>網頁標籤部份匯入以下js檔案:
  • jquery-2.1.0.min.js
  • jquery.sweet-menu-1.0.js
  • jquery.easing.js
其程式如下所示:
 



...
並以JavaScript定義圖片等設定:

...
最後以<li></li>網頁標籤設定Sweet Menu選項則完成,相當簡單:

【執行結果】

當以滑鼠移至Sweet Menu上方時,將以延伸的方式顯示Sweet Menu:
【參考資料】

[1] jQuery:http://jquery.com
[2] jQuery Sweet Menu Plugin:http://www.jquery-plugins.info/sweet-menu-00015315.htm

© Chia-Hui Huang

2015年2月9日 星期一

JavaFX Cell Factory (5) 日期選擇器

今天刊登於CodeData網站,有關JavaFX 8新增的日期選擇器 (Date Picker) 如何設定Cell Factory,藉此將日期選擇器中的每一個日期變更為其他內容與格式:

http://www.codedata.com.tw/java/javafx-cell-factory-date-picker/

© Chia-Hui Huang

2015年2月2日 星期一

JavaFX Cell Factory (4) 樹狀表格

今天刊登於CodeData網站,有關JavaFX 8新增的樹狀表格 (Tree Table) 如何設定Cell Factory,將每一個樹狀表格單元變更為其他物件如核取方塊 (Check Box) 、選項方塊 (Choice Box)、複合方塊 (Combo Box) 或文字欄位 (Text Field) 等物件,以改變每一個樹狀表格單元的形式:

http://www.codedata.com.tw/java/javafx-cell-factory-tree-table/

© Chia-Hui Huang

2015年1月28日 星期三

JavaFX 3D (GitBook電子書)

今天終於完成JavaFX 3D的GitBook電子書,第一次使用GitBook的Markdown語法排版電子書,主要是練習電子書的排版,蠻有趣的經驗,不過有些小缺點,例如轉成PDF之後,有些中文字會以不同的字型顯示;圖片無法調整大小等。

JavaFX 3D: https://www.gitbook.com/book/leohkkimo/javafx-3d/details

章節包括:

  • JavaFX.
  • 基本3D物件.
  • Phong Material.
  • Light.
  • Sub Scene.
  • Mesh View.
  • Platonic Solid.
© Chia-Hui Huang

2015年1月26日 星期一

JavaFX Cell Factory (3) 表格物件

今天刊登於CodeData網站,有關JavaFX的表格物件 (Table) 如何設定Cell Factory,將每一個表格單元變更為其他物件如核取方塊 (Check Box) 、選項方塊 (Choice Box)、複合方塊 (Combo Box)、進度列 (Progress Bar) 或文字欄位 (Text Field) 等物件,以改變每一個表格單元的形式:

http://www.codedata.com.tw/java/javafx-cell-factory-3-table-object/

© Chia-Hui Huang

2015年1月19日 星期一

JavaFX Cell Factory (2) 樹狀物件

今天刊登於CodeData網站,有關JavaFX的樹狀物件 (Tree) 如何設定Cell Factory,將每一個樹狀單元變更為其他物件如核取方塊 (Check Box)、選項方塊 (Choice Box)、複合方塊 (Combo Box) 或文字欄位 (Text Field) 等物件,以改變每一個樹狀單元的形式:

http://www.codedata.com.tw/java/javafx-cell-factory-2-tree-object/

© Chia-Hui Huang