详细操作见代码：
<!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 0.5s,color 0.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">10</span></li>
<li class="mui-table-view-cell">包包<span class="mui-badge mui-badge-red">5</span></li>
<li class="mui-table-view-cell">衣服<span class="mui-badge mui-badge-warning">2</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">10</span></a></li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">包包<span class="mui-badge mui-badge-red">5</span></a></li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">衣服<span class="mui-badge mui-badge-warning">2</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>10:24</h5>
</div>
</div>
</div>
</div>
<div class="mui-table-view-cell">
<div class="mui-table">
<!--
mui-table:表示调用栅格系统（父级）
（子级）mui-col-xs-10：表示占栅格系统的几分（12分制，xs表示在最小屏幕上，sm表示在中等屏幕上时）
mui-ellipsis：表示显示一行溢出隐藏
mui-ellipsis-4：表示显示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>10:24</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>10:24</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">45</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">45</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="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="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>
具体效果如下：
扫一扫
2024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
