jQuery - 响应式面板
Posted
技术标签:
【中文标题】jQuery - 响应式面板【英文标题】:jQuery - Responsive panel 【发布时间】:2013-02-25 23:40:47 【问题描述】:我想在页面加载时在我的页面上显示一个面板。我已经用脚本得到了这个。
但是当网站加载时,面板会显示整个页面 -> 我页面的另一侧正在向右滚动,所以我看不到整个内容。
所以我在页面包装器中添加了“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>
【问题讨论】:
如果您希望任何人能够提供帮助,您可能应该先在您的问题中添加一些代码;) @TravisJ 将我的代码添加到我的问题中;) 您想让#page
在您的面板打开时可见吗?
@OmarNew2php 我已经有了这个。我可以使用我的面板和我的网站。但是,如果我加载页面,右侧的内容将无法正确显示。它被推到一边。我想要这个,但是边的宽度应该自动设置为适合浏览器窗口
您希望页面和面板都完全可见,对吧?
【参考方案1】:
这里有很多选择。首先,我建议查看twitter bootstrap。他们做了很多造型,所以你不必这样做。
此外,您可以在每个 div 上设置一定的百分比宽度。只需使用宽度:'value'%;。
您可以做的另一件事是使用@media 标签:
@media (min-width 300 && max-width: 480px)
#panel
width: 96px;
【讨论】:
【参考方案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>
其中 data-dismissible="false" 是可选的,以防您想保持面板可见,而 data-animate="false" 是可选的,以防您想摆脱页面加载时的动画。
【讨论】:
以上是关于jQuery - 响应式面板的主要内容,如果未能解决你的问题,请参考以下文章
如何以百分比设置 jQuery Mobile 1.4 响应式面板的宽度?