10

ボタンがいくつかある jQuery Mobile サイトがあります。ビューポートが 640 ピクセル以上の場合はボタンの右側にテキストを表示し、それ以外の場合はテキストを非表示にしたいと考えています。

その目的のために意図されたiconposオプション/データ属性について知っており、left必要なときにテキストを表示するように設定できることとnotext、そうでないときにテキストを表示できることを知っています。おそらく、属性を変更し、ページの読み込み、方向の変更、ウィンドウのサイズ変更イベントでボタンを更新する Javascript を考え出すことができますが、それは面倒になる可能性があり、ビューポートを引き起こす可能性のあるイベントを忘れているかどうかはわかりません変更する幅。

編集 2:いくつかのブラウザーとデバイスでサイトをテストしましたが、方向の変更、ウィンドウのサイズ変更、スクリーン キーボードの表示と非表示 (これらのことが可能な状況で) により、常にresizeイベントがトリガーされたようですwindowオブジェクト。もちろん、これがすべてのブラウザーで常に発生するかどうかはわかりません。

ある種のメディア クエリを使用しdisplayて、テキストの CSS プロパティをビューポートの幅として、inlineまたはnoneビューポートの幅に応じて設定することを考えましたが、jQuery Mobile のコードを見たところ、このiconposオプションはテキストの表示以外にも影響を与えるようです。サイズ、タイトル属性、アイコンの位置などに影響するため、CSS だけでは対応できない場合があります。

編集:ボタンがヘッダーにあることを忘れていたので、インライン ボタンの 1 つです。CSS でテキストを非表示にするだけで、見た目がおかしくなります。

ビューポートの幅に基づいてテキストを表示または非表示にする簡単で実用的な方法を知っている人はいますか? または、より一般的な質問として、ビューポートの幅に基づいてデータ属性を変更し、ビューポートの幅が変更されるたびにjQuery Mobileに変更を認識させる方法を知っている人はいますか? データ属性の変更に関する同様の質問を見つけましたが、合理的な回答はありません。

4

5 に答える 5

6

これは純粋な css ソリューションであり、HTML5 ブラウザが必要ですが、jQuery Mobile にも必要です。

/* Less then 620 px -------------------*/ 
@media all and (max-width: 620px){  
    #custom-button span span { visibility:hidden;} 
}       

/* More then 640 px -------------------*/ 
@media only screen and (min-width: 640px) {
    #custom-button span span { visibility:visible;} 
}

ボタンの高さが同じままであるため、表示よりも可視性の方が優れたソリューションです。

これは動作中の jsFiddle の例です: http://jsfiddle.net/Gajotres/adGTK/、結果領域を引き延ばして違いを確認してください。

編集 ：

これでうまくいくはずです。例は同じです: http://jsfiddle.net/Gajotres/adGTK/

/* Less then 639 px -------------------*/ 
@media all and (max-width: 639px){  
    #custom-button span span.ui-btn-text 
    { 
        left: -9999px !important;
        position: absolute !important;
    } 

    #custom-button span span.ui-icon 
    { 
        float: left !important;
        margin: 2px 1px 2px 3px !important;
        display: block !important;
        z-index: 0 !important;   
        position: relative;
        left: 0 !important;
    } 

    #custom-button span.ui-btn-inner
    { 
        padding: 0 !important;
    } 

    #custom-button
    { 
        height: 24px !important;
        width: 24px !important;
        margin-top: 5px;
    }     
}

この例は、<a> タグで作成されたボタンでのみ機能します。

于 2013-02-22T09:28:44.807 に答える
3

これは私がこれまでに思いついた最高のものです：

$(window).resize(function() {
    $(".ui-btn-left, .ui-btn-right, .ui-btn-inline").filter("[data-icon]")
        .buttonMarkup({iconpos: window.innerWidth >= 640 ? "left" : "notext"})
        .buttonMarkup("refresh");
});

$(document).delegate("[data-role=page]", "pageinit", function() {
    $(window).resize();
});
于 2013-02-25T19:51:34.163 に答える
1

これは、クラスのみのボタン宣言に移行した後、jQuery Mobile 1.4 beta 1 でかなりしっかりと機能しています。

$(window).on("throttledresize", function() {
  var smallButtons = $(window).width() <= 480;
  $('#article_nav a').toggleClass('ui-btn-icon-notext', smallButtons);
  $('#article_nav a').toggleClass('ui-btn-icon-left', !smallButtons);
});
于 2013-10-02T18:15:57.073 に答える
0

data-iconpos="notext"デフォルトで html に設定されているタイプ data-icon の a および button タグで動作し、pagebeforecreate orientationchangeイベントをバインドして、画面幅に応じて属性を追加または削除します。

$(document).on('pagebeforecreate orientationchange', updateIcons);

function updateIcons () {
    if ($(window).width() > 480) {
        $('a[data-icon], button[data-icon]').removeAttr('data-iconpos');
    } else {
        $('a[data-icon], button[data-icon]').attr('data-iconpos', 'notext');
    }
}

編集:ページの作成でのみ機能し、向きの変更では機能しないようです。

クレジット: Aurelio@buildmobile.com

于 2013-03-03T12:15:03.730 に答える