jQuery教程之微信页面设计weui(2)——--操作反馈actionSheet
沉沙 2019-04-12 来源 : 阅读 2392 评论 0

摘要:本篇文章探讨了jQuery教程之微信页面设计weui(2)——--操作反馈actionSheet,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

本篇文章探讨了jQuery教程之微信页面设计weui(2)——--操作反馈actionSheet,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

jQuery教程之微信页面设计weui(2)——--操作反馈actionSheet

<

微信页面的操作反馈交互功能学习,其中有很好的注释,很容易理解
复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>微信源代码</title>
    <link rel="stylesheet" href="css/weui.css"/>
    <link rel="stylesheet" href="css/example.css"/>
     <script src="js/zepto.min.js"></script>
    <script type="text/javascript" src="js/jweixin-1.0.0.js"></script>
    <script src="js/weui.min.js"></script>
    <script src="js/example.js"></script>
</head>
<body ontouchstart style="width:100%;max-width:800px;margin:0 auto;
    background:#eeeeee;top:0px; bottom:0px; left:0px; right:0px;
    min-width:320px;">
   <div id="container"></div>
    <script type="text/html" id="tpl_home">
<div>
    <div>
        <h1>
            <img src="./image/guojiadianwang.jpg" alt="WeUI" width="100%" max-width="800px" style="margin: 0 auto" />
        </h1>
    </div>
    <div class="page__bd page__bd_spacing">
        <ul>
            <li>
                <div class="weui-flex js_category">
                    <p>表单</p>
                    <img src="./images/icon_nav_form.png" alt="form">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a href="javacript:;" class="weui-cell weui-cell_access js_item" data-id="button">
                            <div>
                                <p>Button</p>
                            </div>
                            <div></div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_category">
                    <p>基础组件</p>
                    <img src="./images/icon_nav_layout.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a href="javascript:;" class="weui-cell weui-cell_access js_item" data-id="article">
                            <div>
                                <p>Article</p>
                            </div>
                        </a>
                        <a href="javascript:;" class="weui-cell weui-cell_access js_item" data-id="grid">
                            <div>
                                <p>grid</p>
                            </div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_category">
                    <p>操作反馈</p>
                    <img src="./images/icon_nav_feedback.png" alt=""a>
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a href="javascript:;" class="weui-cell weui-cell_access js_item" data-id="actionsheet">
                            <div>
                                <p>Actionsheet</p>
                            </div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_category">
                    <p>导航相关</p>
                    <img src="./images/icon_nav_nav.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a href="javascript:;" class="weui-cell weui-cell_access js_item" data-grid="navbar">
                            <div>
                                <p>Navbar</p>
                            </div>
                        </a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
    </script>
</body>
</html>
<!--显示表单下拉列表-->
<script type="text/javascript">
    $(function(){
        var winH = $(window).height();
        var categorySpace = 10;
        $('.js_item').on('click', function(){
            var id = $(this).data('id');
            window.pageManager.go(id);
        });
        $('.js_category').on('click', function(){
            var $this = $(this),
                $inner = $this.next('.js_categoryInner'),
                $page = $this.parents('.page'),
                $parent = $(this).parent('li');
            var innerH = $inner.data('height');
            bear = $page;
            if(!innerH){
                $inner.css('height', 'auto');
                innerH = $inner.height();
                $inner.removeAttr('style');
                $inner.data('height', innerH);
            }
            if($parent.hasClass('js_show')){
                $parent.removeClass('js_show');
            }else{
                $parent.siblings().removeClass('js_show');
                $parent.addClass('js_show');
                if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
                    var scrollTop = this.offsetTop + this.offsetHeight + innerH - winH + categorySpace;
                    if(scrollTop > this.offsetTop){
                        scrollTop = this.offsetTop - categorySpace;
                    }
                    $page.scrollTop(scrollTop);
                }
            }
        });
    });
</script>
<!--button页面-->
  <script type="text/html" id="tpl_button">
<div>
    <div>
        <h1>Button</h1>
        <p>按钮</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <a href="javascript:;" class="weui-btn weui-btn_primary">页面主操作 Normal</a>
        <a href="javascript:;" class="weui-btn weui-btn_primary weui-btn_loading"><i></i>页面主操作 Loading</a>
        <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">页面主操作 Disabled</a>
        <a href="javascript:;" class="weui-btn weui-btn_default">页面次要操作 Normal</a>
        <a href="javascript:;" class="weui-btn weui-btn_default weui-btn_loading"><i></i>页面次操作 Loading</a>
        <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">页面次要操作 Disabled</a>
        <a href="javascript:;" class="weui-btn weui-btn_warn">警告类操作 Normal</a>
        <a href="javascript:;" class="weui-btn weui-btn_warn weui-btn_loading"><i></i>警告类操作 Loading</a>
        <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">警告类操作 Disabled</a>
       
        <div>
            <a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a>
            <a href="javascript:;" class="weui-btn weui-btn_plain-default weui-btn_plain-disabled">按钮</a>
            <a href="javascript:;" class="weui-btn weui-btn_plain-primary">按钮</a>
            <a href="javascript:;" class="weui-btn weui-btn_plain-primary weui-btn_plain-disabled">按钮</a>
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">按钮</a>
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">按钮</a>
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn">按钮</a>
        </div>
    </div>
    <div>
        <a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
    </div>
</div>
</script>
<!--九宫格页面-->
  <script type="text/html" id="tpl_grid">
<div>
    <div>
        <h1>Grid</h1>
        <p>九宫格</p>
    </div>
    <div>
        <a href="javascript:;">
            <div>
                <img src="./images/icon_tabbar.png" alt="">
            </div>
            <p>Grid</p>
        </a>
        <a href="javascript:;">
            <div>
                <img src="./images/icon_tabbar.png" alt="">
            </div>
            <p>Grid</p>
        </a>
        <a href="javascript:;">
            <div>
                <img src="./images/icon_tabbar.png" alt="">
            </div>
            <p>Grid</p>
        </a>
        <a href="javascript:;">
            <div>
                <img src="./images/icon_tabbar.png" alt="">
            </div>
            <p>Grid</p>
        </a>
        <a href="javascript:;">
            <div>
                <img src="./images/icon_tabbar.png" alt="">
            </div>
            <p>Grid</p>
        </a>
        <a href="javascript:;">
            <div>
                <img src="./images/icon_tabbar.png" alt="">
            </div>
            <p>Grid</p>
        </a>
        <a href="javascript:;">
            <div>
                <img src="./images/icon_tabbar.png" alt="">
            </div>
            <p>Grid</p>
        </a>
        <a href="javascript:;">
            <div>
                <img src="./images/icon_tabbar.png" alt="">
            </div>
            <p>Grid</p>
        </a>
        <a href="javascript:;">
            <div>
                <img src="./images/icon_tabbar.png" alt="">
            </div>
            <p>Grid</p>
        </a>
    </div>
</div>
</script>
<!--操作反馈中的ActionSheety页面-->
    <script type="text/html" id="tpl_actionsheet">
<div>
    <div>
        <h1>ActionSheet</h1>
        <p>弹出菜单</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSActionSheet">iOSAction</a>
        <a href="javascript:;" class="weui-btn weui-btn_default" id="showAndroidActionSheet">AndroidActionSheet</a>
    </div>
    <!--ActionSheet窗口-->
    <div>
        <div id="iosMask" style="display: none"></div>
        <div id="iosActionsheet">
            <div>
                <div>菜单一</div>
                <div>菜单二</div>
                <div>菜单二</div>
                <div>菜单二</div>
            </div>
            <div>
                <div id="iosActionsheetCancel">
                    取消
                </div>
            </div>
        </div>
    </div>
    <!--AndroidAction-->
    <div id="androidActionsheet" style="display: none;">
        <div></div>
        <div>
            <div>
                <div>示例菜单1</div>
                <div>示例菜单2</div>
                <div>示例菜单3</div>
            </div>
        </div>
    </div>
    <!--endActionSheet-->
    <div>
        <a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
    </div>
</div>
<script type="text/javascript">
    // ios
    $(function () {
        // 获得id
        var $iosActionsheet = $('#iosActionsheet');
        var $iosMask = $('#iosMask');
        //隐藏函数actionSheet
        function hideActionSheet() {
            //toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件
            $iosActionsheet.removeClass('weui-actionsheet_toggle');
            //fadeOut() 方法用于淡出可见元素。
            $iosMask.fadeOut(200);
        }
        //iosMask面板绑定隐藏函数
        $iosMask.on('click',hideActionSheet);
        //点击取消时,执行隐藏函数
        $('#iosActionsheetCancel').on('click',hideActionSheet);
        //点击IOSActionSheet时,执行添加面板函数
        $('#showIOSActionSheet').on('click',function () {
            $iosActionsheet.addClass('weui-actionsheet_toggle');
            $iosMask.fadeIn(200);
        })
    })
   
    //android
    $(function () {
        var $androidActionsheet = $('#androidActionsheet');
        //获得weui-mask的面板
        var $andMask = $androidActionsheet.find('.weui-mask');
        $('#showAndroidActionSheet').on('click',function () {
            //淡入
            $androidActionsheet.fadeIn(200);
            $andMask.on('click',function () {
                $androidActionsheet.fadeOut(200);
            })
        })
    })
    
</script>
    </script>    

      本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程