jQuery mobile 滑动打开面板

一、首先在<head></head>里面引入jQuery库、jQuery mobile库以及jQuery mobile样式

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

 

二、创建一个（左/右侧）面板

<body>      
    <div data-role="page" id="page" style="max-height:440px; min-height:440px;"> 
        <div data-role="header"> 

        </div> 
        <div data-role="content">  
            <a href="#defaultpanel" data-role="button" data-inline="true" data-icon="bars"> 打开面板</a>  
        </div> 
        <div data-role="panel" id="defaultpanel" data-theme="b"> 
            <div class="panel-content"> 
                <h3> 面板</h3> 
                <p> 这里是内容区域</p> 
                <a href="#demo-links" data-rel="close" data-role="button" data-theme="c" data-icon="delete" data-inline="true"> 关闭面板 </a>  
            </div>             
        </div>
    </div> 
</body>

加上CSS样式：

　　　　<style>
            html,
            body {
                padding: 0;
                margin: 0;
            }
            
            html,
            .ui-mobile,
            .ui-mobile body {
                height: 435px;
            }
            
            .ui-mobile,
            .ui-mobile .ui-page {
                min-height: 435px;
            }
            
            .ui-content {
                padding: 10px 15px 0px 15px;
            }
            
            .panel-content {
                padding: 15px;
                height: 500px;
            }
            
            #header a {
                margin-top: 3px;
            }
        </style>

这时候点开是这个样子的：

然后我们打开调试，进入到响应式布局（我这里选用的iPhone6s屏幕尺寸）：

这里说明已经创建好一个面板了。

 

三、设置触屏滑动事件（位置无限制）

<script type="text/javascript">
    $("#page").on("swiperight", function() {　　　　　　　　//我这里的#page是使用最大那个面板的id
        //向右滑动，显示面板
        $("#defaultpanel").panel("open");　　　　　　//这里的#defaultpanel_right改成自己定义的面板的id
}); </script>

 

 

 这样子，鼠标往右拉动就会弹出面板我们就完成了。

 

posted @ 2017-05-16 21:15  成长中的小牛  阅读(284)  评论(0)  编辑  收藏  举报