在jQuery Mobile的按钮自动调整大小 [英] Button auto size in Jquery Mobile
问题描述
我开发一个jQuery / PhoneGap的应用程序。我一直在努力,以获得按钮的行为我想要的方式。总之我想实现如下:
- 我把一组六个Jquery的-Mobile的按钮(小,正常或按钮组)。
- 上面的设置必须在一个水平线上,所以我已经把它们放在一个div。
按钮和其文本的数量是动态变化的,所以我需要一个CSS / JS伎俩,让我调整基础上,DIV /屏幕尺寸按钮的大小和文字。当我开始使用jQuery Mobile(两周前),我认为这将是一个基本的功能:)但是,唉!
这是我想现在有些code是:
//创建按钮
为(VAR button_id = 0; button_id&下; window.g_maxLength / 2; button_id ++){
VAR bt_id =<按钮类= \\板砖\\数据主题= \\E \\数据内嵌= \\真正\\数据迷你= \\真正\\ID = \\button_tid+ button_id + \\方式>&下; /按钮>中;
$(#buttoncontainer1)附加($(bt_id));
}// HTML
< DIV ID =平铺ALIGN =中心>
< DIV数据角色=controlgroup数据类型=横ID =buttoncontainer1>
<! - 巴顿将被JS加 - >
< / DIV>
< / DIV>
// 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()方式> $('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:
- 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%; }
}
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屋!