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

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

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

jQueryMobile教程

jQueryMobile教程

jQueryMobile簡(jiǎn)介

jQueryMobile

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

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

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

每章中的TIY實(shí)例

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

實(shí)例

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

在此處寫(xiě)入正文

在此處寫(xiě)入頁(yè)腳文本

請(qǐng)點(diǎn)擊親自試一試按鈕來(lái)查看結(jié)果。

jQueryMobile安裝

jQueryMobile簡(jiǎn)介

jQueryMobile頁(yè)面

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

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

從CDN引用jQueryMobile〔推薦〕

從jQuerymobile下載jQueryMobile庫(kù)

從CDN引用jQueryMobile

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

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

jQueryMobileCDN:

親自試一試

下載jQueryMobile

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

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

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

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

jQueryMobile頁(yè)面

使用jQueryMobile入門(mén)

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

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

實(shí)例

歡迎訪問(wèn)我的主頁(yè)

我是一名移動(dòng)開(kāi)發(fā)者！

頁(yè)腳文本

親自試一試

例子解釋：

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

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

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

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

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

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

在jQueryMobile中添加頁(yè)面

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

請(qǐng)通過(guò)唯一的id來(lái)分隔每張頁(yè)面，并使用href屬性來(lái)連接彼此：

實(shí)例

轉(zhuǎn)到頁(yè)面二

轉(zhuǎn)到頁(yè)面一

親自試一試

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

轉(zhuǎn)到外部頁(yè)面

將頁(yè)面用作對(duì)話框

對(duì)話框是用來(lái)顯示信息或請(qǐng)求輸入的視窗類型。

如需在用戶點(diǎn)擊〔輕觸〕鏈接時(shí)創(chuàng)立一個(gè)對(duì)話框，請(qǐng)向該鏈接添加data-rel="dialog"：

實(shí)例

轉(zhuǎn)到頁(yè)面二

轉(zhuǎn)到頁(yè)面一

jQueryMobile過(guò)渡

jQueryMobile頁(yè)面

jQueryMobile按鈕

jQueryMobile包含了允許您選擇頁(yè)面翻開(kāi)方式的CSS效果。

jQueryMobile過(guò)渡效果

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

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

瀏覽器支持

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

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

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

滑動(dòng)到頁(yè)面二

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

過(guò)渡

描述

測(cè)試

fade

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

測(cè)試

flip

從后向前翻動(dòng)到下一頁(yè)。

測(cè)試

flow

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

測(cè)試

pop

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

測(cè)試

slide

從右向左滑動(dòng)到下一頁(yè)。

測(cè)試

slidefade

從右向左滑動(dòng)并淡入到下一頁(yè)。

測(cè)試

slideup

從下到上滑動(dòng)到下一頁(yè)。

測(cè)試

slidedown

從上到下滑動(dòng)到下一頁(yè)。

測(cè)試

turn

轉(zhuǎn)向下一頁(yè)。

測(cè)試

none

無(wú)過(guò)渡效果。

測(cè)試

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

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

實(shí)例

滑動(dòng)

jQueryMobile按鈕

jQueryMobile過(guò)渡

jQueryMobile圖標(biāo)

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

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

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

使用元素

使用元素

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

按鈕

親自試一試

親自試一試

按鈕

親自試一試

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

導(dǎo)航按鈕

如需通過(guò)按鈕來(lái)鏈接頁(yè)面，請(qǐng)使用data-role="button"的元素：

實(shí)例

轉(zhuǎn)到頁(yè)面二

親自試一試

行內(nèi)按鈕

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

實(shí)例

轉(zhuǎn)到頁(yè)面二

親自試一試

組合按鈕

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

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

實(shí)例

按鈕1

按鈕2

按鈕3

親自試一試

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

后退按鈕

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

實(shí)例

返回

親自試一試

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

屬性

值

描述

實(shí)例

data-corners

true|false

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

測(cè)試

data-mini

true|false

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

測(cè)試

data-shadow

true|false

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

測(cè)試

如需有關(guān)jQueryMobiledata-*屬性的完整信息，請(qǐng)?jiān)L問(wèn)我們的jQueryMobileData屬性參考手冊(cè)。

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

jQueryMobile按鈕圖標(biāo)

jQueryMobile按鈕

jQueryMobile工具欄

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

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

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

搜索

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

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

屬性值

描述

圖標(biāo)

實(shí)例

data-icon="arrow-l"

左箭頭

測(cè)試

data-icon="arrow-r"

右箭頭

測(cè)試

data-icon="delete"

刪除

測(cè)試

data-icon="info"

信息

測(cè)試

data-icon="home"

首頁(yè)

測(cè)試

data-icon="back"

返回

測(cè)試

data-icon="search"

搜索

測(cè)試

data-icon="grid"

網(wǎng)格

測(cè)試

如需關(guān)于jQueryMo