當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery Mobel 学习相关资料整理(一)

發布時間：2023/12/8 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery Mobel 学习相关资料整理(一) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

　　在Jquery Mobile中，一個頁面"就是一個data-role屬性被設為"page"的容器(通常為div容器)，里面包含了"header", "content",“footer"三個容器，各自可以容納普通的html元素，表單和自定義的Jquery Mobile組件

1、一個標準的Jquery Mobile頁面的樣板。

<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.css" /><script type="text/javascript" src="http://code.Jquery.com/Jquery-1.4.3.min.js"></script><script type="text/javascript" src="http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.js"></script></head> <body> <div data-role="page"><div data-role="header"><h1>Page Title</h1></div><div data-role="content"> <p>Page content goes here.</p> </div><div data-role="footer"><h4>Page Footer</h4></div></div></body></html>

2、想要支持中文，添加以下meta標簽。

3、一個頁面中包含多個頁面，支持Ajax的跳轉的頁面。

<body> <div data-role="page" id="foo"><div data-role="header"><h1>Foo</h1></div><div data-role="content"> <p>I'm first in the source order so I'm shown as the page.</p> <p>View internal page called <a href="#bar">bar</a></p> </div><div data-role="footer"><h4>Page Footer</h4></div></div><div data-role="page" id="bar"><div data-role="header"><h1>Bar</h1></div><div data-role="content"> <p>I'm first in the source order so I'm shown as the page.</p> <p><a href="#foo">Back to foo</a></p> </div><div data-role="footer"><h4>Page Footer</h4></div></div></body>

4、后退鏈接屬性。(后退的行為，會無視鏈接的herf)? data-rel="back"

5、頁面跳轉效果屬性。 data-transition="*"

data-transition="fade"

data-transition="pop"

data-transition="flip"

data-transition="turn"

data-transition="flow"

data-transition="slidefade"

data-transition="slide"

data-transition="slideup"

data-transition="slidedown"

data-transition="none"?

6、在頁面上層的彈出對話框屬性。 data-rel="dialog"

<a href="foo.html" data-rel="dialog">Open dialog</a>

7、頁面預加載屬性。data-prefetch

你可以預加載隨意多個頁面，只需要將要預加載的鏈接加上data-prefetch屬性。或者你，可以在js里調用$.mobile.loadPage()方法來設置預加載。

$.mobile.loadPage( pageUrl, { showLoadMsg: false } );

8、不使用jQuery Mobel 提供的? DOM 緩存機制屬性。data-dom-cache="true"

通過js控制。

$.mobile.page.prototype.options.domCache = true;

通過程序控制。

pageContainerElement.page({ domCache: true });

DOM緩存的缺點是DOM可能會變得很大，某些設備上會導致變慢或者內存問題。

轉載于:https://www.cnblogs.com/liluping860122/archive/2013/05/08/3067258.html

總結

以上是生活随笔為你收集整理的jQuery Mobel 学习相关资料整理(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：字符串的蛮力匹配法
下一篇： objective-c常见类型%z