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

У меня есть сайт 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 подтвердить изменения при изменении ширины видового экрана? Я нашел схожий вопрос об изменении атрибута данных, и он не имеет разумных ответов.

Ответы

Ответ 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();
});

Ответ 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/, просто растяните область результатов, чтобы увидеть разницу.

ИЗМЕНИТЬ:

Это должно сделать это, например, одно и то же: 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> тег.

Ответ 3

Это работает для меня довольно солидно в 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);
});

Ответ 4

Работайте для тегов и кнопок типа data-icon, по умолчанию установите 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: Похоже, он работает только при создании страницы, а не в изменении ориентации.

Кредит: [email protected]

Ответ 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;
  }
}