jquerymobile普通列表事例

<!DOCTYPE html>

<html>

<head>

<title>普通列表</title>

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css"
/>

<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

</head>

<body>

<div data-role="page">

<header data-role="header">

<h1>普通列表</h1>

</header>

<div data-role="content">

<ul data-role="listview" data-theme="a">

<li><a href="#">曹操</a></li>

<li><a href="#">曹仁</a></li>

<li><a href="#">张辽</a></li>

<li><a href="#">刘备</a></li>

<li><a href="#">关羽</a></li>

<li><a href="#">张飞</a></li>

<li><a href="#">孙权</a></li>

</ul>

</div>

</div>

</body>

</html>

效果：

时间： 2024-11-02 23:29:56

jquerymobile普通列表事例的相关文章

jquerymobile带过滤器的列表事例

<!DOCTYPE html> <html> <head> <title>带过滤器的列表</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" /> <script type="text/javascript" src="http:/

python day2 列表 元组 字典 字符串

列表 #列表事例 >>> li = list((1,2,3,4,5))>>> print li[1, 2, 3, 4, 5] >>> li2 = ['a','b','c','d']>>> print li2['a', 'b', 'c', 'd']>>> #列表尾部增加元素>>> li.append(6)>>> li[1, 2, 3, 4, 5, 6] #清空列表内的元素,适用于py

JQuery Mobile 实战一

今天我们来使用JQuery Mobile来开发一个web mobile app. 要实现的如下所示效果: 开始: 第一步:添加JS包等引用,直接去官网下载最新的JQuery Mobile 包,http://jquerymobile.com/:或者直接从CDN引用JQuery Mobile. 解压压缩包:拷贝 jquery.min.js.jquery.mobile-1.4.5.css.jquery.mobile-1.4.5.js 文件到项目中. 第二步:新建一个 html 页面.添加上面三个文件的

jQueryMobile的组件之列表(listview)

data-role="listview"--指明列表元素为listview组件: data-filter="true"--设置listview具有过滤属性: data-inset="true"--设置listview具有过滤之后返回插入的特性: ui-filterable--设置表单具备过滤属性: data-type="search"--设置input为搜索框: data-filter-reveal="true&qu

jQueryMobile 列表组件与面板组件

1. 列表组件 data-count-theme countTheme 指定数字泡泡的显示风格 data-divider-theme dividerTheme 指定分割线的显示风格 data-filter filter 若为true则列表组件提供过滤器 N/A filterCallback 过滤器列表项的回调函数 data-filter-placeholdr filterPlaceholder 过滤器的占位内容 data-filter-theme filterTheme  过滤器搜索栏显示风格

jquerymobile创建9宫格事例

<html> <head> <title>9宫格</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.

jquerymobile按钮事例

<!DOCTYPE html> <html> <head> <title>button</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" /> <script type="text/javascript" src="http://

jquerymobile带计数器的列表

<!DOCTYPE html> <html> <head> <title>列表</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" /> <script type="text/javascript" src="http://code

jquerymobile创建多层次嵌套列表

<!DOCTYPE html> <html> <head> <title>多层次嵌套列表</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" /> <script type="text/javascript" src="http:/