点击按钮弹出底部菜单效果用到了weui.js库，读者可在文章底部下载或界面直接引入网络地址
ActionSheet
ActionSheet 用于显示包含一系列可交互的动作集合，包括说明、跳转等。由底部弹出，一般用于响应用户对页面的点击。
完整代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>weui</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" type="text/css" href="resources/css/weui.css">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<div class='demos-content-padded'>
<a href="javascript:;" id='show-actions' class="weui_btn weui_btn_primary">显示 ActionSheet</a>
<a href="javascript:;" id='show-actions-bg' class="weui_btn weui_btn_primary">自定义背景色</a>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/0.8.0/js/jquery-weui.min.js"></script>
<script>
$(document).on("click", "#show-actions", function() {
$.actions({
title: "选择操作",
onClose: function() {
console.log("close");
},
actions: [
{
text: "发布",
className: "color-primary",
onClick: function() {
$.alert("发布成功");
}
},
{
text: "编辑",
className: "color-warning",
onClick: function() {
$.alert("你选择了“编辑”");
}
},
{
text: "删除",
className: 'color-danger',
onClick: function() {
$.alert("你选择了“删除”");
}
}
]
});
});
$(document).on("click", "#show-actions-bg", function() {
$.actions({
actions: [
{
text: "发布",
className: "bg-primary",
},
{
text: "编辑",
className: "bg-warning",
},
{
text: "删除",
className: 'bg-danger',
}
]
});
});
</script>
</body>
</html>第32行引入weui.js,<script src="//cdn.bootcss.com/jquery-weui/0.8.0/js/jquery-weui.min.js"></script>
Icon图标效果
代码如下：
<i class="weui_icon_msg weui_icon_success"></i> <i class="weui_icon_msg weui_icon_info"></i> <i class="weui_icon_msg weui_icon_warn"></i> <i class="weui_icon_msg weui_icon_waiting"></i> <i class="weui_icon_safe weui_icon_safe_success"></i> <i class="weui_icon_safe weui_icon_safe_warn"></i> <div class="icon_sp_area"> <i class="weui_icon_success"></i> <i class="weui_icon_success_circle"></i> <i class="weui_icon_success_no_circle"></i> <i class="weui_icon_info"></i> <i class="weui_icon_waiting"></i> <i class="weui_icon_waiting_circle"></i> <i class="weui_icon_circle"></i> <i class="weui_icon_warn"></i> <i class="weui_icon_download"></i> <i class="weui_icon_info_circle"></i> <i class="weui_icon_cancel"></i> </div>
此文章本站原创，地址 https://www.vxzsk.com/72.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程