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中的按钮自动大小

回答

相关问题