MUI-list（列表），普通列表、带箭头列表、带数字角标列表、带图文列表

本文主要介绍list(列表)的几种展现形式：普通列表、带箭头列表、带数字角标列表、带图文列表

效果图如下：

1、普通列表：只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类即可

2、带箭头列表：若右侧需要增加导航箭头，变成导航链接，则只需在li节点下增加a子节点，并为该a节点增加.mui-navigate-right类即可

3、带数字角标列表：mui支持将数字角标、按钮、开关等控件放在列表中；mui默认将数字角标放在列表右侧显示

4、带图文列表：主要添加了.mui-media、.mui-media-object、.mui-media-body、.mui-pull-left/right几个类

源码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Hello MUI</title><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><!--标准mui.css--><link rel="stylesheet" href="css/mui.min.css"><!--App自定义的css--><!--<link rel="stylesheet" type="text/css" href="../css/app.css" />--><style>/*点击变蓝色高亮*/.mui-table-view-cell.mui-active{background-color: #0062CC;}</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">list练习</h1></header><div class="mui-content"><div class="mui-content-padded"><h5>1、普通列表，点击背景色变蓝</h5><ul class="mui-table-view"><li class="mui-table-view-cell">Item 1</li></ul><h5>2、带箭头列表</h5><ul class="mui-table-view"><li class="mui-table-view-cell"><a class="mui-navigate-right">Item 2</a></li></ul><h5>3、带数字角标的列表</h5><ul class="mui-table-view" style="margin-top:10px;"><li class="mui-table-view-cell">Item 1<span class="mui-badge">1</span></li><li class="mui-table-view-cell">Item 2<span class="mui-badge  mui-badge-blue">1</span></li><li class="mui-table-view-cell">Item 3<span class="mui-badge mui-badge-inverted mui-badge-green">1</span></li></ul><h5>4、图文列表，图片居左&居右</h5><ul class="mui-table-view"><li class="mui-table-view-cell mui-media"><a href="javascript:;"><img class="mui-media-object mui-pull-left" src="data:images/shuijiao.jpg"><div class="mui-media-body">幸福<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p></div></a></li><li class="mui-table-view-cell mui-media"><a href="javascript:;"><img class="mui-media-object mui-pull-right" src="data:images/cbd.jpg"><div class="mui-media-body">CBD<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p></div></a></li></ul></div></div><script src="js/mui.min.js"></script><script type="text/javascript" charset="utf-8">//mui初始化mui.init({swipeBack: true //启用右滑关闭功能});</script></body></html>

MUI-list（列表），普通列表、带箭头列表、带数字角标列表、带图文列表相关推荐

html画一条线并带箭头,手把手教你用CSS实现带箭头的流程进度条
本文介绍的是利用纯CSS的带箭头流程进度条,兼容到IE8,需要的朋友们下面来一起学习学习. 首先写出一个基本的样式. .cssNav li{ padding: 0px 20px; line-heigh ...
matlab中画带箭头向量,几何画板中如何画带箭头的向量
在学习了向量的相关知识后,我们都知道几何向量(也称为欧几里得向量,通常简称向量.矢量),指具有大小和方向的量.那么几何画板做为最专业的几何绘图工具,也可以用来绘制向量.如果你还不知道怎么在几何画板中画 ...
html 带箭头的提示框,css实现对话框-带箭头提示框
纯CSS制作的对话框特效代码上边框有颜色,所以箭头冲下,定位的负值是边框宽度的2倍,宽度只有一个值,是等边三角形.要专门给IE6写HACK,将对应的transparent改为white.(以下省略这 ...
Mui的APPLOGO数字角标小米问题
之前写了篇博客,生成jar包并添加进项目离线打包安卓APP,实现APP上LOGO的数字角标,但是最近有用户寄过来一台小米max3,因为APP启动后执行到显示数字角标的时候会崩. 通过Android S ...
mui栅格布局的两种方式（grid和list，宫格和列表）
文章目录 mui栅格布局的两种方式(grid和list,宫格和列表) 效果截图示下: 代码示下: mui栅格布局的两种方式(grid和list,宫格和列表) 效果截图示下: 代码示下: <!DO ...
带你自学Python系列（七）：Python列表复制陷阱
↑ 点击上方[计算机视觉联盟]关注我们今天是小编持续更新关于Python的知识总结以及Python实践项目应用的第7天,带你利用零碎时间自学最受欢迎的编程语言之一Python语言.你和小编一起打卡了 ...
图文列表+富文本解析+折线图示例小程序模板
简介: 一款多功能示例模板,带图文列表.富文本.折线图.会员中心模块,分享给大家学习. 网盘下载地址: http://kekewl.cc/NiqnJXnde6s0 图片:
图文列表+欢迎页面+音乐控制小程序模板
介绍: 图文列表+欢迎页面+音乐控制小程序模板,带微信小程序项目导入使用说明. 安装方式介绍: 1:安装后图标: 登录,随意一个微信号,扫描后即可登录 2:选择无appid:项目名称随意,地址选择下载 ...
python保存大列表（list）数据到文件并后续重新加载为列表（list）对象实战
python保存大列表(list)数据到文件并后续重新加载为列表(list)对象实战笔者遇到的问题是这样的, 在做机器学习模型的时候,有的时候会使用相关性分析的方法来进行特征的筛选,去除冗余特征,降 ...

MUI-list（列表），普通列表、带箭头列表、带数字角标列表、带图文列表

MUI-list（列表），普通列表、带箭头列表、带数字角标列表、带图文列表相关推荐

最新文章

热门文章