jquery moblie 初探

最新推荐文章于 2025-08-08 14:20:26 发布

C_Wayne

最新推荐文章于 2025-08-08 14:20:26 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： android-jqueryMobile 文章标签： jquery listview stylesheet mobile html div

本文链接：https://blog.youkuaiyun.com/C_weibin/article/details/7496361

android-jqueryMobile 专栏收录该内容

4 篇文章

订阅专栏

本文通过一个简单的示例展示了如何使用jQuery Mobile快速创建带有圆角列表视图和过滤器的网页应用，相较于传统Android应用程序开发，jQuery Mobile提供了更为简便且美观的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

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

圆角listview截图

对于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中任可一个字母，你发现什么了呢