1

jquery/PhoneGap アプリケーションを開発しています。ボタンを思い通りに動作させるために一生懸命努力してきました。要するに、私は次のことを達成しようとしています:

  1. 6 つの Jquery-Mobile ボタン (ミニ、ノーマル、またはボタン グループ) のセットを配置します。
  2. 上記のセットは 1 つの水平線に配置する必要があるため、div に配置しました。

ボタンの数とそのテキストは動的に変化するため、div/画面サイズに基づいてボタンのサイズとテキストのサイズを変更できる CSS/JS トリックが必要です。Jquery モバイルを使い始めたとき (2 週間前)、これは基本的な機能になると思いました :) しかし、残念ながら !

私が今試しているコードは次のとおりです。

//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 に答える