1 / 7

JQuery Mobile 網頁導向

周季賢. JQuery Mobile 網頁導向. 同一網頁中 Page 導向. 使用 ID 來指定 預設使用 AJAX 導向 可搭配轉換動畫 Transition 屬性 slide | slideup | slidedown | pop | fade | flip <a href ="#Page2" data-transition="flip">. 回上一 Page. 直接使用超連結 <a href ="#Page1" >back to Page1</a> 會以下一頁的方式導向 使用 data- rel =“back” 標籤

colman
Download Presentation

JQuery Mobile 網頁導向

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 周季賢 JQuery Mobile網頁導向

  2. 同一網頁中Page導向 • 使用ID來指定 • 預設使用AJAX導向 • 可搭配轉換動畫 • Transition屬性 • slide | slideup | slidedown | pop | fade | flip <a href="#Page2" data-transition="flip">

  3. 回上一Page • 直接使用超連結 • <a href="#Page1">back to Page1</a> • 會以下一頁的方式導向 • 使用data-rel=“back”標籤 • <a data-rel="back">Back to Page1</a> • 會以上ㄧ頁導向的方式導向回去 • 使用data-direction="reverse“ • <a href="#Page1" data-direction="reverse"> Back to Page1(reverse)</a> • 直接使用單純的反導向

  4. 導向至其他網頁 • 預設使用AJAX導向 • 也可搭配轉換動畫 • 可關閉AJAX • rel="external“ • data-ajax="false“ • 導向至他站網頁時,AJAX功能亦關閉

  5. 網頁預先載入 • 可預先載入下一張網頁至記憶體中 • 提升瀏覽速度 • 加入data-prefetch標籤

  6. 以彈跳視窗呈現導向內容 • Page或其他網頁均可 • 會自動產生關閉按鈕 (右上方) • 僅限同一網站 • data-rel="dialog“

  7. 其他特殊導向內容 • Email導向 • href=mailto:aaa@msn.com • href="mailto:jdoe@foo.com?cc=bill@bar.com&bcc=mark@abc.com&subject=TestJQUERY%20Birthday&body=Hello JQUERY!" • 電話號碼導向 • href="tel:15555555555" • href="tel:0222222222,123"可撥打分機

More Related