使用 mui.min.js 显示功能框,并添加删除和清空按钮
<div class="mui-content">
<button id="showBtn" class="mui-btn mui-btn-primary">显示功能框</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/mui/3.7.1/js/mui.min.js"></script>
<script>
mui.init();
<pre><code> var showBtn = document.getElementById('showBtn');
showBtn.addEventListener('tap', function() {
var btnArray = [
{title:'删除',style:{color:'#FF0000'}},
{title:'清空',style:{color:'#007AFF'}}
];
mui.actionSheet({
buttons: btnArray,
cancel: "取消"
}, function(e) {
if (e.index == 0) {
// 点击了删除按钮
console.log("点击了删除按钮");
} else if (e.index == 1) {
// 点击了清空按钮
console.log("点击了清空按钮");
} else {
// 点击了取消按钮或者其他地方
console.log("点击了取消按钮或者其他地方");
}
});
});
</script>
</code></pre>
</body>
</html>
<p>在示例代码中,我们首先引入了 mui.min.css 和 mui.min.js 文件。然后在页面中添加了一个按钮,点击按钮后会显示一个包含删除和清空按钮的功能框。当用户点击其中一个按钮时,会触发相应的回调函数。当用户点击取消按钮或者其他地方时,会关闭功能框。</p>
原文地址: https://www.cveoy.top/t/topic/jExq 著作权归作者所有。请勿转载和采集!