jQuery Mobile: группа переключателей с двумя/тремя столбцами по вертикали.

В последнее время я работаю с jQuery Mobile и начал сталкиваться с различными ограничениями; большинство из которых я могу обойти, используя какую-то манипуляцию jQuery/Javascript/CSS. Мы используем много iPad, что обеспечивает большую ширину, чем ваш обычный телефон. Некоторые группы ввода на наших страницах лучше выглядят в двухколоночном формате; когда возможно.

Примером может служить длинный список переключателей. Это выглядит плохо только в одной колонке. Мы хотели бы отображать списки переключателей в 2 или 3 столбца вместо типичного формата в 1 столбец, который вы получаете с одной «вертикальной» «контрольной группой». См. вертикальную группу управления на этой демонстрационной странице:

http://demos.jquerymobile.com/1.4.5/checkboxradio-radio/#Verticalgroup

С помощью флажков я добился этого, создав две или три разные контрольные группы, а затем поместив их в сетку из трех столбцов. Это хорошо работает с флажками, но я не уверен, как это сделать с переключателями. Любые идеи?

Я предполагаю, что могу создать три разные группы вертикального управления входом радио (бок о бок), а затем манипулировать CSS так, чтобы это выглядело как одна группа. Мне пришлось бы управлять скрытым вводом для фактического выбранного радио.


php jquery css jquery-mobile
person jjwdesign    schedule 29.02.2016    source источник
comment
Лично я считаю, что использование bootstrap для разработки дизайна для мобильных устройств является гораздо более приятной задачей.   -  person Wesley Smith    schedule 29.02.2016
comment
Отмеченный. К сожалению, я застрял с jQuery Mobile для этого проекта.   -  person jjwdesign    schedule 02.03.2016
comment
Вы можете сделать jsFiddle, показывающий, что вы сделали для флажков?   -  person Wesley Smith    schedule 02.03.2016
comment
Вероятно, не лучший вопрос для SO.   -  person jjwdesign    schedule 02.03.2016

Ответы (1)


arrow_upward
0
arrow_downward

Я решил создать две колонки для маркетингового источника; Право и лево. Это имена «marketing_source_left» и «marketing_source_right». Я заполняю две группы управления вертикальным радио, а затем использую jQuery, чтобы изменить обе так, чтобы свойство «name» имело просто «marketing_source».

// Define current marketing_source value and remove hidden field
var marketing_source = $('#marketing_form #marketing_source').val(); // hidden field
$('#marketing_form #marketing_source').val(marketing_source).remove();

// Change all marketing source radios (left and right sides)
// to have property name="marketing_source"
$("#marketing_form input:radio[name='marketing_source_left']").prop('name', 'marketing_source').prop('checked', false);
$("#marketing_form input:radio[name='marketing_source_right']").prop('name', 'marketing_source').prop('checked', false);

// Set the radio to checked for the marketing source value
$('#marketing_form input[type="radio"]:checked').prop('checked', false); // Uncheck current
$('#marketing_form input:radio[name="marketing_source"]').filter('[value="'+marketing_source+'"]').prop('checked', true);
$('#marketing_form input:radio[name="marketing_source"]').checkboxradio('refresh');

Используемый CSS был чем-то похожим на этот.

#marketing_right_div, #marketing_left_div {
    display: inline-block !important;
    width: 314px !important;
    text-align: top;
    vertical-align: top;
}
person jjwdesign    schedule 02.03.2016