js学习笔记_侧滑菜单

js

使用jquery-ui的js可实现多种动画效果。参考jqueryui官网：https://jqueryui.com/

1、导入js

<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>

2、html/一个div放菜单内容/

 <div id="drawer" class="drawer_content">
            <div class="drawer_head">
                <div class="drawer_head_img"></div>
                <div class="drawer_head_arrow">
                    <p class="drawer_head_text1">簫蕭</p>
                    <p class="drawer_head_text2">
                        ‘’韶华白首 不过转瞬‘’
                    </p>
                </div>
            </div>
            <ul class="drawer_item">
                <li class="drawer_item1">首页</li>
                <li class="drawer_item2">关注</li>
                <li class="drawer_item3">私信</li>
            </ul>
            <div class="drawer_item4">
                <div id="drawer_setting">设置</div>
                <div>关于</div>
            </div>
        </div>

3、js/swipe方法来自于jquerymobile/

$(document).ready(function() {
            $("#nav-left").each(function() {
                $(".drawer_content").hide();
            });
            /*You can choose an effect with the following effects
             * bling 百叶窗 bounce 震荡 clip 剪辑 drop 下落 explode 爆炸
             * fold 折叠 highlight 高亮 puff 消失 pulsate 闪烁 scale 比例缩放
             * shake 晃动 size 改变大小 slide 滑动 transfer 迁移
             */
            $("#nav-left").click(function() {
                if ($(".drawer_content").css("display") != "none") {
                    $(".drawer_content").hide("slide", {
                        direction : "left"
                    }, 500);
                    setTimeout(delay, 500);
                } else {
                    appcan.frame.close('content');
                    $(".drawer_content").show("fold", {
                        direction : "left"
                    }, 500);
                }
            });
            $(window).on("swipeleft", function(){
                $(".drawer_content").hide("slide",{
                    direction: "left"
                }, 500);
                setTimeout(delay, 500);
            })
            $(window).on("swiperight", function(){
                appcan.frame.close('content');
                $(".drawer_content").show("slide",{
                direction: "left"
            }, 500)
        })
    });