在jQuery Mobile的按钮自动调整大小 [英] Button auto size in Jquery Mobile

问题描述

我开发一个jQuery / PhoneGap的应用程序。我一直在努力，以获得按钮的行为我想要的方式。总之我想实现如下：

1. 我把一组六个Jquery的-Mobile的按钮（小，正常或按钮组）。


2. 上面的设置必须在一个水平线上，所以我已经把它们放在一个div。

按钮和其文本的数量是动态变化的，所以我需要一个CSS / JS伎俩，让我调整基础上，DIV /屏幕尺寸按钮的大小和文字。当我开始使用jQuery Mobile（两周前），我认为这将是一个基本的功能:)但是，唉！

这是我想现在有些code是：

  //创建按钮
为（VAR button_id = 0; button_id＆下; window.g_maxLength / 2; button_id ++）{
VAR bt_id =＆LT;按钮类= \\板砖\\数据主题= \\E \\数据内嵌= \\真正\\数据迷你= \\真正\\ID = \\button_tid+ button_id + \\方式＆gt;＆下; /按钮＆gt;中;
$（＃buttoncontainer1）附加（$（bt_id））;
}// HTML
＆LT; D​​IV ID =平铺ALIGN =中心＆GT;
            ＆LT; D​​IV数据角色=controlgroup数据类型=横ID =buttoncontainer1＆GT;
        ＆LT;！ - 巴顿将被JS加 - ＆GT;
        ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
// CSS
#tiled {对齐：中心;
高度：23％;
位置：绝对的;
文本对齐：中心;
填充：1px的;
宽度：90％;
顶部：73％;
保证金右：4％;
保证金左：4％;
背景颜色：＃b0e0e6;
边界半径：10px的;
边框宽度：3％;
边框样式：双;
 

现在我有什么作品是在小屏幕设备正常，但只要我打开我的大屏幕设备的应用程序的按钮看起来非常小，大量的空白空间。任何帮助将AP preciated !!

PS：还用媒体的质疑 - 但他们不知何故没有jQuery的移动工作

  @media（最小宽度：500像素）{
            HTML {字体大小：120％; }
        }
 

解决方案

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

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

  //按键数
。VAR键= $（'[数据 - 角色= controlgroup]'）找到（'A'）的长度。
//父格宽度
VAR btn_width = $（'＃平铺'）宽（）/按钮。//删除左/右按钮填充
$（'UI的BTN-内'）。CSS（{
 '填充左'：1，
    填充右'：1
}）;//设置按钮，新的宽度
$（'。UI的BTN-内'）宽度（btn_width  -  4）;//基于文本的每个按钮调整字体大小
$（'UI的BTN-文本）。每个（函数（）{
 而（$（本）.WIDTH（）方式＆gt; $（'UI的BTN-内'）宽（））{
    VAR字体= parseFloat（$（本）的.css（'字号'）） -  1 +PX
    $（本）的.css（'字体大小，字体）;
 }
}）;
 

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:

1. I put a set of six Jquery-Mobile buttons (mini, normal or button-group).
2. 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%; }
        }

解决方案

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

这篇关于在jQuery Mobile的按钮自动调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！