10 MUI – cardview（卡片视图）、mask（遮罩蒙版）

按涉梅密土淮矗吼素乓宿井弗

参考文档

10 MUI - cardview（卡片视图）、mask（遮罩蒙版）第1张

10 MUI - cardview（卡片视图）、mask（遮罩蒙版）第2张

10 MUI - cardview（卡片视图）、mask（遮罩蒙版）第3张

10 MUI - cardview（卡片视图）、mask（遮罩蒙版）第4张

2.卡片视图

<body>
	<div class="mui-content">
		<div class="mui-card">
			<div class="mui-card-header">
				页眉
			</div>
			<div class="mui-card-content">
				内容
			</div>
			<div class="mui-card-footer">
				页脚
			</div>
		</div>
	</div>
</body>

执行：

10 MUI - cardview（卡片视图）、mask（遮罩蒙版）第5张

内容区添加图片

<body>
	<div class="mui-content">
		<div class="mui-card">
			<div class="mui-card-header">
				页眉
			</div>
			<div class="mui-card-content">
				<img src="images/1.jpg" >
			</div>
			<div class="mui-card-footer">
				页脚
			</div>
		</div>
	</div>
</body>

执行：

10 MUI - cardview（卡片视图）、mask（遮罩蒙版）第6张

完善：

<body>
	<div class="mui-content">
		<div class="mui-card">
			<div class="mui-card-header">
				美女
			</div>
			<div class="mui-card-content">
				<!-- 图片默认不是100%需要自己设置 -->
				<img src="images/1.jpg"width="100%" height="300px">
			</div>
			<div class="mui-card-footer">
				页脚
			</div>
		</div>
	</div>
</body>

执行：

10 MUI - cardview（卡片视图）、mask（遮罩蒙版）第7张

若希望在页眉/脚放置更丰富的信息，比如头像、主标题、副标题，则需使用.mui-media-body类，示例代码如下：

<body>
	<div class="mui-content">
		<div class="mui-card">
			<div class="mui-card-header">
				美女
			</div>
			<div class="mui-card-content">
				<!-- 图片默认不是100%需要自己设置 -->
				<img src="images/1.jpg"width="100%" height="300px">
			</div>
			<div class="mui-card-footer">
				<div class="mui-media-body">
					小M
				<p>发表于 2016-06-30 15:30</p>
				</div>
			</div>
		</div>
	</div>
</body>

执行：

10 MUI - cardview（卡片视图）、mask（遮罩蒙版）第8张

可以自定义样式，将卡片变得更加好看

<body>
	<div class="mui-content">
		<!-- 自定义样式，使区间变小 -->
		<div class="mui-card" style="margin:10px;">
			<div class="mui-card-header">
				美女
			</div>
			<div class="mui-card-content">
				<!-- 图片默认不是100%需要自己设置 -->
				<img src="images/1.jpg"width="100%" height="300px">
			</div>
			<!-- 自定义样式，使得内间距变大 -->
			<div class="mui-card-footer" style="padding:5px;">
				<div class="mui-media-body">
					小M
				<p>发表于 2016-06-30 15:30</p>
				</div>
			</div>
		</div>
	</div>
</body>

执行：

10 MUI - cardview（卡片视图）、mask（遮罩蒙版）第9张

完善：

<body>
	<div class="mui-content">
		<!-- 自定义样式，使区间变小 -->
		<div class="mui-card" style="margin:10px;">
			<div class="mui-card-header"  style="padding:10px;">
				<img src="images/logo.jpg" class="mui-pull-left" />
				<div class="mui-media-body mui-pull-left">
					小M
				<p>发表于 2016-06-30 15:30</p>
				</div>
				
			</div>
			<div class="mui-card-content">
				<!-- 图片默认不是100%需要自己设置 -->
				<img src="images/1.jpg"width="200px"height="100px">
			</div>
			<!-- 自定义样式，使得内间距变大 -->
			<div class="mui-card-footer" style="padding:5px;">
				<div class="mui-media-body">
					小M
				<p>发表于 2016-06-30 15:30</p>
				</div>
			</div>
		</div>
		
		<div class="mui-card" style="margin:10px;">
			<div class="mui-card-header"  style="padding:10px;">
				<img src="images/logo.jpg" class="mui-pull-left" />
				<div class="mui-media-body mui-pull-left">
					小M
				<p>发表于 2016-06-30 15:30</p>
				</div>
				
			</div>
			<div class="mui-card-content">
				<!-- 图片默认不是100%需要自己设置 -->
				<img src="images/1.jpg"width="200px"height="100px">
			</div>
			<!-- 自定义样式，使得内间距变大 -->
			<div class="mui-card-footer" style="padding:5px;">
				<div class="mui-media-body">
					小M
				<p>发表于 2016-06-30 15:30</p>
				</div>
			</div>
		</div>
		
	</div>
</body>

执行：

10 MUI - cardview（卡片视图）、mask（遮罩蒙版）第10张

小技巧

图片出现默认的空白解决方案：
line-height:0px;

<body>
	<div class="mui-content">
		<!-- 自定义样式，使区间变小 -->
		<div class="mui-card" style="margin:10px;">
			<div class="mui-card-header"  style="padding:10px;">
				<img src="images/logo.jpg" class="mui-pull-left" />
				<div class="mui-media-body mui-pull-left">
					小M
				<p>发表于 2016-06-30 15:30</p>
				</div>
				
			</div>
			<div class="mui-card-content">
				<!-- 图片默认不是100%需要自己设置 -->
				<img src="images/1.jpg"width="200px"height="100px">
			</div>
			<!-- 自定义样式，使得内间距变大 -->
			<div class="mui-card-footer" style="padding:5px;">
				<div class="mui-media-body">
					小M
				<p>发表于 2016-06-30 15:30</p>
				</div>
			</div>
		</div>
		
		<div class="mui-card" style="margin:10px;">
			<div class="mui-card-header"  style="padding:10px;">
				<img src="images/logo.jpg" class="mui-pull-left" />
				<div class="mui-media-body mui-pull-left">
					小M
				<p>发表于 2016-06-30 15:30</p>
				</div>
				
			</div>
			<div class="mui-card-content" style="line-height:0px;">
				<!-- 图片默认不是100%需要自己设置 -->
				<img src="images/1.jpg"width="200px"height="100px">
			</div>
			<!-- 自定义样式，使得内间距变大 -->
			<div class="mui-card-footer" style="padding:5px;">
				<div class="mui-media-body">
					小M
				<p>发表于 2016-06-30 15:30</p>
				</div>
			</div>
		</div>
		
	</div>
</body>

执行：

10 MUI - cardview（卡片视图）、mask（遮罩蒙版）第11张

2、mask（遮罩蒙版）

<body>
	<div class="mui-content">
		<button type="button"onclick="showMask()">显示遮罩</button>
	</div>
	<script type="text/javascript">
		function showMask()
		{
			var mask = mui.createMask();
			mask.show();
		}
	</script>
</body>

点击按钮

10 MUI - cardview（卡片视图）、mask（遮罩蒙版）第12张

点击遮罩，提示信息

<body>
	<div class="mui-content">
		<button type="button"onclick="showMask()">显示遮罩</button>
	</div>
	<script type="text/javascript">
		function showMask()
		{
			var mask = mui.createMask(callback1);//callback1为用户点击蒙版时自动执行的回调；
			mask.show();
		}
		function callback1()//名称不能取为callback,会报错
		{
			mui.toast('您取消了操作');
		}
		
	</script>
</body>

执行：

10 MUI - cardview（卡片视图）、mask（遮罩蒙版）第12张

10 MUI - cardview（卡片视图）、mask（遮罩蒙版）第14张

自定义遮罩的样式为红色

注意：关闭遮罩仅会关闭，不会销毁；关闭之后可以再次调用mask.show();打开遮罩；

mui默认的蒙版遮罩使用.mui-backdrop类定义（如下代码），若需自定义遮罩效果，只需覆盖定义.mui-backdrop即可；

<!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>
	<style type="text/css">
		/* 自定义颜色为红色 */
		/* rgba前三个参数为颜色值,最后为透明度 */
		.mui-backdrop {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 998;background-color: rgba(250,0,0,.3);}
	</style>
</head>
<body>
	<div class="mui-content">
		<button type="button"onclick="showMask()">显示遮罩</button>
	</div>
	<script type="text/javascript">
		function showMask()
		{
			var mask = mui.createMask(callback1);//callback1为用户点击蒙版时自动执行的回调；
			mask.show();
		}
		function callback1()//名称不能取为callback,会报错
		{
			mui.toast('您取消了操作');
		}
		
	</script>
</body>
</html>

执行：

10 MUI - cardview（卡片视图）、mask（遮罩蒙版）第15张

兑辛茬师嗡蟹嗓肋狈捂谎们猩