jQuery Mobile: Grup kontrol vertikal dua/tiga kolom dari tombol radio

Saya telah bekerja dengan jQuery Mobile akhir-akhir ini dan mulai mengalami berbagai keterbatasan; sebagian besar dapat saya atasi menggunakan semacam manipulasi jQuery/Javascript/CSS. Kami menggunakan banyak iPad, yang memungkinkan lebar lebih besar daripada ponsel biasa. Beberapa grup masukan di halaman kami cenderung terlihat lebih baik dalam format dua kolom; bila memungkinkan.

Contohnya adalah daftar panjang tombol radio. Kelihatannya buruk hanya dalam satu kolom. Kami ingin menampilkan daftar tombol radio dalam 2 atau 3 kolom, bukan format 1 kolom biasa yang Anda dapatkan dengan satu "grup kontrol" "vertikal". Lihat grup kontrol vertikal di halaman demo ini:

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

Dengan kotak centang, saya menyelesaikannya dengan membuat dua atau tiga grup kontrol berbeda dan kemudian menempatkannya ke dalam kotak 3 kolom. Ini berfungsi baik dengan kotak centang, tapi saya tidak yakin bagaimana melakukannya dengan tombol radio. Ada ide?

Saya berasumsi saya dapat membuat tiga grup kontrol vertikal input radio yang berbeda (berdampingan) dan kemudian memanipulasi CSS sehingga terlihat seperti ada satu grup. Saya harus mengelola masukan tersembunyi untuk radio yang dipilih sebenarnya.


php jquery css jquery-mobile
person jjwdesign    schedule 29.02.2016    source sumber
comment
Secara pribadi, menurut saya menggunakan bootstrap untuk mendesain seluler adalah tugas yang jauh lebih menyenangkan   -  person Wesley Smith    schedule 29.02.2016
comment
Dicatat. Sayangnya, saya terjebak dengan jQuery Mobile untuk proyek ini.   -  person jjwdesign    schedule 02.03.2016
comment
bisakah Anda membuat jsFiddle yang menunjukkan apa yang Anda lakukan untuk kotak centang?   -  person Wesley Smith    schedule 02.03.2016
comment
Mungkin bukan pertanyaan terbaik untuk SO.   -  person jjwdesign    schedule 02.03.2016

Jawaban (1)


arrow_upward
0
arrow_downward

Saya memutuskan untuk membuat dua kolom untuk sumber pemasaran; kanan dan kiri. Namanya adalah "marketing_source_left" dan "marketing_source_right". Saya mengisi dua grup kontrol vertikal radio dan kemudian menggunakan jQuery untuk mengubah keduanya agar memiliki properti "nama" hanya "sumber_pemasaran".

// 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 yang digunakan mirip dengan ini.

#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