Возможно ли иметь меню выбора JQuery Mobile без полной структуры? - PullRequest
Новая
       14

Возможно ли иметь меню выбора JQuery Mobile без полной структуры?

1 голос
/ 15 февраля 2012

Я пытаюсь использовать меню выбора JQuery Mobile, не используя полную структуру и не сталкиваясь с проблемами.

Я бы предпочел не использовать полную мобильную библиотеку jquery, поскольку она настраивает всю мою страницу и все элементы управления, ссылки на ней и применяет стиль к тегу страницы. Это заставляет внешний вид быть настроенным для всей страницы. Я использую адаптивный веб-дизайн для настройки элементов управления страницами и смог успешно применить внешний вид и восприятие JQuery Mobile для текстовых полей, когда максимальная ширина достигает 680, это выглядит великолепно, но мои блоки выбора выглядят плохо при применении тех же стилей , В частности, выпадающая стрелка справа отрублена справа из-за закругленных краев. Если возможно, я хотел бы, чтобы текст выглядел так же, как текстовые поля, применяемые к меню выбора, и управлял всем в файле CSS, но если есть урезанная библиотека .js для меню выбора, это также будет приемлемым вариантом.

Кто-нибудь успешно применил внешний вид JQuery Mobile для блоков выбора только с помощью CSS? Кто-нибудь использовал узкую библиотеку JQuery Mobile, которая позволяет настраивать таргетинг только на отдельные меню и не требует всей библиотеки JQuery Mobile .js или таблиц стилей?

Любая помощь будет принята с благодарностью! Заранее спасибо.

Мне удалось получить какой-то CSS, который выглядит так, как будто это начало того, что мне нужно, но выпадающий список невидим, хотя он кликабелен и показывает варианты при его выборе. Я думаю, что это может быть связано с javascript, который работает JQM для применения стиля выпадающего списка. Ниже приведен CSS, может быть, я просто что-то упустил. 

box-sizing: border-box;-webkit-box-align: center;border: 1px solid;
border-image: initial;white-space: pre;-webkit-rtl-ordering: logical;
color: black;background-color: white;cursor: pointer;
-webkit-appearance: button;left: 0;top: 0;
width: 100%;min-height: 1.5em;min-height: 100%;height: 3em;
max-height: 100%;opacity: 0;-ms-filter: "alpha(opacity=0)";filter: alpha(opacity=0);
z-index: 2;cursor:pointer;-webkit-appearance:button;left:0;top:0;width:100%;min-height:1.5em;min-height:100%;height:3em;max-height:100%;opacity:0;-ms-filter:"alpha(opacity=0)";filter:alpha(opacity=0);z-index:2

Ответы [ 3 ]

3 голосов
/ 15 февраля 2012

Я знаю, что в Примечаниях к выпуску для RC1 они развязали jQM и работали над Download Builder

Загрузитьстроитель: в работе

Теперь, когда мы отсоединили большинство виджетов пользовательского интерфейса, мы заложили основу для создания загрузчика.Это позволит вам создать собственную версию jQuery Mobile, включающую только те части, которые вам нужны.Например, вы можете просто использовать основные файлы, чтобы добавить навигацию на основе Ajax с pushState и использовать некоторые сенсорные события и другие утилиты с очень легкой сборкой (примерно 10 тыс.).Или вы можете добавить в определенные виджеты пользовательского интерфейса, такие как элементы формы, списки и т. Д., Чтобы создать оптимизированную сборку.Мы стремимся запустить инструмент для построения загрузок как часть финала 1.0 в некоторой форме.Сейчас мы работаем над картой зависимостей для всех плагинов, поддерживающих этот инструмент.

Не уверен, что это релиз на данный момент

2 голосов
/ 02 марта 2012

Мне удалось заставить это работать, используя только CSS (ниже). Это работает и проверено на IE9, Chrome, FF и Safari. Я думал, что опубликую ответ здесь на случай, если кто-то еще против этой проблемы. Это хорошо работало для меня, когда я использовал адаптивный веб-дизайн и настраивал мои текстовые поля (и выбирал), когда браузер достиг определенного порога, чтобы он выглядел более мобильным при просмотре на планшете или телефоне. 

select  
{
    height:32px; -webkit-appearance: button;
    -webkit-border-radius: 20px;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-padding-end: 20px;
    -webkit-padding-start: 2px;
    -webkit-user-select: auto;
    background: url(../Content/Images/selector_trans.png), 
    -webkit-linear-gradient(#E5E5E5, #E5E5E5 40%, #E2E2E2);
    background-position: 100% 53%, center center;        
    background-repeat: no-repeat, repeat-x; 
}
0 голосов
/ 15 февраля 2012

Не могли бы вы просто скопировать CSS и HTML, которые он добавил после того, как JQM делает свое волшебство? Если вы скопируете эти свойства на свою страницу, то у вас будет нужный вам экран без рамок, обгоняющих вашу страницу.

...