jquery moblie 初探

从这一篇开始,我们正式来探讨一些jquery mobile的内容。

我们先来体验一下,jquery mobile 的强大。对于初学者,官网有个文章介绍得很好,大家有空可以看看

http://jquerymobile.com/demos/1.1.0/docs/about/getting-started.html


我们看一个例子,对于普通android程序(没有使用jquery mobile)我们实现一个下面的图角listview,并且又带有个过滤器,应该怎么做呢?我们或许会先定义一个listview然后为listview设置一个圆角的背景,当然,对于点击事件,我们还得判断点中的是哪个item并设置不同的背景,再接着。。。。。

好麻烦,并且实现的效果往往不是那么满意。

jquery moblie 初探_第1张图片

对于jquery-mobile,我们只需这样子做,你先建立一个.html文件,然后把下面代码复制进去,接着用浏览器打开

<!DOCTYPE html> 
<html> 
	<head> 
	<title>My Page</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head> 
<body> 

<div data-role="page" id="foo" data-title="page1">
	<div data-role="content">
		<ul data-role="listview" data-inset="true" data-filter="true">
		<li><a href="#">Acura</a></li>
		<li><a href="#">Audi</a></li>
		<li><a href="#">BMW</a></li>
		<li><a href="#">Cadillac</a></li>
		<li><a href="#">Ferrari</a></li>
	</div>
	
</ul>
	
</div>

</body>
</html>

你会惊讶的发现,好帅啊,其实还可以更强大,你可以尝试在 ul标签上加上 属性 data-theme="XXXXX" 其中XXXXX取a-e中任可一个字母,你发现什么了呢


你可能感兴趣的:(html,jquery,ListView,mobile,div,stylesheet)