Jquery Mobile中的按鈕自動大小

我正在開發一個jQuery/PhoneGap應用程序。我一直在努力讓按鈕按照我想要的方式行事。總之我試圖實現以下內容：Jquery Mobile中的按鈕自動大小

我把一組六個Jquery-Mobile按鈕（迷你，正常或按鈕組）。
上面的設置需要在一個水平線上，所以我把它們放在一個div中。

按鈕及其文本的數量會動態變化，所以我需要一個CSS/JS技巧，允許我根據div /屏幕大小調整按鈕大小和文本大小。當我開始使用Jquery mobile（兩週前）時，我認爲這將是一項基本功能:)但唉！

，我想現在有些代碼：

//TO CREATE BUTTONS 
for(var button_id=0; button_id < window.g_maxLength/2; button_id++){ 
var bt_id= "<button class =\"tile\" data-theme=\"e\" data-inline=\"true\" data-mini=\"true\" id =\"button_tid"+button_id+"\";>.</button>"; 
$("#buttoncontainer1").append($(bt_id)); 
} 

//HTML 
<div id="tiled" align="center"> 
      <div data-role="controlgroup" data-type="horizontal" id="buttoncontainer1"> 
     <!-- Button will be added by JS--> 
     </div> 
</div> 
//CSS 
#tiled { 

align:center; 
height:23%; 
position:absolute; 
text-align :center; 
padding: 1px; 
width:90%; 
top:73%; 
margin-right:4%; 
margin-left:4%; 
background-color:#b0e0e6; 
border-radius: 10px; 
border-width: 3%; 
border-style:double;

現在我有的是在小屏幕設備工作正常，但只要我在大屏幕設備打開我的應用程序的按鈕看起來很小有很多空的空間。任何幫助在這裏將不勝感激！

PS：也用於媒體查詢 - 但他們不知道如何在jquery移動。

@media (min-width: 500px) { 
      html { font-size: 120%; } 
     }

來源

2013-04-27 Naunidh

你可以做類似這樣http://fiddle.jshell.net/Palestinian/DTPZx/使用'UI的佈局grid'東西。在JQM自定義CSS中，每個屬性應以'！important'結尾以覆蓋JQM樣式。 – Omar 2013-04-27 08:49:17

謝謝，如果我能找出字體大小的問題，這一般工作:)。雖然它不適用於按鈕組。 – Naunidh 2013-04-27 15:12:15

是的，我錯過了controlgroup的東西。 – Omar 2013-04-27 15:41:39

下面是自動調整按鈕寬度和字體大小的解決方法。

演示：http://jsfiddle.net/Palestinian/UYa4Y/

// Number of buttons 
var buttons = $('[data- role=controlgroup]').find('a').length; 
// Parent div width 
var btn_width = $('#tiled').width()/buttons; 

// Remove left/right button padding 
$('.ui-btn-inner').css({ 
'padding-left': 1, 
    'padding-right': 1 
}); 

// Set button new width 
$('.ui-btn-inner').width(btn_width - 4); 

// Adjust font-size for each button based on text 
$('.ui-btn-text').each(function() { 
while ($(this).width() > $('.ui-btn-inner').width()) { 
    var font = parseFloat($(this).css('font-size')) - 1 + "px"; 
    $(this).css('font-size', font); 
} 
});

來源

2013-04-28 15:08:05 Omar

這似乎是一個非常簡單的用例，但jquery需要大量的努力和黑客來做到這一點。非常感謝有趣的例子，這些將幫助我在其他情況下破解Jquery。 – Naunidh 2013-04-29 10:36:47

@Naunidh我很高興我一直在幫助:)嗯，JQM有時需要某種有點冒險的方式;） – Omar 2013-04-29 11:10:01

Jquery Mobile中的按鈕自動大小

回答

相關問題