Bagaimanakah Saya Boleh Meningkatkan Penandaan Kandungan Ditambah Secara Dinamik dengan Cekap dalam jQuery Mobile?

Peningkatan Penandaan Kandungan Ditambah Secara Dinamik

Pengenalan

Untuk meningkatkan penandaan kandungan yang ditambah secara dinamik, ia tidak mencukupi untuk menambahkan elemen baharu sahaja. Kandungan baharu memerlukan penggayaan jQuery Mobile. Memandangkan proses ini memerlukan sumber, adalah penting untuk meminimumkan peningkatan yang diperlukan.

Tahap Peningkatan

Terdapat tiga tahap peningkatan:

1. Komponen/widget tunggal
2. Halaman kandungan
3. Kandungan halaman penuh (pengepala, kandungan, pengaki)

Tingkatkan Satu Komponen/Widget

Nota: Kaedah ini hanya boleh digunakan pada halaman semasa/aktif.

Setiap Widget Mudah Alih jQuery boleh dipertingkatkan secara dinamik:

Paparan Senarai

• Peningkatan Penanda: $('#mylist').listview(' segar semula');
• Contoh: https://jsfiddle.net/Gajotres/LrAyE/
• Nota: refresh() hanya mempengaruhi elemen paparan senarai baharu.

Butang

• Penanda Penambahbaikan: $('[type="button"]').button();
• Contoh: https://jsfiddle.net/Gajotres/m4rjZ/
• Nota: Butang juga boleh dibuat daripada div asas: https://jsfiddle.net/Gajotres/L9xcN/

Navbar

• Peningkatan Markup: $('[data-role="navbar"]').navbar();
• Contoh: https://jsfiddle.net/Gajotres/w4m2B/
• Tambahan Tab Dinamik: https://jsfiddle.net/Gajotres/V6nHp/

Input Teks, Input Carian & Kawasan Teks

• Peningkatan Markup: $('[type="text"]').textinput();
• Contoh: https://jsfiddle.net/Gajotres/9UQ9k/

Peluncur & Togol Balik Suis

• Peningkatan Penanda: $('[type="range"]').slider();
• Contoh: https://jsfiddle.net/Gajotres/caCsf/
• Nota: Peluncur mempunyai beberapa peningkatan semasa acara pagebeforecreate: https://jsfiddle.net/Gajotres/NwMLP/
• Baca lebih lanjut: https://stackoverflow.com/a/15708562/1848600

Kotak Semak & Radio

• Peningkatan Markup: $('[type="radio"]').checkboxradio();
• Contoh: https://jsfiddle.net/Gajotres/VAG6F/
• Pemilihan/Nyahpilihan: $("[type='radio']").eq(0).attr("checked", false).checkboxradio("refresh");

Pilih Menu

• Peningkatan Penanda: $('select').selectmenu();
• Contoh: https://jsfiddle.net/Gajotres/dEXac/

Boleh Dilipat

• Peningkatan Markup: $('.selector').trigger('create');
• Contoh: https://jsfiddle.net/Gajotres/ck6uK/

Jadual

• Penanda Penambahbaikan: $.(".selector").table("refresh");
• Contoh: https://jsfiddle.net/Gajotres/Zqy4n/

Panel

• Peningkatan Penanda Panel: $('.selector').trigger('pagecreate');
• Peningkatan Penanda Kandungan: $('.selector').trigger('pagecreate');
• Contoh: https://jsfiddle.net/Palestinian/PRC8W/

Tingkatkan Kandungan Halaman

Tingkatkan keseluruhan halaman kandungan:

$('#index').trigger('create');

Contoh: https://jsfiddle.net/Gajotres/426NU/

Tingkatkan Kandungan Halaman Penuh (Pengepala, Kandungan, Footer)

Gunakan trigger('pagecreate');, tetapi ambil perhatian bahawa ia hanya boleh digunakan sekali setiap muat semula halaman.

Contoh: https:/ /jsfiddle.net/Gajotres/DGZcr/

Penambahan Pihak Ketiga Pemalam

• Perubahan Teks Butang: https://jsfiddle.net/Gajotres/mwB22/

Dapatkan Maksimum yang Betul Ketinggian Kandungan

Gunakan CSS untuk menetapkan ketinggian relatif div kandungan ke ketinggian pengepala dan pengaki.

Halang Peningkatan Penanda

• Kaedah 1: Tambahkan data-enhance="false" pada pengepala, kandungan atau pengaki bekas.
• Kaedah 2: Tambahkan data-role="none" pada elemen yang tidak sepatutnya dipertingkatkan.
• Kaedah 3: Halang elemen HTML tertentu daripada peningkatan: $.mobile.page.prototype.options.keepNative = "select, input";

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Meningkatkan Penandaan Kandungan Ditambah Secara Dinamik dengan Cekap dalam jQuery Mobile?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!