从本章节开始，我们来介绍微信weui中的操作反馈组件的使用，本章节介绍weui ActionSheet弹出式菜单的使用。
还是接着前面的章节来介绍，按照下面的步骤就可以做出网页效果，案例中引用的微信weui的css样式库我已经上传到百度网盘了，地址 http://pan.baidu.com/s/1cvQlLc ，大家可以下载下来进行引用，当然你也可以引用网络地址，但是有个弊端，微信weui的样式库更新比较频繁，可能将来某一天会失效，所以最好下载到本地使用。
一，引入css文件
<link rel="stylesheet" href="https://weui.io/weui.css"> <link rel="stylesheet" href="https://weui.io/example.css">
记得html设置成移动手机端浏览
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
二、 引入jquery库依赖
由于本节weui ActionSheet弹出式菜单需要js操作，按照官方文档的方法依赖于jquery
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
三、weui ActionSheet弹出式菜单html代码
在<body></body>之间添加如下代码
<div class="page__hd"> <h1 class="page__title">ActionSheet</h1> <p class="page__desc">弹出式菜单---V型知识库原创www.vxzsk.com</p> </div> <div class="page__bd page__bd_spacing"> <a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSActionSheet">iOS ActionSheet</a> <a href="javascript:;" class="weui-btn weui-btn_default" id="showAndroidActionSheet">Android ActionSheet</a> </div> <!--BEGIN actionSheet--> <div> <div class="weui-mask" id="iosMask" style="display: none"></div> <div class="weui-actionsheet" id="iosActionsheet"> <div class="weui-actionsheet__title"> <p class="weui-actionsheet__title-text">这是一个标题，可以为一行或者两行。</p> </div> <div class="weui-actionsheet__menu"> <div class="weui-actionsheet__cell">示例菜单</div> <div class="weui-actionsheet__cell">示例菜单</div> <div class="weui-actionsheet__cell">示例菜单</div> <div class="weui-actionsheet__cell">示例菜单</div> </div> <div class="weui-actionsheet__action"> <div class="weui-actionsheet__cell" id="iosActionsheetCancel">取消</div> </div> </div> </div> <div class="weui-skin_android" id="androidActionsheet" style="display: none"> <div class="weui-mask"></div> <div class="weui-actionsheet"> <div class="weui-actionsheet__menu"> <div class="weui-actionsheet__cell">示例菜单</div> <div class="weui-actionsheet__cell">示例菜单</div> <div class="weui-actionsheet__cell">示例菜单</div> </div> </div> </div> <!--END actionSheet--> <div class="page__ft"> <a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a> </div> </div>
四、jquery操作方法
最好把下面代码放在</body>后面
<script type="text/javascript">
// ios
$(function(){
var $iosActionsheet = $('#iosActionsheet');
var $iosMask = $('#iosMask');
function hideActionSheet() {
$iosActionsheet.removeClass('weui-actionsheet_toggle');
$iosMask.fadeOut(200);
}
$iosMask.on('click', hideActionSheet);
$('#iosActionsheetCancel').on('click', hideActionSheet);
$("#showIOSActionSheet").on("click", function(){
$iosActionsheet.addClass('weui-actionsheet_toggle');
$iosMask.fadeIn(200);
});
});
// android
$(function(){
var $androidActionSheet = $('#androidActionsheet');
var $androidMask = $androidActionSheet.find('.weui-mask');
$("#showAndroidActionSheet").on('click', function(){
$androidActionSheet.fadeIn(200);
$androidMask.on('click',function () {
$androidActionSheet.fadeOut(200);
});
});
});
</script>五、效果
打开谷歌浏览器，设置手机网页模式浏览案例网页
下图是android效果
六、完整html代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>www.vxzsk.comV型知识库</title>
</head>
<link rel="stylesheet" href="https://weui.io/weui.css">
<link rel="stylesheet" href="https://weui.io/example.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<body>
<div class="page__hd">
<h1 class="page__title">ActionSheet</h1>
<p class="page__desc">弹出式菜单</p>
</div>
<div class="page__bd page__bd_spacing">
<a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSActionSheet">iOS ActionSheet</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showAndroidActionSheet">Android ActionSheet</a>
</div>
<!--BEGIN actionSheet-->
<div>
<div class="weui-mask" id="iosMask" style="display: none"></div>
<div class="weui-actionsheet" id="iosActionsheet">
<div class="weui-actionsheet__title">
<p class="weui-actionsheet__title-text">这是一个标题，可以为一行或者两行。</p>
</div>
<div class="weui-actionsheet__menu">
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
</div>
<div class="weui-actionsheet__action">
<div class="weui-actionsheet__cell" id="iosActionsheetCancel">取消</div>
</div>
</div>
</div>
<div class="weui-skin_android" id="androidActionsheet" style="display: none">
<div class="weui-mask"></div>
<div class="weui-actionsheet">
<div class="weui-actionsheet__menu">
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
</div>
</div>
</div>
<!--END actionSheet-->
<div class="page__ft">
<a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
</div>
</div>
</body>
<script type="text/javascript">
// ios
$(function(){
var $iosActionsheet = $('#iosActionsheet');
var $iosMask = $('#iosMask');
function hideActionSheet() {
$iosActionsheet.removeClass('weui-actionsheet_toggle');
$iosMask.fadeOut(200);
}
$iosMask.on('click', hideActionSheet);
$('#iosActionsheetCancel').on('click', hideActionSheet);
$("#showIOSActionSheet").on("click", function(){
$iosActionsheet.addClass('weui-actionsheet_toggle');
$iosMask.fadeIn(200);
});
});
// android
$(function(){
var $androidActionSheet = $('#androidActionsheet');
var $androidMask = $androidActionSheet.find('.weui-mask');
$("#showAndroidActionSheet").on('click', function(){
$androidActionSheet.fadeIn(200);
$androidMask.on('click',function () {
$androidActionSheet.fadeOut(200);
});
});
});
</script>
</html>如果读者想直接浏览效果，可新建个html页面，把上述的完整代码复制进去即可。
此文章本站原创，地址 https://www.vxzsk.com/990.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：在YARN上运行Spark
下一篇：Python 面向对象编程
^