jQuery - 響應式面板

我想在頁面加載時在我的頁面上顯示一個面板。我已經用腳本得到了這個。jQuery - 響應式面板

但是，當網站加載時，面板顯示整個頁面 - >我的頁面的另一面滾動到右側，所以我看不到整個內容。

因此，我在頁面包裝器中添加了「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>

來源

2013-03-10 Kelvin

如果你希望任何人都能幫忙，你應該首先給你的問題添加一些代碼;） – 2013-03-10 21:18:27

@TravisJ將我的代碼添加到我的問題中;） – Kelvin 2013-03-10 21:30:51

你希望你的面板打開時顯示＃頁面？ – Omar 2013-03-10 22:55:12

您在這裏有很多的選擇。首先，我建議調查twitter bootstrap。他們做了很多造型，所以你不必這樣做。

另外，您可以在每個div上設置一定的百分比寬度。只需使用width：'value'％;.

你可以做的另一件事是使用@media標籤：

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

來源

2013-05-29 04:55:21

我知道這是有點晚了，但以防萬一有人仍試圖找到這個問題的答案。我有同樣的問題，以下列方式固定它：

$(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-animate =「false」是可選的，以防您希望在頁面加載時擺脫動畫。

來源

2014-07-03 22:01:04 Lamar

jQuery - 響應式面板

回答

相關問題