jquery mobile根據內容大小調整按鈕

我想實現使用javascript/jquery和css的以下佈局。我有一個使用jquery mobile編寫的項目。如預期的那樣，有標題，內容和頁腳。我的頁腳沒有任何內容，並浮在頁面的底部。我的內容是一個動態的表單，底部的下一個按鈕提交。在提交時，我使用按鈕獲得不同的表單。該按鈕始終位於表單右側的下方。jquery mobile根據內容大小調整按鈕

根據窗體內的內容，按鈕應該浮動到窗體下方並右對齊。如果表單內容較小且未覆蓋屏幕，則該按鈕應放在頁腳上方並右對齊。如果表單中的內容多於屏幕尺寸，則該按鈕應粘貼在表單內容下方。

我試過使用jquery方法來獲取屏幕的大小和通過css設置到按鈕，但這給了它一個固定的屬性，並且不會改變，如果我改變屏幕。

var innerHeight = $('#contents').height(); 
    alert(innerHeight); 
    var screenHeight = window.innerHeight; 
    alert(screenHeight); 
    if(innerHeight < screenHeight) { 
    $('#contents').css("height", screenHeight-120); 
    }

我希望這是動態的，這樣如果在移動設備上查看，它將在橫向和縱向上正確渲染。感謝您的所有建議。

來源

2012-09-11 Mario Gonzalez

聽起來你正在尋找該按鈕的粘頁腳：http://www.cssstickyfooter.com/

一定要墊粘頁腳至少你在帖子中提到，固定位置頁腳元素的高度（這將確保您的按鈕從不隱藏）。

注：您可能想要重新考慮您在此設計中的用戶體驗。
「提交/下一步」按鈕的位置應該直觀且一致。

例如：Form＃1的按鈕距離輸入字段僅有幾個像素;表單＃2在輸入下方具有100px的按鈕。對我來說，這是糟糕的設計。這是一種形式 - 用戶期望以某種方式行事的工具。我相信'提交'按鈕的位置'玩'是一個壞主意 - 除非它在整個表單提交過程中有一個非常具體的位置。

也許一個棘手的頁腳平衡頁面會給你最好的兩個之間的輸入計數結合「想要」和「需要」

來源

2012-09-11 17:06:53 Dawson

這更可能是我一直在尋找。感謝您的設計輸入。我會考慮的， –

你可以在CSS中使用媒體查詢來達到你想要的效果。儘管我喜歡編寫JavaScript，但CSS是更好的資源。 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

*作爲一個側面說明，媒體查詢本身不支持IE8。但是，您的主要目的是爲移動設備提供響應式設計 - 哪些CSS可以很好地滿足您的需求。

來源

2012-09-11 16:43:38

jquery mobile根據內容大小調整按鈕

回答

相關問題