jQuery Mobile 教程-安裝-頁面-過渡-按鈕-按鈕圖標(biāo)-混合開發(fā)框架

jQueryMobile教程-安裝-頁面-過渡-按鈕-按鈕圖標(biāo)-混合開發(fā)框架

jQueryMobile教程-安裝-頁面-過渡-按鈕-按鈕圖標(biāo)-混合開發(fā)框架

jQueryMobile教程

jQueryMobile教程

jQueryMobile簡介

jQueryMobile

jQueryMobile是創(chuàng)立移動web應(yīng)用程序的框架。

jQueryMobile適用于所有流行的智能手機(jī)和平板電腦。

jQueryMobile使用HTML5和CSS3通過盡可能少的腳本對頁面進(jìn)行布局。

每章中的TIY實例

通過我們的在線編輯器，您能夠編輯代碼，然后點擊提交按鈕來查看結(jié)果。

實例

在此處寫入標(biāo)題

在此處寫入正文

在此處寫入頁腳文本

請點擊親自試一試按鈕來查看結(jié)果。

jQueryMobile安裝

jQueryMobile簡介

jQueryMobile頁面

向您的網(wǎng)頁添加jQueryMobile

有多個方法可供您在網(wǎng)站上開始使用jQueryMobile。您可以：

從CDN引用jQueryMobile〔推薦〕

從jQuerymobile下載jQueryMobile庫

從CDN引用jQueryMobile

提示：CDN(ContentDeliveryNetwork)用于通過web來分發(fā)常用的文件，以此加快用戶的下載速度。

與jQuery類似，無需在您的計算機(jī)上安裝任何程序；您只需直接在HTML頁面中引用下列樣式表和JavaScript庫，這樣jQueryMobile就可以工作了：

jQueryMobileCDN:

親自試一試

下載jQueryMobile

如果您希望在效勞器上寄存jQueryMobile，您可以從jQuerymobile下載文件。

提示：請將下載的文件放到您希望使用的文件夾中。

提示：您是不是奇怪為什么標(biāo)簽中沒有type="text/javascript"屬性？

在HTML5中該屬性不是必需的。JavaScript是HTML5以及所有現(xiàn)代瀏覽器中的默認(rèn)腳本語言！

jQueryMobile頁面

使用jQueryMobile入門

提示：盡管jQueryMobile適用于所有移動設(shè)備，它在臺式計算機(jī)上仍然可能存在兼容性問題〔由于有限的CSS3支持〕。

因此在本教程中，我們推薦您使用谷歌的Chrome瀏覽器，以獲得最好的閱讀體驗。

實例

歡迎訪問我的主頁

我是一名移動開發(fā)者！

頁腳文本

親自試一試

例子解釋：

data-role="page"是顯示在瀏覽器中的頁面

data-role="header"創(chuàng)立頁面上方的工具欄〔常用于標(biāo)題和搜索按鈕〕

data-role="content"定義頁面的內(nèi)容，比方文本、圖像、表單和按鈕，等等

data-role="footer"創(chuàng)立頁面底部的工具欄

在這些容器中，您可以添加任意HTML元素-段落、圖像、標(biāo)題、列表等等。

提示：HTML5data-*屬性用于通過jQueryMobile為移動設(shè)備創(chuàng)立對觸控友好的交互外觀。

在jQueryMobile中添加頁面

在jQueryMobile，您可以在單一HTML文件中創(chuàng)立多個頁面。

請通過唯一的id來分隔每張頁面，并使用href屬性來連接彼此：

實例

轉(zhuǎn)到頁面二

轉(zhuǎn)到頁面一

親自試一試

注釋：包含大量內(nèi)容的web應(yīng)用程序會影響加載時間〔比方文本、鏈接、圖像和腳本等等〕。如果您不希望在內(nèi)部鏈接頁面，請使用外部文件：

轉(zhuǎn)到外部頁面

將頁面用作對話框

對話框是用來顯示信息或請求輸入的視窗類型。

如需在用戶點擊〔輕觸〕鏈接時創(chuàng)立一個對話框，請向該鏈接添加data-rel="dialog"：

實例

轉(zhuǎn)到頁面二

轉(zhuǎn)到頁面一

jQueryMobile過渡

jQueryMobile頁面

jQueryMobile按鈕

jQueryMobile包含了允許您選擇頁面翻開方式的CSS效果。

jQueryMobile過渡效果

jQueryMobile擁有一系列關(guān)于如何從一頁過渡到下一頁的效果。

注釋：如需實現(xiàn)過渡效果，瀏覽器必須支持CSS33D轉(zhuǎn)換：

瀏覽器支持

InternetExplorer10支持3D轉(zhuǎn)換〔更早的版本不支持〕

Opera仍然不支持3D轉(zhuǎn)換

過渡效果可應(yīng)用于任意鏈接或通過使用data-transition屬性進(jìn)行的表單提交：

滑動到頁面二

下面的表格展示了可與data-transition屬性一同使用的可用過渡：

過渡

描述

測試

fade

默認(rèn)。淡入淡出到下一頁。

測試

flip

從后向前翻動到下一頁。

測試

flow

拋出當(dāng)前頁面，引入下一頁。

測試

pop

像彈出窗口那樣轉(zhuǎn)到下一頁。

測試

slide

從右向左滑動到下一頁。

測試

slidefade

從右向左滑動并淡入到下一頁。

測試

slideup

從下到上滑動到下一頁。

測試

slidedown

從上到下滑動到下一頁。

測試

turn

轉(zhuǎn)向下一頁。

測試

none

無過渡效果。

測試

提示：在jQueryMobile中，淡入淡出效果在所有鏈接上都是默認(rèn)的〔如果瀏覽器支持〕。

提示：以上所有效果同時支持反向動作，示例，如果您希望頁面從左向右滑動，而不是從右向左，請使用值為"reverse"的data-direction屬性。在后退按鈕上是默認(rèn)的。

實例

滑動

jQueryMobile按鈕

jQueryMobile過渡

jQueryMobile圖標(biāo)

移動應(yīng)用程序構(gòu)建于觸控操作的便利性之上。

在jQueryMobile中創(chuàng)立按鈕

jQueryMobile中的按鈕可通過三種辦法創(chuàng)立：

使用元素

使用元素

使用data-role="button"的元素

按鈕

親自試一試

親自試一試

按鈕

親自試一試

提示：jQueryMobile中的按鈕會自動獲得樣式，這增強(qiáng)了他們在移動設(shè)備上的交互性和可用性。我們推薦您使用data-role="button"的元素來創(chuàng)立頁面之間的鏈接，而或元素用于表單提交。

導(dǎo)航按鈕

如需通過按鈕來鏈接頁面，請使用data-role="button"的元素：

實例

轉(zhuǎn)到頁面二

親自試一試

行內(nèi)按鈕

默認(rèn)情況下，按鈕會占據(jù)屏幕的全部寬度。如果您需要按鈕適應(yīng)其內(nèi)容，或者如果您需要兩個或多個按鈕并排顯示，請?zhí)砑觗ata-inline="true"：

實例

轉(zhuǎn)到頁面二

親自試一試

組合按鈕

jQueryMobile提供了對按鈕進(jìn)行組合的簡單辦法。

請將data-role="controlgroup"屬性與data-type="horizontal|vertical"一同使用，以規(guī)定水平或垂直地組合按鈕：

實例

按鈕1

按鈕2

按鈕3

親自試一試

提示：默認(rèn)情況下，組合按鈕是垂直分組的，彼此間沒有外邊距和空白。并且只有第一個和最后一個按鈕擁有圓角，在組合后就發(fā)明出了漂亮的外觀。

后退按鈕

如需創(chuàng)立后退按鈕，請使用data-rel="back"屬性〔會忽略錨的href值〕：

實例

返回

親自試一試

更多用于按鈕的data-*屬性

屬性

值

描述

實例

data-corners

true|false

規(guī)定按鈕是否有圓角。

測試

data-mini

true|false

規(guī)定是否是小型按鈕。

測試

data-shadow

true|false

規(guī)定按鈕是否有陰影。

測試

如需有關(guān)jQueryMobiledata-*屬性的完整信息，請訪問我們的jQueryMobileData屬性參考手冊。

下一節(jié)演示如何為按鈕添加圖標(biāo)。

jQueryMobile按鈕圖標(biāo)

jQueryMobile按鈕

jQueryMobile工具欄

jQueryMobile提供的一套圖標(biāo)可令您的按鈕更具吸引力。

為jQueryMobile按鈕添加圖標(biāo)

如需向您的按鈕添加圖標(biāo)，請使用data-icon屬性：

搜索

提示：您也可以在或元素中使用data-icon屬性。

下面我們列出了jQueryMobile提供的一些可用圖標(biāo)：

屬性值

描述

圖標(biāo)

實例

data-icon="arrow-l"

左箭頭

測試

data-icon="arrow-r"

右箭頭

測試

data-icon="delete"

刪除

測試

data-icon="info"

信息

測試

data-icon="home"

首頁

測試

data-icon="back"

返回

測試

data-icon="search"

搜索

測試

data-icon="grid"

網(wǎng)格

測試

如需關(guān)于jQueryMo