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>

<span class="ui-li-count">100000</span>

</li>

<li>

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

<span class="ui-li-count">3000</span>

</li>

<li>

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

<span class="ui-li-count">80000</span>

</li>

</ul>

</div>

</div>

</body>

</html>

效果:

时间: 2024-11-09 00:10:37

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:/

Bootstrap历练实例:带徽章的列表组

向列表组添加徽章 我们可以向任意的列表项添加徽章组件,它会自动定位到右边.只需要在 <li> 元素中添加 <span class="badge"> 即可.下面的实例演示了这点: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <

Android实现“是否退出”对话框和“带图标的列表”对话框

今天我们学习的内容是实现两种对话框(Dialog),第一种是询问是否退出对话框,另外一种是带图标的列表对话框,程序的执行效果是,我们点击button1的时候,弹出第一种对话框,我们点击button2的时候,弹出另外一种对话框. (1)  首先是布局方面,有三个xml文件,一个是Activity的布局文件,一个是Dialog的布局文件,一个是ListView的布局文件,内容分别例如以下: activity_main.xml <LinearLayout xmlns:android="http:

bootstrap-列表组--带徽章的列表组

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>列表组--带徽章的列表组</title>     <!-- 最新版本

Vuex 教程案例:计数器以及列表展示

本案例github:https://github.com/axel10/Vuex_demo-Counter-and-list 本篇教程将以计数器及列表展示两个例子来讲解Vuex的简单用法. 从安装到启动初始页面的过程都直接跳过.注意安装时选择需要路由. 首先,src目录下新建store目录及相应文件,结构如下: index.js文件内容: import Vue from "vue" import Vuex from 'vuex' Vue.use(Vuex); //务必在new Vuex

Android带索引联系人列表

网上Android联系人列表的样例也非常多,都和微信的联系人差点儿相同,因为项目用到了联系人列表索引功能(产品把字母item给去掉了),只是也还是好实现.这里我也来分享分享我的实现,免得以后忘了.那先看看效果(Demo在结尾有下载地址): 要达到的效果就是这么简单. 先说说思路吧:首先为联系人对象加入一个pinyin字段,当获取到了联系人原始数据后,把每一个联系人的名字转换为拼音.并为pinyin字段设置值. 然后获取联系人中出现过哪些字母的拼音保存为数组(这就是字母的item),然后和联系人拼

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

JS实现带导航城市列表以及输入搜索功能

实现功能: 1.加载城市列表,并生成索引(没有该索引的城市则无索引) 2.点击索引滚动页面到对应索引城市第一个位置 3.输入搜索 分析: 1.加载城市很容易,生成对应的索引. 首先需要得到所有的城市,然后拿出城市的首字母,放入一个数组中,去重并排序, 得到无重复并有序的索引数组后加入到div中显示 2.根据索引进行页面滚动 需要给索引列表添加事件,由于锚点会在链接产生带#号的地址,以及页面会有刷动的效果,索引这里不使用锚点, 因此这里使用jquery或者js的方法进行页面自行滚动 3.进行搜索

安卓开发之带图标的列表

学习使用ListView组件和SimapleAdapter适配器实现一个带图标的ListView列表 总共3部分 一.MainActivity.java文件 1 package xqx; 2 3 import java.util.ArrayList; 4 import java.util.HashMap; 5 import java.util.List; 6 import java.util.Map; 7 8 import com.example.test.R; 9 10 import andr