jquery moblie 初探

来源：互联网发布：ims医药数据库查询编辑：程序博客网时间：2024/05/23 19:53

从这一篇开始，我们正式来探讨一些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中任可一个字母，你发现什么了呢