MUI组件一:折叠面板、操作表、数字角标、按钮和卡片视图
2016-07-12 16:57
651 查看
1、accordion(折叠面板)
折叠面板从二级列表中演化而来,dom结构和二级列表类似,如下:<ul class="mui-table-view"> <li class="mui-table-view-cell mui-collapse mui-active"> <a class="mui-navigate-right" href="#">面板1</a> <div class="mui-collapse-content"> <p>面板1子内容</p> </div> </li> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板</a> <div class="mui-collapse-content"> <p>面板2子内容</p> </div> </li> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板3</a> <div class="mui-collapse-content"> <p>面板3子内容</p> </div> </li> </ul>
可以在折叠面板中放置任何内容;折叠面板默认收缩,若希望某个面板默认展开,只需要在包含.mui-collapse类的li节点上,增加.mui-active类即可;mui官网中的方法说明,使用的就是折叠面板控件。
代码块激活字符: maccordion
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> <script type="text/javascript" charset="utf-8"> mui.init(); </script> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">accordion(折叠面板)</h1> </header> <div class="mui-content mui-active"> <ul class="mui-table-view"> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板1</a> <div class="mui-collapse-content"> <p>面板1子内容</p> </div> </li> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板</a> <div class="mui-collapse-content"> <p>面板2子内容</p> </div> </li> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板3</a> <div class="mui-collapse-content"> <p>面板3子内容</p> </div> </li> </ul> </div> </body> </html>
2、actionsheet(操作表)
actionsheet一般从底部弹出,显示一系列可供用户选择的操作按钮; actionsheet是从popover控件基础上演变而来,实际上就是一个固定从底部弹出的popover,故DOM结构和popove类似,只是需要在含.mui-popover类的节点上增加.mui-popover-bottom、.mui-popover-action类;
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action "> <!-- 可选择菜单 --> <ul class="mui-table-view"> <li class="mui-table-view-cell"> <a href="#">菜单1</a> </li> <li class="mui-table-view-cell"> <a href="#">菜单2</a> </li> </ul> <!-- 取消菜单 --> <ul class="mui-table-view"> <li class="mui-table-view-cell"> <a href="#sheet1"><b>取消</b></a> </li> </ul> </div>
和popover一样,推荐使用锚点方式显示、隐藏actionsheet;若要使用js代码动态显示、隐藏actionsheet,同样在popover插件的构造方法中传入"toggle"参数即可,如下:
//传入toggle参数,用户无需关心当前是显示还是隐藏状态,mui会自动识别处理;
mui('#sheet1').popover('toggle');
代码块激活字符: mactionsheet
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> <script type="text/javascript" charset="utf-8"> mui.init(); </script> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">actionsheet(操作表)</h1> </header> <div class="mui-content mui-active"> <div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action "> <!-- 可选择菜单 --> <ul class="mui-table-view"> <li class="mui-table-view-cell"> <a href="#">菜单1</a> </li> <li class="mui-table-view-cell"> <a href="#">菜单2</a> </li> <li class="mui-table-view-cell"> <a href="#">菜单3</a> </li> <li class="mui-table-view-cell"> <a href="#">菜单4</a> </li> </ul> <!-- 取消菜单 --> <ul class="mui-table-view"> <li class="mui-table-view-cell"> <a href="#sheet1"><b>取消</b></a> </li> </ul> </div> <a href="#sheet" id="openSheet" class="mui-btn mui-btn-primary mui-btn-block">打开操作表</a> </div> </body> </html>
3、badge(数字角标)
数字角标一般和其它控件(列表、9宫格、选项卡等)配合使用,用于进行数量提示。 角标的核心类是.mui-badge,默认为实心灰色背景;同时,mui还内置了蓝色(blue)、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标,如下:<span class="mui-badge">1</span> <span class="mui-badge mui-badge-primary">12</span> <span class="mui-badge mui-badge-success">123</span> <span class="mui-badge mui-badge-warning">3</span> <span class="mui-badge mui-badge-danger">45</span> <span class="mui-badge mui-badge-purple">456</span>
若无需底色,则增加.mui-badge-inverted类即可,如下:
<span class="mui-badge mui-badge-inverted">1</span> <span class="mui-badge mui-badge-primary mui-badge-inverted">2</span> <span class="mui-badge mui-badge-success mui-badge-inverted">3</span> <span class="mui-badge mui-badge-warning mui-badge-inverted">4</span> <span class="mui-badge mui-badge-danger mui-badge-inverted">5</span> <span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>
代码块激活字符: mbadge
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> <script type="text/javascript" charset="utf-8"> mui.init(); </script> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">badge(数字角标)</h1> </header> <div class="mui-content mui-active"> <span class="mui-badge mui-btn-blue">123</span> <span class="mui-badge mui-btn-green">23</span> <span class="mui-badge mui-btn-yellow">56</span> <span class="mui-badge mui-btn-red">456</span> <span class="mui-badge mui-btn-purple">15</span> <span class="mui-badge mui-btn-grey">78</span><br /> <span class="mui-badge mui-badge-inverted mui-btn-blue">789</span> <span class="mui-badge mui-badge-inverted mui-btn-green">34</span> </div> </body> </html>
4、button(按钮)
mui默认按钮为灰色,另外还提供了蓝色(blue)、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮,五种色系对应五种场景,分别为primary、success、warning、danger、royal;使用.mui-btn类即可生成一个默认按钮,继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮,例如:通过.mui-btn-blue或.mui-btn-primary均可生成蓝色按钮;<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> <script type="text/javascript" charset="utf-8"> mui.init(); </script> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">button(按钮)</h1> </header> <div class="mui-content mui-active"> <button type="button" class="mui-btn mui-btn-blue mui-btn-block">块级按钮</button> <button type="button" class="mui-btn mui-btn-blue">普通按钮</button> <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined">无底色按钮</button> </div> </body> </html>
(1)、普通按钮
在button节点上增加.mui-btn类,即可生成默认按钮;若需要其他颜色的按钮,则继续增加对应class即可,比如.mui-btn-blue即可变成蓝色按钮
<button type="button" class="mui-btn">默认</button> <button type="button" class="mui-btn mui-btn-primary">蓝色</button> <button type="button" class="mui-btn mui-btn-success">绿色</button> <button type="button" class="mui-btn mui-btn-warning">黄色</button> <button type="button" class="mui-btn mui-btn-danger">红色</button> <button type="button" class="mui-btn mui-btn-royal">紫色</button>
默认按钮有底色,运行效果如下:
(2)、若希望无底色、有边框的按钮,仅需增加.mui-btn-outlined类即可,代码如下:
<button type="button" class="mui-btn mui-btn-outlined">默认</button> <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">蓝色</button> <button type="button" class="mui-btn mui-btn-success mui-btn-outlined">绿色</button> <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">黄色</button> <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">红色</button> <button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">紫色</button>
运行效果如下:
代码块激活字符: mbutton
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">button(按钮)</h1>
</header>
<div class="mui-content mui-active">
<br />
<button type="button" class="mui-btn">默认</button> <button type="button" class="mui-btn mui-btn-primary">蓝色</button> <button type="button" class="mui-btn mui-btn-success">绿色</button> <button type="button" class="mui-btn mui-btn-warning">黄色</button> <button type="button" class="mui-btn mui-btn-danger">红色</button> <button type="button" class="mui-btn mui-btn-royal">紫色</button>
<br /> <br />
<button type="button" class="mui-btn mui-btn-outlined">默认</button> <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">蓝色</button> <button type="button" class="mui-btn mui-btn-success mui-btn-outlined">绿色</button> <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">黄色</button> <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">红色</button> <button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">紫色</button>
</div>
</body>
</html>
5、cardview(卡片视图)
卡片视图常用于展现一段完整独立的信息,比如一篇文章的预览图、作者信息、点赞数量等,使用mui-card类即可生成一个卡片容器,卡片视图主要有页眉、内容区、页脚三部分组成,结构如下:
<div class="mui-card"> <!--页眉,放置标题--> <div class="mui-card-header">页眉</div> <!--内容区--> <div class="mui-card-content">内容区</div> <!--页脚,放置补充信息或支持的操作--> <div class="mui-card-footer">页脚</div> </div>
卡片页眉及内容区,均支持放置图片; 页眉放置图片的话,需要在.mui-card-header节点上增加.mui-card-media类,然后设置一张图片做背景图即可,代码如下:
<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(../images/cbd.jpg)"></div> 若希望在页眉放置更丰富的信息,比如头像、主标题、副标题,则需使用.mui-media-body类,示例代码如下: <div class="mui-card-header mui-card-media"> <img src="../images/logo.png" /> <div class="mui-media-body"> 小M <p>发表于 2016-06-30 15:30</p> </div> </div>
相关文章推荐
- 如何截取scrollView里面的图片
- UITableView回调和table相关成员方法详解
- Congruence relation 同余关系
- deep learning---利用caffe在vgg-face上finetuing自己的人脸数据
- NGUIkeng
- vue-router学习思维导图
- 嵌入式GUI方案选择
- 安卓侧滑菜单搭建-drawerlayout
- 软键盘实例 request参数修改
- datebox清除按钮,datebox加上清除按钮,easyui datebox加上清除按钮
- android -- 蓝牙 bluetooth (五)接电话与听音乐
- RichFaces Developer Guide 3.3.3(6-6)
- 347. Top K Frequent Elements
- android -- 蓝牙 bluetooth (四)OPP文件传输
- android -- 蓝牙 bluetooth (三)搜索蓝牙
- UE4使用widget创建UI界面播放视频
- u3d第一发使用ugui完成消灭星星游戏(一)
- UE4使用widget创建UI界面播放视频
- 【UESTC 482】Charitable Exchange(优先队列+bfs)
- iOS UITextView相关