關于jQuery Mobile Demo案例實現
作者：佚名
關于jQuery Mobile Demo案例實現是本文要介紹的內容，主要是來了解jQuery Mobile Demo中的一個小案例，具體內容的實現來看詳細代碼。
關于jQuery Mobile Demo案例實現是本文要介紹的內容，主要是來了解jQuery Mobile Demo中的一個小案例，具體內容的實現來看詳細代碼。
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>test.html</title>
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="this is my page">
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <link rel="stylesheet" href="css/jquery.mobile-1.0a2.min.css" />
- <script type="text/javascript" src="src="js/jquery-1.4.3.min.js"></script>
- <script type="text/javascript" src="js/jquery.mobile-1.0a2.min.js"></script
- </head>
- <body>
- <ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="e">
- <li data-role="list-divider">Transition Effects</li>
- <li><a href="effects.php?id=slide" data-transition="slide">Slide</a></li>
- <li><a href="effects.php?id=slideup" data-transition="slideup">Slide Up</a></li>
- <li><a href="effects.php?id=slidedown" data-transition="slidedown">Slide Down</a></li>
- <li><a href="effects.php?id=pop" data-transition="pop">Pop</a></li>
- <li><a href="effects.php?id=flip" data-transition="flip">Flip</a></li>
- <li><a href="effects.php?id=fade" data-transition="fade">Fade</a></li>
- </ul>
- <br /><br />
- <ul data-role="listview" data-dividertheme="e">
- <li data-role="list-divider">Seamless List (margin-less)</li>
- <li><a href="#foo" data-transition="slide">Internal Link 1</a></li>
- <li><a href="#bar" data-transition="slide">Internal Link 2</a></li>
- <li><a href="#" data-transition="slide">Example Item 3</a></li>
- </ul>
- </body>
- </html>
其中，相關元素的含義如下：
data-role-指定的元素性質的包裝，可設置為： 網頁， 標題， 內容， 頁腳。 另外兩個設置中所使用的例子來說明列表元素和列表分隔，為此，該屬性設置為： ListView中 列出的主要元素和 列表分隔 列表的護欄。 還有其他一些可用的設置，包括 可折疊的，它創建了一個可折疊的顯示/隱藏塊
data-position -指定元素是否應 固定，在這種情況下，它會提供在頂部（標頭）或底部（用于頁腳）
data-inset -specifies whether element should be within content margins or outside of it (flush or with margin) – set to true or false
data-transition -指定的過渡到新的頁面加載時使用，可設置為：slide, slideup, slidedown, pop, flip or fade
data-theme -指定的設計主題，使用容器內的元素，可設置為：a,b,c,d,e
data-dividerthem -指定選項的主題相同的分隔使用列表 數據的主題。
小結：關于jQuery Mobile Demo案例實現的內容介紹完了，希望通過本文的學習能對你有所幫助！
責任編輯：zhaolei
來源：
互聯網
