关于jQuery Mobile Demo案例实现-jquery weui 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案例实现的内容介绍完了，希望通过本文的学习能对你有所帮助！