标签: jquery-mobile-panel

如果JQuery Mobile的内容溢出,如何使用滚动来保持面板高度

我有一个固定页眉和固定页脚的页面.内容的高度也固定为窗口的高度.

该文档具有面板,其内容可能比窗口/内容的高度长.当发生这种情况时,文档的高度会发生变化.但是我需要在没有滚动条的情况下保持文档的高度.该面板应该取代滚动条.

示例:http://jsfiddle.net/moizhb/GSSD3/

面板是如何实例化的:

<div data-role="panel" id="navpanel" data-theme="a" data-display="overlay"></div>
Run Code Online (Sandbox Code Playgroud)

我很欣赏这里的任何指示.

谢谢!

jquery height jquery-mobile jquery-mobile-panel

5
推荐指数
1
解决办法
7334
查看次数

为什么我的面板在移动设备上滚动?jQueryMobile

我有一个小任务查看器,你可以创建一个任务面板,无论如何,我遇到的问题是,当你在移动设备上并向下滚动面板时,它会回到顶部,所以你需要再次向下滚动以便能够点击你想要的输入,当你完成输入(或不输入)并尝试点击后退按钮以关闭键盘它再次回到顶部.

我试图使用,.focus但它忽略了它.

为什么会这样?我该如何解决?任何帮助都是真诚的感谢.

单击加号按钮以打开面板

PS:我清理了代码以专注于这个问题

我的代码:

#header {
  background-color: #72a9dc;
  text-shadow: 0 0 3px #000;
  color: white;
}
.code {
  background-color: #b4d0ec;
  text-shadow: 0 0 1px #fff;
  border-radius: 3px;
  width: 30px;
  text-align: center;
  float: left;
}
.label {
  margin-left: 10px;
  text-align: center;
  float: left;
}
.date {
  float: right;
  border-radius: 3px;
  border: 1px solid #000;
  width: 100px;
  height: 20px;
  text-align: center;
  text-shadow: 0 0 0 #fff;
  color: black;
}
.detail {
  font-size: 20px;
  color: #72a9dc;
}
Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html> …
Run Code Online (Sandbox Code Playgroud)

jquery android jquery-mobile jquery-mobile-panel

5
推荐指数
1
解决办法
172
查看次数

jQuery Mobile 1.3.2 使用面板时出错

我正在尝试使用 jQuery Mobile 1.3.2 实现面板功能。这是我的代码:

    <div data-role="page" id="homePage">
    <section data-role="panel" class="row">
        PANEL HERE..
    </section>

    <section data-role="header" class="row">
        <div class="large-12 columns">
            <h3>
                Header..
            </h3>               
        </div>          
    </section>

    <section data-role="content" class="row">
        <div class="large-12 columns">
            CONTENT..               
        </div>          
    </section>

    <section data-role="footer" class="row">
        <div class="large-12 columns">
            FOOTER..                
        </div>          
    </section>

    <script type="text/javascript">
        $(function ()
        {

        }());
    </script>
</div>
Run Code Online (Sandbox Code Playgroud)

当我运行这是浏览器时,出现错误:

$.data(...) 未定义

我已经将它追溯到 jquery.mobile-1.3.2.js 的第 10330 行:

var $theme = $.data( page[0], "mobilePage" ).options.theme,
Run Code Online (Sandbox Code Playgroud)

我错过了什么?

jquery-mobile jquery-mobile-panel

4
推荐指数
1
解决办法
1085
查看次数

jQuery mobile:页面导航后未触发面板打开

我正在使用jQuery mobile创建一个移动网站(1.3).

在这个网站中我使用了一个面板作为我的菜单,它由屏幕左上角的"条形"按钮激活,或者从左向右滑动(在桌面上;单击并向右移动鼠标).

这一切都正常,直到我导航到另一个页面.使用jQuery移动AJAX函数加载新页面,在console.log中我的面板div被记录,所以我知道它在那里但是.panel('open')函数没有被触发.

我尝试以不同的方式制作我的链接,但没有运气:

<a href="?controller=website&action=algemeenInvoer">Algemene invoer</a>
<a href="#" onclick="$.mobile.changePage('?controller=website&action=algemeenInvoer', { transition:'slideup'} );">Algemene invoer, using mobile.changePage</a>
Run Code Online (Sandbox Code Playgroud)

由于我使用php,我无法创建一个简单的JSFiddle来演示问题,但这里是我的开发页面的链接:snip

我希望有人可以帮我解决这个问题,并在页面导航后触发我的.panel('open').

编辑: 当前滑动功能:

$(document).on('pageinit',function(){
    $('div[data-role="content"]').on("swiperight",function(){
        console.log($('#menu'));

        //open panel after swiped x px.
        $.event.special.swipe.horizontalDistanceThreshold = 80;
        $('#menu').panel("open");
    });
}); 
Run Code Online (Sandbox Code Playgroud)

php jquery ios jquery-mobile jquery-mobile-panel

2
推荐指数
1
解决办法
4998
查看次数

jQuery mobile - 仅在侧面板关闭时才允许滚动?

当任何侧栏打开时,我不希望用户滚动.它们应该在关闭时滚动.

我使用下面的代码,但它不适用于Android移动设备

$(document).bind('panelopen', function (e, data) {     
        $('body').css("overflow", "hidden");
    });

    $(document).bind('panelclose', function (e, data) {         
        $('body').css("overflow", "auto");
    });
Run Code Online (Sandbox Code Playgroud)

android jquery-mobile jquery-mobile-panel

2
推荐指数
1
解决办法
4981
查看次数

标签 统计

jquery-mobile ×5

jquery-mobile-panel ×5

jquery ×3

android ×2

height ×1

ios ×1

php ×1