weui Msg提示页

2018年06月02日 08:25 | 2003次浏览 作者原创 版权保护

本章节我们来介绍微信weui反馈组件中的Msg 提示页,Msg提示页组件效果使用了jquery,所以案例依赖于jquery库大家注意。按照下面的步骤就可以做出网页效果,案例中引用的微信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 Dialog对话框需要js操作,按照官方文档的方法依赖于jquery

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>


三、Msg 提示页html代码

在<body></body>之间添加如下代码,注意其中有两个div块样式为隐藏的

<div class="page msg js_show">
    <div class="page__hd">
        <h1 class="page__title">Msg</h1>
        <p class="page__desc">提示页--V型知识库www.vxzsk.com原创</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <a href="javascript:aa()" class="weui-btn weui-btn_default" id="aa">成功提示页</a>
        <a href="javascript:bb()" class="weui-btn weui-btn_default">失败提示页</a>
    </div>
    <div class="page__ft j_bottom">
        <a href="javascript:home()"><img src="./images/icon_footer_link.png"></a>
    </div>
</div>


<div class="page msg_success js_show" style="display:none">
    <div class="weui-msg">
        <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
        <div class="weui-msg__text-area">
            <h2 class="weui-msg__title">操作成功</h2>
            <p class="weui-msg__desc">内容详情,可根据实际需要安排,如果换行则不超过规定长度,居中展现<a href="javascript:void(0);">文字链接</a></p>
        </div>
        <div class="weui-msg__opr-area">
            <p class="weui-btn-area">
                <a href="javascript:history.back();" class="weui-btn weui-btn_primary">推荐操作</a>
                <a href="javascript:history.back();" class="weui-btn weui-btn_default">辅助操作</a>
            </p>
        </div>
        <div class="weui-msg__extra-area">
            <div class="weui-footer">
                <p class="weui-footer__links">
                    <a href="javascript:void(0);" class="weui-footer__link">底部链接文本</a>
                </p>
                <p class="weui-footer__text">Copyright © 2008-2016 weui.io</p>
            </div>
        </div>
    </div>
</div>




<div class="page msg_warn js_show" style="display:none">
    <div class="weui-msg">
        <div class="weui-msg__icon-area"><i class="weui-icon-warn weui-icon_msg"></i></div>
        <div class="weui-msg__text-area">
            <h2 class="weui-msg__title">操作失败</h2>
            <p class="weui-msg__desc">内容详情,可根据实际需要安排,如果换行则不超过规定长度,居中展现<a href="javascript:void(0);">文字链接</a></p>
        </div>
        <div class="weui-msg__opr-area">
            <p class="weui-btn-area">
                <a href="javascript:history.back();" class="weui-btn weui-btn_primary">推荐操作</a>
                <a href="javascript:history.back();" class="weui-btn weui-btn_default">辅助操作</a>
            </p>
        </div>
        <div class="weui-msg__extra-area">
            <div class="weui-footer">
                <p class="weui-footer__links">
                    <a href="javascript:void(0);" class="weui-footer__link">底部链接文本</a>
                </p>
                <p class="weui-footer__text">Copyright © 2008-2016 weui.io</p>
            </div>
        </div>
    </div>
</div>


四、jquery操作方法

最好把下面代码放在</body>后面

<script type="text/javascript">
 
  function aa(){
   jQuery(".msg_success").show();
  }
  function bb(){
   jQuery(".msg_warn").show();
  }
</script>


五、效果

打开谷歌浏览器,设置手机网页模式浏览案例网页


六、完整html代码

msg.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 msg js_show">
    <div class="page__hd">
        <h1 class="page__title">Msg</h1>
        <p class="page__desc">提示页--V型知识库www.vxzsk.com原创</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <a href="javascript:aa()" class="weui-btn weui-btn_default" id="aa">成功提示页</a>
        <a href="javascript:bb()" class="weui-btn weui-btn_default">失败提示页</a>
    </div>
    <div class="page__ft j_bottom">
        <a href="javascript:home()"><img src="./images/icon_footer_link.png"></a>
    </div>
</div>


<div class="page msg_success js_show" style="display:none">
    <div class="weui-msg">
        <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
        <div class="weui-msg__text-area">
            <h2 class="weui-msg__title">操作成功</h2>
            <p class="weui-msg__desc">内容详情,可根据实际需要安排,如果换行则不超过规定长度,居中展现<a href="javascript:void(0);">文字链接</a></p>
        </div>
        <div class="weui-msg__opr-area">
            <p class="weui-btn-area">
                <a href="javascript:history.back();" class="weui-btn weui-btn_primary">推荐操作</a>
                <a href="javascript:history.back();" class="weui-btn weui-btn_default">辅助操作</a>
            </p>
        </div>
        <div class="weui-msg__extra-area">
            <div class="weui-footer">
                <p class="weui-footer__links">
                    <a href="javascript:void(0);" class="weui-footer__link">底部链接文本</a>
                </p>
                <p class="weui-footer__text">Copyright © 2008-2016 weui.io</p>
            </div>
        </div>
    </div>
</div>




<div class="page msg_warn js_show" style="display:none">
    <div class="weui-msg">
        <div class="weui-msg__icon-area"><i class="weui-icon-warn weui-icon_msg"></i></div>
        <div class="weui-msg__text-area">
            <h2 class="weui-msg__title">操作失败</h2>
            <p class="weui-msg__desc">内容详情,可根据实际需要安排,如果换行则不超过规定长度,居中展现<a href="javascript:void(0);">文字链接</a></p>
        </div>
        <div class="weui-msg__opr-area">
            <p class="weui-btn-area">
                <a href="javascript:history.back();" class="weui-btn weui-btn_primary">推荐操作</a>
                <a href="javascript:history.back();" class="weui-btn weui-btn_default">辅助操作</a>
            </p>
        </div>
        <div class="weui-msg__extra-area">
            <div class="weui-footer">
                <p class="weui-footer__links">
                    <a href="javascript:void(0);" class="weui-footer__link">底部链接文本</a>
                </p>
                <p class="weui-footer__text">Copyright © 2008-2016 weui.io</p>
            </div>
        </div>
    </div>
</div>
  
 </body>

 <script type="text/javascript">
 
  function aa(){
   jQuery(".msg_success").show();
  }
  function bb(){
   jQuery(".msg_warn").show();
  }
</script>
</html>


如果读者想直接浏览效果,可新建个html页面,把上述的完整代码复制进去即可。



此文章本站原创,地址 https://www.vxzsk.com/1021.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程


上一篇:Nodejs 事件循环 下一篇:redis msget 命令
^