Показать или скрыть текст кнопки в jQuery Mobile

Question

У меня есть сайт jQuery Mobile с некоторыми кнопками. Я хочу показать текст в правой части кнопки, если и когда область просмотра имеет 640 пикселей или ширину и скрыть текст в противном случае.

Я знаю о iconpos option/data-attribute, который предназначен для этой цели, и что его можно установить на left, чтобы показать текст, когда я хочу его, и notext, когда я этого не сделаю. Возможно, я могу придумать Javascript, чтобы изменить атрибут и обновить кнопку на загрузке страницы, изменении ориентации и изменениях размера окна, но это может стать громоздким, и я не уверен, что я забываю какое-то событие, которое может вызвать окно просмотра ширина для изменения.

EDIT 2: Я проверил мой сайт на нескольких браузеров и устройств, и кажется, что изменение ориентации, изменение размеров окна и отображения и скрытия экранной клавиатуры (в тех случаях, когда эти вещи возможны) всегда вызывали событие resize, которое должно быть запущено на объекте window. Конечно, я не знаю точно, что это всегда произойдет во всех браузерах.

Я думал об использовании какой-то медиа-запрос, чтобы установить свойство display CSS на тексте как inline или none в зависимости от ширины окна просмотра, но после того, как я посмотрел на код JQuery Mobile, похоже, вариант iconpos затрагивает больше чем просто видимость текста: он влияет на размеры, атрибут заголовка, положение значка и некоторые другие вещи, поэтому это может быть невозможно, используя только CSS.

EDIT: Я забыл упомянуть, что кнопка находится в заголовке, поэтому это одна из встроенных кнопок. Простое скрытие текста с помощью CSS сделает его забавным.

Кто-нибудь здесь знает простой и практичный способ показать или скрыть текст на основе ширины видового экрана? Или как более общий вопрос: Кто-нибудь знает, как изменить атрибут данных на основе ширины видового экрана и заставить jQuery Mobile подтвердить изменения при изменении ширины видового экрана? Обнаружил similar question об изменении атрибута data и у него нет разумных ответов.

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

Работа за и кнопки тегов данных-значок типа, по умолчанию набор data-iconpos="notext" в HTML, а затем связать 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 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); 
}); 

Answer 5

Вот чистое решение css, которое будет работать на IE8 + и всех других браузерах. Обратите внимание, что код из 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; 
    } 
}