關于jQuery Mobile Demo案例實現

作者：佚名 2011-09-01 15:00:48

關于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 來源：互聯網

jQuery Mobile Demo