Question

我想在页面加载时在我的页面上显示一个面板。我已经用脚本获得了这个。

但是当网站加载时，面板会显示整个页面 - ＆gt;我页面的另一面向右滚动，所以我看不到整个内容。

所以我将“class =”ui-responsive-panel“”添加到我的页面包装器中。

现在我遇到同样的问题，直到我点击一个链接到我的面板的按钮。这个按钮在第一次点击时隐藏面板，第二次显示我的面板，右侧内容正在缩小他的宽度（这是我的目标）。

我必须添加什么，这已经在页面加载完成了？

由于

编辑：我的代码

<!-- Page -->
<div data-role="page" id="page" class="ui-responsive-panel">

<!-- Panel -->
<div data-role="panel" id="Panel" data-display="reveal" data-position-fixed="true" data-swipe-close="false" data-dismissible="false" data-theme="none">
Content here
</div>

<div data-role="header" data-theme="b" data-position="fixed">
        <h1>Title</h1>
    </div>
    <div data-role="content">

Here my Content which I want to auto scale on page load

<!-- Panel shown on page load -->
<script>$(document).on('pagebeforeshow', '#Page', function(){       
    $( "#Panel" ).panel( "open");
});</script>

</div>
</div>

Answer 1

这里有很多选择。首先，我建议调查twitter bootstrap。他们做了很多造型，所以你没有必要。

此外，您可以在每个div上设置一定的百分比宽度。只需使用宽度：'value'％;。

你可以做的另一件事是使用@media标签：

@media (min-width 300 && max-width: 480px) {
    #panel {
            width: 96px;
    }
}

Answer 2

我知道这有点晚了，但万一有人还在试图找到这个问题的答案。我遇到了同样的问题，并通过以下方式解决了问题：

    $(document).on("pagechange", function (event, data) {
        $('#Panel').panel("open");
    })

现在面板的html代码如下：

<div  id="Panel" 
      data-role="panel" 
      data-display="push" 
      data-animate="false"
      data-dismissible="false" >
      <!-- /panel content -->
</div>

数据不允许=＆＃34; false＆＃34;是可选的，以防你想让面板保持可见，数据动画=＆＃34;假＆＃34;是可选的，以防你想在页面加载时摆脱动画。

jQuery - 响应式面板

2 个答案: