mui列表系列
详细操作见代码：
<!doctype html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
/*点击时背景和字体颜色设置一个过渡的效果*/
.mui-table-view-cell{transition:background .5s,color .6s;}
/*给标签被点击时产生一个效果*/
.mui-table-view-cell.mui-active{
background: red;
color: blue; }
</style>
</head> <body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">列表</h1>
</header> <div class="mui-content">
<h5 class="mui-content-padded">普通的列表</h5>
<div class="mui-card">
<!--
mui-table-view :父级
mui-table-view-cell：子级
-->
<ul class="mui-table-view">
<li class="mui-table-view-cell">项目经理</li>
<li class="mui-table-view-cell">产品经理</li>
<li class="mui-table-view-cell">技术总监</li>
</ul>
</div> <h5 class="mui-content-padded">带箭头的列表</h5>
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="">java</a></li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="">python</a></li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="">php</a></li>
</ul>
</div>
<h5 class="mui-content-padded">带数字角标的列表</h5>
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell">鞋子<span class="mui-badge mui-badge-blue"></span></li>
<li class="mui-table-view-cell">包包<span class="mui-badge mui-badge-red"></span></li>
<li class="mui-table-view-cell">衣服<span class="mui-badge mui-badge-warning"></span></li>
</ul>
</div> <h5 class="mui-content-padded">带数字角标+箭头的列表</h5>
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">鞋子<span class="mui-badge mui-badge-blue"></span></a></li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">包包<span class="mui-badge mui-badge-red"></span></a></li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">衣服<span class="mui-badge mui-badge-warning"></span></a></li>
</ul>
</div> <h5 class="mui-content-padded">带input的列表</h5>
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
学校
<button class="mui-btn mui-btn-warning">正确</button>
</li>
<li class="mui-table-view-cell">
操场
<!--开关-->
<div class="mui-switch mui-active mui-switch-blue">
<div class="mui-switch-handle"></div>
</div>
</li>
<!--input单选框-->
<li class="mui-table-view-cell mui-radio">
单选框
<input type="radio" name="" id="" value="" />
</li>
<!--input多选框-->
<li class="mui-table-view-cell mui-checkbox">
多选框
<input type="checkbox" />
</li>
<li class="mui-table-view-cell mui-checkbox">
多选框
<input type="checkbox" />
</li>
<li class="mui-table-view-cell mui-checkbox">
多选框
<input type="checkbox" />
</li>
</ul>
</div> <h5 class="mui-content-padded">三行列表</h5>
<div class="mui-table-view">
<div class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis">努力了的才叫梦想，不努力的就是空想！如果你一直空想的话，无论看多少正能量语录，也赶不走满满的负能量！你还是原地踏步的你，一直在看别人进步。</h4>
<h5 class="mui-h5">作者：L某人</h5>
<h6 class="mui-h6 mui-ellipsis-3">人自己就是一面镜子，你以什么样的态度对待世界，世界就会呈现给你什么样的景象。我们应该学会珍惜，生活因珍惜而有意义，生活因懂得珍惜而完美、精彩。</h6>
<div class="mui-table-cell mui-col-xs-2">
<h5>:</h5>
</div>
</div>
</div> </div>
<div class="mui-table-view-cell">
<div class="mui-table">
<!--
mui-table:表示调用栅格系统（父级）
（子级）mui-col-xs-：表示占栅格系统的几分（12分制，xs表示在最小屏幕上，sm表示在中等屏幕上时）
mui-ellipsis：表示显示一行溢出隐藏
mui-ellipsis-：表示显示4行溢出隐藏
mui-navigate-right：导航镜头a标签显示
-->
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis">努力了的才叫梦想，不努力的就是空想！如果你一直空想的话，无论看多少正能量语录，也赶不走满满的负能量！你还是原地踏步的你，一直在看别人进步。</h4>
<h5 class="mui-h5">作者：L某人</h5>
<h6 class="mui-h6 mui-ellipsis-3">人自己就是一面镜子，你以什么样的态度对待世界，世界就会呈现给你什么样的景象。我们应该学会珍惜，生活因珍惜而有意义，生活因懂得珍惜而完美、精彩。</h6>
<div class="mui-table-cell mui-col-xs-2">
<h5>:</h5>
</div>
</div>
</div> </div> <div class="mui-table-view-cell">
<a href="" class="mui-navigate-right">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis">努力了的才叫梦想，不努力的就是空想！如果你一直空想的话，无论看多少正能量语录，也赶不走满满的负能量！你还是原地踏步的你，一直在看别人进步。</h4>
<h5 class="mui-h5">作者：L某人</h5>
<h6 class="mui-h6 mui-ellipsis">人自己就是一面镜子，你以什么样的态度对待世界，世界就会呈现给你什么样的景象。我们应该学会珍惜，生活因珍惜而有意义，生活因懂得珍惜而完美、精彩。</h6>
<div class="mui-table-cell mui-col-xs-2">
<h5>:</h5>
</div>
</div>
</div>
</a>
</div> <h5 class="mui-content-padded">二级列表(折叠的效果)</h5>
<div class="nui-card">
<!--
一级table-view——》table-view-cell
mui-collapse:产生一个折叠的效果
-->
<div class="mui-table-view">
<div class="mui-table-view-cell mui-collapse">
<a href="" class="mui-navigate-right">课程列表</a>
<!--
二级table-view——》table-view-cell
-->
<div class="mui-table-view">
<div class="mui-table-view-cell">
实习<span class="mui-navigate-right"></span>
</div>
<div class="mui-table-view-cell">
产品经理<span class="mui-badge mui-badge-danger"></span>
</div>
<div class="mui-table-view-cell">
项目策划<span class="mui-navigate-right"></span>
</div>
<div class="mui-table-view-cell">
技术支持<span class="mui-badge mui-badge-danger"></span>
</div>
</div>
</div>
</div>
</div> <h5 class="mui-content-padded">图文列表</h5>
<div class="mui-table-view">
<!--
mui-media:媒体图文
mui-media-object：设置为媒体对象
mui-pull-left：表示将媒体对象左悬浮,mui-pull-right：表示向右悬浮
mui-media-body：媒体摘要信息栏
-->
<div class="mui-table-view-cell mui-media">
<img class="mui-media-object mui-pull-left" src="data:image/0_2.jpg"/>
<!--设置文字描述标题-->
<div class="mui-media-body">
蓝天白云，晴空万里
<p class="mui-6 mui-ellipsis">这里是摘要，老虎会撒娇，这里是摘要，老虎会撒娇，可怕可怕这里是摘要，老虎会撒娇，可怕可怕这里是摘要，老虎会撒娇，可怕可怕</p>
</div>
</div> <div class="mui-table-view-cell mui-media">
<img class="mui-media-object mui-pull-right" src="data:image/0_2.jpg"/>
<!--设置文字描述标题-->
<div class="mui-media-body">
蓝天白云，晴空万里
<p class="mui-6 mui-ellipsis">这里是摘要，老虎会撒娇，这里是摘要，老虎会撒娇，可怕可怕这里是摘要，老虎会撒娇，可怕可怕这里是摘要，老虎会撒娇，可怕可怕</p>
</div>
</div>
</div>
</div> </div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
</body> </html>
具体效果如下：
mui列表系列的更多相关文章
- mui 列表项左右滑删除功能升级(仿微信左滑 点击删除后出现确认删除)
mui 列表项左右滑删除功能升级(仿微信左滑 点击删除后出现确认删除) 2018-06-19更新显示样式
- mui列表跳转到详情页优化方案
原理 因为列表页到详情页是多对一的形式,即列表页的多条数据列表对应的是一个详情页,只是数据不同而:因此,可以在加载列表页时预加载详情页,即创建一个详情页的webview,但是不显示出来,点击列表的时候 ...
- MUI 列表页面绑定接口数据
1.我们先看效果 2.功能分析 主要分为3步 数据初始化 下拉刷新 上拉加载 接口数据示例: { "List": [ { "Id": 9, "Orde ...
- mui初级入门教程（六）— 模板页面实现原理及多端适配指南
文章来源:小青年原创发布时间:2016-07-26关键词:mui,webview,template,os,多端适配转载需标注本文原始地址: http://zhaomenghuan.github.io. ...
- mui scrollTo到指定位置,出现空白页及拉不动的问题解决
使用方式简介 mui 列表页使用的是 mui的插件实现的上拉加载下拉刷新,但是从详情页回到列表页时 不能回到之前的位置.所以想到了使用缓存. 第一次和第二次的试验是失败的.失败后,就想用其他办法来解决 ...
- mui初级入门教程（一）— 小白入手mui的学习路线
文章来源:小青年原创发布时间:2016-05-15关键词:mui,html5+转载需标注本文原始地址:http://zhaomenghuan.github.io/#!/blog/20160515 写在 ...
- python 学习笔记十二 html基础（进阶篇）
HTML 超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分.网页文件本身 是一种文本文件,通过在文本文件中添加标记符, 可以告诉浏览 ...
- Django 学习笔记（四）模板变量
关于Django模板变量官方网址:https://docs.djangoproject.com/en/1.11/ref/templates/builtins/ 1.传入普通变量 在hello/Hell ...
- HTML基础-------HTML标签(2)
HTML标签(2) a标签(容器级单标签) 语义:跳转到指定的连接 属性 列表系列 1.无序列表 该列表由两部分组成:ul标签嵌套li标签(ul标签是典型的容器级标签) 图示: 2.有序列表 该列表由 ...
随机推荐
- 【洛谷P4144】大河的序列
题目大意:给定一个长度为 N 的序列,求序列中连续区间最大的(或和加与和)是多少. 题解: 引理:任意两个数 \(i, j\),若 \(i>j\),则在二进制表示下,i 对应的二进制串的字典序一 ...
- anaconda的安装教程和使用方法
一.anaconda安装方法: 1.下载: anaconda官方下载地址:https://www.anaconda.com/download/ 2.安装: 可以自己指定路劲,也可以选择默认安装,最后记 ...
- spring MVC 如何接收前台传入的JSON对象数组并处理
spring MVC 如何接收前台传入的JSON对象数组 主要方法: (主要用到的包是 net.sf.json 即:json-lib-2.3-jdk15.jar 完整相关jar包: commons- ...
- C语言进阶－－Day2
今天主要讲解的是函数的压栈与出栈 1. 要实现一个数组的逆置,用栈的压栈出栈观点: reverseArr(int *parr,int i,int len) { if(i != len-1) rever ...
- vue $refs的基本用法
<div id="app"> <input type="text" ref="input1"/> <butto ...
- memcached 在windows中的部署和使用
第一步:下载memcached 地址:http://www.121down.com/soft/softview-28366.html 第二步:将下载文件解压到文件目录后,打开命令窗口 通过cd命令 ...
- opencv: 角点检测源码分析；
以下6个函数是opencv有关角点检测的函数 ConerHarris, cornoerMinEigenVal,CornorEigenValsAndVecs, preConerDetect, coner ...
- mysql性能分析工具
一.EXPALIN 在SQL语句之前加上EXPLAIN关键字就可以获取这条SQL语句执行的计划 那么返回的这些字段是什么呢? 我们先关心一下比较重要的几个字段: 1. select_type 查询类型 ...
- JAVA核心技术I---JAVA基础知识（类的继承）
一:基本概念同C++一致 二:继承演示 .将共同点提取出来,即形成了父类/基类/超类 –Parent class/Base class/Super class .而其他类则自动成为子类/派生类 –Ch ...
- C#设计模式（12）——组合模式
1.组合模式 在软件开发中我们经常会遇到处理部分与整体的情况,如我们经常见到的树形菜单,一个菜单项的子节点可以指向具体的内容,也可以是子菜单.类似的情况还有文件夹,文件夹的下级可以是文件夹也可以是文件 ...