Web App开发学习

最新推荐文章于 2022-06-08 21:40:38 发布

烊烊！

最新推荐文章于 2022-06-08 21:40:38 发布

阅读量158

点赞数 1

文章标签： web app

本文链接：https://blog.csdn.net/m0_58760840/article/details/123670952

版权

1.操作表

从底部弹出，显示一系列可供用户选择的操作按钮；只是需要在含.mui-popover类的节点上增

加.mui-popover-bottom、.mui-popover-action类。

mui('#此次填入id名').popover('toggle') 传入toggle参数,mui会自动识别处理；

<!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" />
	</head>
	<body>
		<!-- 删除的弹出信息 -->
		<div id="delete" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#" style="color: #0062CC;">删除信息</a>
				</li>
			</ul>
    		<ul class="mui-table-view">
    			<li class="mui-table-view-cell">
    				<a href="#" style="color: #007AFF;">取消</a>
    			</li>
			</ul>
		</div>
		<!-- 删除的弹出信息 -->
		<div id="delete" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#" style="color: #0062CC;">删除信息</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#" style="color: #007AFF;">取消</a>
				</li>
			</ul>
		</div>
		
		<div id="forward" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view ">
				<li class="mui-table-view-cell " >
					<a href="#" style="color: #0062CC;">转发</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#" style="color: #007AFF;">取消</a>
				</li>
			</ul>
		</div>

		<!-- 底部导航条 -->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" href="#delete">
				<span class="mui-icon mui-icon-trash"></span>
			</a>
			<a class="mui-tab-item" href="#"></a>
			<a class="mui-tab-item" href="#"></a>
			<a class="mui-tab-item" href="#forward">
				<span class="mui-icon mui-icon-undo"></span>
			</a>
		</nav>

	</body>
	
	<script type="text/javascript" charset="utf-8">
		mui.init();
		//mui('#delete').popover('toggle');//默认弹出效果
		//mui('#forward').popover('toggle');
	</script>

</html>

效果前：