亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

directory search
jQuery Mobile 基礎(chǔ)教程 jQuery Mobile 安裝 jQuery Mobile 頁(yè)面 jQuery Mobile 頁(yè)面切換 jQuery Mobile 按鈕 jQuery Mobile 按鈕圖標(biāo) jQuery Mobile 工具欄 jQuery Mobile 可折疊塊 jQuery Mobile 網(wǎng)格 jQuery Mobile 表單 jQuery Mobile 表單 jQuery Mobile 表單輸入元素 jQuery Mobile 表單選擇菜單 jQuery Mobile 表單滑動(dòng)條 jQuery Mobile 列表 jQuery Mobile 列表視圖 jQuery Mobile 列表內(nèi)容 jQuery Mobile 事件 jQuery Mobile 事件 jQuery Mobile 觸摸事件 jQuery Mobile 滾屏事件 jQuery Mobile 方向改變事件 jQuery Mobile 實(shí)例 jQuery Mobile Data 屬性 jQuery Mobile 圖標(biāo) jQuery Mobile 事件 jQuery Mobile orientationchange 事件 jQuery Mobile pagebeforecreate 事件 jQuery 事件 方法 jQuery bind() 方法 jQuery blur() 方法 jQuery change() 方法 jQuery click() 方法 jQuery dblclick() 事件 jQuery delegate() 方法 jQuery die() 方法 jQuery error() 方法 jQuery event.currentTarget 屬性 jQuery event.data 屬性 jQuery event.delegateTarget 屬性 jQuery event.isDefaultPrevented() 方法 jQuery event.isImmediatePropagationStopped() 方法 jQuery event.isPropagationStopped() 方法 jQuery event.namespace 屬性 jQuery event.pageX 屬性 jQuery event.pageY 屬性 jQuery event.preventDefault() 方法 jQuery event.relatedTarget 屬性 jQuery event.result 屬性 jQuery event.stopImmediatePropagation() 方法 jQuery event.stopPropagation() 方法 jQuery event.target 屬性 jQuery event.timeStamp 屬性 jQuery event.type 屬性 jQuery event.which 屬性 jQuery focus() 方法 jQuery focusin() 方法 jQuery focusout() 方法 jQuery hover() 方法 jQuery keydown() 方法 jQuery keypress() 方法 jQuery keyup() 方法 jQuery live() 方法 jQuery load() 方法 jQuery mousedown() 方法 jQuery mouseenter() 方法 jQuery mouseleave() 方法 jQuery mousemove() 方法 jQuery mouseout() 方法 jQuery mouseover() 方法 jQuery mouseup() 方法 jQuery off() 方法 jQuery on() 方法 jQuery one() 方法 jQuery $.proxy() 方法 jQuery ready() 方法 jQuery resize() 方法 jQuery scroll() 方法 jQuery select() 方法 jQuery submit() 方法 jQuery toggle() 方法 jQuery trigger() 方法 jQuery triggerHandler() 方法 jQuery unbind() 方法 jQuery undelegate() 方法 jQuery unload() 方法 jQuery Mobile pagebeforehide 事件 jQuery Mobile pagebeforeload 事件 jQuery Mobile pagebeforeshow 事件 jQuery Mobile pagecreate 事件 jQuery Mobile pagehide 事件 jQuery Mobile pageinit 事件 jQuery Mobile pageload 事件 jQuery Mobile pageloadfailed 事件 jQuery Mobile pageshow 事件 jQuery Mobile scrollstart 事件 jQuery Mobile scrollstop 事件 jQuery Mobile swipe 事件 jQuery Mobile swipeleft 事件 jQuery Mobile swiperight 事件 jQuery Mobile tap 事件 jQuery Mobile taphold 事件 jQuery Mobile 頁(yè)面事件 jQuery Mobile CSS 類(lèi) jQuery Mobile 主題 jQuery Mobile 主題 jQuery Mobile 圖標(biāo)
characters

jQuery Mobile 頁(yè)面

開(kāi)始學(xué)習(xí) jQuery Mobile

盡管jQuery Mobile兼容所有的移動(dòng)設(shè)備，但是并不能完全兼容PC機(jī)（由于有限的CSS3支持）。

為了更好的閱讀本教程，建議您使用 Google Chrome 瀏覽器。

實(shí)例

 <body>
<div data-role="page">

? <div data-role="header">
??? <h1>歡迎來(lái)到我的主頁(yè)</h1>
? </div>

? <div data-role="content">
??? <p>我現(xiàn)在是一個(gè)移動(dòng)端開(kāi)發(fā)者!!</p>
? </div>

? <div data-role="footer">
??? <h1>底部文本</h1>
? </div>

</div>
</body>
效果預(yù)覽 ?

實(shí)例解析：

  • data-role="page" 是在瀏覽器中顯示的頁(yè)面。
  • data-role="header" 是在頁(yè)面頂部創(chuàng)建的工具條 (通常用于標(biāo)題或者搜索按鈕)
  • data-role="content" 定義了頁(yè)面的內(nèi)容，比如文本， 圖片，表單，按鈕等。
  • data-role="footer" 用于創(chuàng)建頁(yè)面底部工具條。
  • 在這些容器中你可以添加任何 HTML 元素 - 段落, 圖片, 標(biāo)題, 列表等。
jQuery Mobile 依賴(lài) HTML5 data-* 屬性來(lái)支持各種 UI 元素、過(guò)渡和頁(yè)面結(jié)構(gòu)。不支持它們的瀏覽器將以靜默方式棄用它們。

在頁(yè)面中添加 jQuery Mobile

使用 jQuery Mobile, 你可以再單個(gè) HTML 文件中創(chuàng)建多個(gè)不同的頁(yè)面。

你可以使用不同的href屬性來(lái)區(qū)分使用同一個(gè)唯一id的頁(yè)面：

實(shí)例

 <div data-role="page" id="pageone">
? <div data-role="content">
??? <a href="#pagetwo">Go to Page Two</a>
? </div>
</div>

<div data-role="page" id="pagetwo">
? <div data-role="content">
??? <a href="#pageone">Go to Page One</a>
? </div>
</div>
效果預(yù)覽 ?

注意： 當(dāng)web應(yīng)用有大量的內(nèi)容（文本，圖片，腳本等）將會(huì)嚴(yán)重影響加載時(shí)間。如果你不想使用內(nèi)頁(yè)鏈接可以使用外部文件：

 <a href="externalfile.html">訪問(wèn)外部文件</a>

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

對(duì)話框是用于顯示頁(yè)面信息顯示或者表單信息的輸入。

在鏈接中添加data-rel="dialog"讓用戶(hù)點(diǎn)擊鏈接時(shí)彈出對(duì)話框:

實(shí)例

 <div data-role="page" id="pageone">
? <div data-role="content">
??? <a href="#pagetwo" data-rel="dialog">Go to Page Two</a>
? </div>
</div>

<div data-role="page" id="pagetwo">
? <div data-role="content">
??? <a href="#pageone">Go to Page One</a>
? </div>
</div>
效果預(yù)覽 ?
Previous article： Next article：