Question

我正在开发一个jquery / PhoneGap应用程序。我一直在努力让按钮按照我想要的方式运行。总之，我试图实现以下目标：

我放了一组六个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-mobile。

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

Answer 1

以下是自动调整按钮宽度和字体大小的解决方法。

演示：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);
 }
});

Jquery Mobile中的按钮自动大小

1 个答案: