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