URL: http://goo.gl/wX4k2g
2015年3月10日 星期二
JavaFX 8技術手冊 (Google Play電子書)
今天 (2015-03-10) 上架的電子書 –「JavaFX 8技術手冊」，透過Google Play發行，電子書似乎是現在的趨勢。
URL: http://goo.gl/wX4k2g
© Chia-Hui Huang
URL: http://goo.gl/wX4k2g
2015年3月8日 星期日
jQuery Mobile - Theme
jQuery Mobile以data-theme屬性設定主題 (Theme)，主題分別由A到Z，稱為Swatch (色板)，其中A與B為內建主題 (預設為A)，C到Z為使用者自訂主題，可透過ThemeRoller設定主題中各物件的顏色、字型、圖示、陰影等。
data-theme屬性相當彈性，可置於任何data-role部份，以下範例將data-theme="a"屬性置於page部份，因此全頁之物件均為同一主題：
以下範例將全頁主題設為B：
亦可針對頁首、內文、頁尾或個別物件設定主題，例如：
除了內建主題之外，目前有以下3rd Party的主題可供使用：
Native Droid Theme
以Native Droid Theme為例，可自http://nativedroid.godesign.ch下載nativeDroid-latest.zip檔案，並將zip解壓縮至jQuery Mobile的相關目錄，為能執行Native Droid Theme，除了原有jQuery Mobile的css與js檔案之外，另需在<head></head>網頁標籤部份匯入以下Native Droid Theme之css與js檔案：
下圖為暗色主題與藍色的物件顏色之Native Droid Theme：
以此類推，以下範例選擇明亮主題與紅色的物件顏色：
下圖為明亮主題與紅色的物件顏色之Native Droid Theme：
Android Theme
Android Theme是由Jonas Gehring所開發之Android主題，可自https://github.com/jjoe64/jquery-mobile-android-theme下載jquery-mobile-android-theme-master.zip檔案，並將zip解壓縮至jQuery Mobile的相關目錄，為能執行Android Theme，另需在<head></head>網頁標籤部份匯入以下Android Theme之css與js檔案，不過經過實測，目前版本與新版的jQuery Mobile 1.4.5並不相容，無法產生正常的主題效果，建議使用舊版的jQuery Mobile：
下圖依序為A到D之Android Theme：
iOS Theme
iOS Theme是由Tait Brown所開發之iOS主題，可自https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme下載iOS-Inspired-jQuery-Mobile-Theme-master.zip檔案，並將zip解壓縮至jQuery Mobile的相關目錄，同時需複製iOS Theme的images目錄。
為能執行iOS Theme，另需在<head></head>網頁標籤部份匯入iOS Theme之styles.css檔案，不過經過實測，目前版本與新版的jQuery Mobile 1.4.5並不相容，無法產生正常的主題效果，建議使用舊版的jQuery Mobile。此外為能在Apple iOS正常執行，另需加入apple-mobile-web-app-capable之設定，例如：
下圖為iOS Theme之示範：
Graphite
Graphite是由Max Lynch, Ben Sperry與Joe Nelson所開發之主題，特色是提供多種主題色彩，包括aloe, candy, melon, mint, royal, sand, slate, water共8種主題色彩。
Graphite可自http://driftyco.github.io/graphite下載graphite-1.3.1_4.zip檔案，並將zip解壓縮至jQuery Mobile的相關目錄，為能執行Android Theme，另需在<head></head>網頁標籤部份匯入jquery.mobile-1.3.1.css檔案。由於Graphite將原有的jquery.mobile-1.3.1.css檔案改為各種主題色彩對應的css檔案，因此不需使用data-theme屬性。
【執行結果】
下圖依序為aloe, candy, melon, mint, royal, sand, slate, water之Graphite Theme：
【參考資料】
[1] XAMPP：https://www.apachefriends.org
[2] jQuery Mobile：http://jquerymobile.com
[3] jQuery：http://jquery.com
[4] ThemeRoller：http://themeroller.jquerymobile.com
[5] Native Droid Theme：http://nativedroid.godesign.ch
[6] Android Theme：https://github.com/jjoe64/jquery-mobile-android-theme
[6] iOS Theme：https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme
[7] Graphite：http://driftyco.github.io/graphite
© Chia-Hui Huang
data-theme屬性相當彈性，可置於任何data-role部份，以下範例將data-theme="a"屬性置於page部份，因此全頁之物件均為同一主題：
【執行結果】
【執行結果】
【執行結果】BackTheme
- Native Droid Theme.
- Android Theme.
- iOS Theme.
- Graphite.
- BlackBerry 10 Theme.
- Metro Theme for Windows Phone.
- Twitter Bootstrap jQuery Mobile Theme.
- Flat UI Theme.
- Square UI Theme.
Native Droid Theme
以Native Droid Theme為例，可自http://nativedroid.godesign.ch下載nativeDroid-latest.zip檔案，並將zip解壓縮至jQuery Mobile的相關目錄，為能執行Native Droid Theme，除了原有jQuery Mobile的css與js檔案之外，另需在<head></head>網頁標籤部份匯入以下Native Droid Theme之css與js檔案：
- font-awesome.min.css
- jquerymobile.nativedroid.css
- jquerymobile.nativedroid.XX.css
- jquerymobile.nativedroid.color.XXX.css
- nativedroid.script.js
... ...接著需將主題設定為B，則屬性為data-theme="b"：
【執行結果】...
下圖為暗色主題與藍色的物件顏色之Native Droid Theme：
... ...並將data-theme="b"屬性置於page部份：
【執行結果】...
下圖為明亮主題與紅色的物件顏色之Native Droid Theme：
Android Theme是由Jonas Gehring所開發之Android主題，可自https://github.com/jjoe64/jquery-mobile-android-theme下載jquery-mobile-android-theme-master.zip檔案，並將zip解壓縮至jQuery Mobile的相關目錄，為能執行Android Theme，另需在<head></head>網頁標籤部份匯入以下Android Theme之css與js檔案，不過經過實測，目前版本與新版的jQuery Mobile 1.4.5並不相容，無法產生正常的主題效果，建議使用舊版的jQuery Mobile：
- android-theme.css
- jquery.mobile.android-theme.js
... ...Android Theme提供A到D四種不同的主題樣式，以下範例將data-theme="a"屬性置於page部份：
【執行結果】...
下圖依序為A到D之Android Theme：
iOS Theme是由Tait Brown所開發之iOS主題，可自https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme下載iOS-Inspired-jQuery-Mobile-Theme-master.zip檔案，並將zip解壓縮至jQuery Mobile的相關目錄，同時需複製iOS Theme的images目錄。
為能執行iOS Theme，另需在<head></head>網頁標籤部份匯入iOS Theme之styles.css檔案，不過經過實測，目前版本與新版的jQuery Mobile 1.4.5並不相容，無法產生正常的主題效果，建議使用舊版的jQuery Mobile。此外為能在Apple iOS正常執行，另需加入apple-mobile-web-app-capable之設定，例如：
... ...並將data-theme="a"屬性置於page部份：
【執行結果】...
下圖為iOS Theme之示範：
Graphite是由Max Lynch, Ben Sperry與Joe Nelson所開發之主題，特色是提供多種主題色彩，包括aloe, candy, melon, mint, royal, sand, slate, water共8種主題色彩。
Graphite可自http://driftyco.github.io/graphite下載graphite-1.3.1_4.zip檔案，並將zip解壓縮至jQuery Mobile的相關目錄，為能執行Android Theme，另需在<head></head>網頁標籤部份匯入jquery.mobile-1.3.1.css檔案。由於Graphite將原有的jquery.mobile-1.3.1.css檔案改為各種主題色彩對應的css檔案，因此不需使用data-theme屬性。
【執行結果】
下圖依序為aloe, candy, melon, mint, royal, sand, slate, water之Graphite Theme：
[1] XAMPP：https://www.apachefriends.org
[2] jQuery Mobile：http://jquerymobile.com
[3] jQuery：http://jquery.com
[4] ThemeRoller：http://themeroller.jquerymobile.com
[5] Native Droid Theme：http://nativedroid.godesign.ch
[6] Android Theme：https://github.com/jjoe64/jquery-mobile-android-theme
[6] iOS Theme：https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme
[7] Graphite：http://driftyco.github.io/graphite
© Chia-Hui Huang
jQuery Mobile - Navbar
導覽列 (Navigation Bar) 可顯示數個方塊狀的導覽按鈕，以做為導覽之用。jQuery Mobile以<div data-role="navbar">標籤處理導覽列，例如以下範例將導覽列置於內文部份，其中class="ui-btn-active"代表預設按鈕：
欲恢復頁面的預設按鈕狀態，可加入ui-state-persist標籤，例如：
欲將導覽列置於頁首部份，只需將<div data-role="navbar">標籤置於<div data-role="header">部份則完成，例如：
以此類推，欲將導覽列置於頁尾部份，只需將<div data-role="navbar">標籤置於<div data-role="footer">部份則完成，例如：
而圖示的位置分別由以下data-iconpos屬性設定，data-iconpos屬性需置於<div data-role="navbar">標籤之中：
例如將圖示位於文字的左方：
【參考資料】
[1] XAMPP：https://www.apachefriends.org
[2] jQuery Mobile：http://jquerymobile.com
[3] jQuery：http://jquery.com
© Chia-Hui Huang
【執行結果】
若導覽按鈕超過五個時，將以並排的方式呈現：
【執行結果】
【執行結果】
此外，亦可加入預設圖示，但data-iconpos="notext"屬性並沒作用，仍會顯示文字：
【執行結果】
| 屬性 | 說明 |
| 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月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
【執行結果】
【執行結果】
【執行結果】
【執行結果】
【執行結果】
右圖為點選選項時的效果：
【執行結果】
JavaFX 8技術手冊.
JavaFX遊戲程式設計.
Visual C++ Web程式設計.
深入研究JavaFX 2.
深入研究Java Swing.
完全探索網路程式設計 - 使用Java.
[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>網頁標籤之屬性設定：
若只有一個按鈕，預設置放在頁首左側，欲將按鈕置放在頁首右側，可在<a></a>中加入class="ui-btn-right"屬性；反之，欲將按鈕置放在頁首左側，可在<a></a>中加入class="ui-btn-left"屬性：
亦可加入以下預設圖示：
例如：
若加入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
- data-role="page"：畫面部份。
- data-role="header"：頁首部份。
- data-role="content"：內文部份。
- data-role="footer"：頁尾部份。
欲在頁首部份加入按鈕，可使用以下方式：............
下列寫法可得到相同的效果：
【執行結果】
【執行結果】Header
下一頁...
| 屬性 | 說明 | 屬性 | 說明 |
| 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圖示 |
例如：
【執行結果】
【執行結果】
【執行結果】
【執行結果】
[1] XAMPP：https://www.apachefriends.org
[2] jQuery Mobile：http://jquerymobile.com
[3] jQuery：http://jquery.com
© Chia-Hui Huang
訂閱：
文章 (Atom)