mui列表系列
Posted dark-fire-liehuo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 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>
具体效果如下：
以上是关于mui列表系列的主要内容，如果未能解决你的问题，请参考以下文章