關(guān)于jQuery Mobile Demo案例實(shí)現(xiàn)
關(guān)于jQuery Mobile Demo案例實(shí)現(xiàn)是本文要介紹的內(nèi)容，主要是來(lái)了解jQuery Mobile Demo中的一個(gè)小案例，具體內(nèi)容的實(shí)現(xiàn)來(lái)看詳細(xì)代碼。
- <!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>
其中，相關(guān)元素的含義如下：
data-role-指定的元素性質(zhì)的包裝，可設(shè)置為： 網(wǎng)頁(yè)， 標(biāo)題， 內(nèi)容， 頁(yè)腳。 另外兩個(gè)設(shè)置中所使用的例子來(lái)說(shuō)明列表元素和列表分隔，為此，該屬性設(shè)置為： ListView中 列出的主要元素和 列表分隔 列表的護(hù)欄。 還有其他一些可用的設(shè)置，包括 可折疊的，它創(chuàng)建了一個(gè)可折疊的顯示/隱藏塊
data-position -指定元素是否應(yīng) 固定，在這種情況下，它會(huì)提供在頂部（標(biāo)頭）或底部（用于頁(yè)腳）
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 -指定的過(guò)渡到新的頁(yè)面加載時(shí)使用，可設(shè)置為：slide, slideup, slidedown, pop, flip or fade
data-theme -指定的設(shè)計(jì)主題，使用容器內(nèi)的元素，可設(shè)置為：a,b,c,d,e
data-dividerthem -指定選項(xiàng)的主題相同的分隔使用列表 數(shù)據(jù)的主題。
小結(jié)：關(guān)于jQuery Mobile Demo案例實(shí)現(xiàn)的內(nèi)容介紹完了，希望通過(guò)本文的學(xué)習(xí)能對(duì)你有所幫助！
