1

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

  1. 我放置了一组六个 Jquery-Mobile 按钮（迷你、普通或按钮组）。
  2. 上面的集合需要在一条水平线上，所以我把它们放在了一个 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%; }
        }
4

1 回答 1

2

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

演示：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-28T15:08:05.833 回答