Button auto size in Jquery Mobile

问题

I am developing a jquery/PhoneGap application. I have been trying hard to get the buttons behave the way I want to. In short I am trying to achieve the following:

I put a set of six Jquery-Mobile buttons (mini, normal or button-group).
The above set needs to be in one horizontal line so I have put them in a div.

The numbers of buttons and its text dynamically changes, so I need a CSS/JS trick that allows me to resize the button size and text based on the div/screen size. When I started with Jquery mobile (two weeks ago), I thought that this will be a basic functionality :) but alas !

Some code that I am trying right now is:

//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;

Right now what I have is works fine on small screen devices, but as soon as I open my app in large screen device the buttons look very small with lot of empty spaces. Any help here will be appreciated !!

PS: Also used media queries - but they somehow do not work on jquery-mobile.

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

回答1:

Here's a workaround for auto-adjust width and font-size of buttons.

Demo: 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);
 }
});

来源：https://stackoverflow.com/questions/16248772/button-auto-size-in-jquery-mobile

标签

javascript

css

jquery-mobile

button