jQuery Mobileでボタンのテキストを表示または非表示にする

Question

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

私はこの目的のために意味するiconpos option/data-attributeについて知っています。私が望むときにはleftに設定し、そうでないときにはnotextに設定することができます。私はおそらく、属性を変更し、ページの読み込み、向きの変更、およびウィンドウのサイズ変更イベントのボタンをリフレッシュするためにいくつかのJavaScriptを思いつくことができますが、それは扱いにくくなる可能性があり、ビューポートを引き起こす可能性のあるイベント変更する幅。

EDIT 2：常に発生する私は、いくつかのブラウザやデバイス上で、私のサイトをテストし、それは、向きを変え、ウィンドウのサイズを変更する、と示すと、（それらのものが考えられる状況で）オンスクリーンキーボードを隠すように思えますwindowオブジェクトでresizeイベントがトリガーされます。もちろん、私はこれが常にすべてのブラウザで起こるかどうかはわかりません。

iconposオプションは、より多くの影響を与えるようにそれはそう、私は、ビューポートの幅に応じて、inlineまたはnoneとしてテキストにdisplay CSSプロパティを設定するために、メディアクエリーのいくつかの並べ替えを使用して考えたが、私はjQueryのモバイル用のコードを見た後、テキストの表示だけではなく、ディメンション、タイトル属性、アイコンの位置などに影響を与えます。そのため、CSSだけでは不可能です。

EDIT：ボタンがヘッダーにあるので、インラインボタンの1つです。 CSSを使ってテキストを隠すだけで、面白そうに見えるようになります。

ここでは、ビューポートの幅に基づいてテキストを表示または非表示にする簡単で実践的な方法は誰も知っていますか？またはより一般的な質問として、ここでは、ビューポートの幅に基づいてデータ属性を変更し、ビューポートの幅が変更されたときにjQuery Mobileがその変更を認識する方法を知っていますか？データ属性の変更についてsimilar questionが見つかりました。それには妥当な答えがありません。

Answer 1

これは私がこれまでに出ている最高のものである：型データアイコンのボタンタグの

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

Answer 2

これは純粋な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/、結果領域を伸ばして違いを確認するだけです。

EDIT：

これはそれを行う必要があり、例は同じである：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; 
    }  
}  

この例では< >タグで作成したボタンでのみ動作します。

Answer 3

が作業デフォルトではHTMLでdata-iconpos="notext"を設定し、その後、追加する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'); 
    } 
} 

EDIT：それだけでページ作成ではなく姿勢変化に働くように見えます。

クレジット：Aurelio@buildmobile.com

Answer 4

これは、jQueryのモバイル1.4ベータ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); 
}); 

Answer 5

ここには、IE8 +と他のすべてのブラウザで動作する純粋なCSSソリューションがあります。コードはTwitter-Bootstrapのものであり、ちょっと修正されていることに注意してください。

DEMO

<button type="submit" class="btn btn-primary" value="Submit"> 
    <i id="versturen" class="fa fa-check"></i> 
    <span class="sr-only-xs"> Versturen</span> 
</button> 

@media (max-width: 767px) { 
    .sr-only-xs { 
    position: absolute; 
    width: 1px; 
    height: 1px; 
    padding: 0; 
    margin: -1px; 
    overflow: hidden; 
    clip: rect(0,0,0,0); 
    border: 0; 
    } 
}