Pendahuluan: Baru -baru ini, ketika saya menggunakan komponen Bootstrap, saya menemukan masalah kemudahan penggunaan. Banyak inisialisasi komponen sederhana memerlukan penulisan banyak kode inisialisasi di JS, seperti tag pilih sederhana. Karena hanya perlu mendapatkan data dari latar belakang dan mengisinya ke dalam opsi, tetapi mendapatkan data dari latar belakang memerlukan inisialisasi JS, sehingga menyebabkan banyak kode duplikat dalam kode inisialisasi JS ketika halaman diinisialisasi, yang terlihat sangat menjengkelkan. Jadi saya ingat atribut data di tabel Bootstrap. Akan sangat keren jika saya bisa menggunakan data-* untuk menginisialisasi komponen sederhana secara langsung di HTML. Mari pertama -tama lihat dokumentasi tabel bootstrap:
Anda dapat melihat bahwa hampir semua properti dan peristiwa dalam tabel Bootstrap dapat digunakan dalam data-*, yang terasa cukup bagus. Kemudian blogger akan mulai meneliti. Data-*Dari mana hal ini berasal?
1. Studi pendahuluan tentang data jQuery ()
Setelah mencari online, saya akhirnya menemukan sumber data-*. Ternyata dari JQuery dan HTML5. Hal -hal baik, hal -hal yang sangat bagus! Mari kita lihat API jQuery
Penggunaan aslinya adalah sebagai berikut:
Fungsinya sebenarnya sangat jelas, yaitu menambahkan atribut dan data tertentu ke elemen, atau mengambil nilai.
Mari kita lihat kombinasi metode data () dan atribut HTML5-*
Haha, hal ini bagus. Nilai yang ditetapkan oleh HTML5 Data-* dapat diperoleh dengan menggunakan metode JQuery's Data (). Aturannya di sini adalah sebagai berikut:
1) Semua atribut data harus dimulai dengan "data-",
2) Atribut dipisahkan oleh "-",
3) Saat mengambil atribut di jQuery, cukup hapus "data" dan "-".
Dengan ini sebagai dasar, kita tahu cara mengatur properti dalam tag dan kemudian mengambil properti yang sesuai di JS. Mari kita jelaskan di bawah ini dalam kombinasi dengan contoh enkapsulasi terakhir ComboBox.
2. JQuery Data () mengimplementasikan Data-* Komponen Inisialisasi
Ingat seri komponen JS sebelumnya - merangkum komponen JS Anda sendiri. Anda juga dapat merangkum ComboBox sederhana dalam artikel ini, yang dapat mengambil data dari backend melalui URL. Jadi di bawah ini, kami masih akan melakukan yang terbaik pada dasar komponen ini, dan secara langsung menambahkan atribut data-* ke tag pilih untuk menginisialisasi komponen kotak drop-down.
1. Kode Enkapsulasi Komponen JS
(function ($) {// 1. Tentukan metode ekstensi jQuery comboBox $ .fn.comBoBoX = function (options, param) {if (typeof options == 'string') {return $ .fn.combobox.methods [opsi] (ini, param);} // 2. Gabungkan parameter yang diteruskan saat panggilan dan default [ini, param); $ .fn.comBOBOX.Defaults, opsi || Option.text (Options.Placeholder); Options.onbeforeload.call (target, opsion.param); (item) {var option = $ ('Option> </option>'); Options.onChange) Options.onChange (target.val ()); url) {$ .getjson (url, function (data) {jq.empty (); var option = $ ('<option> </tiption>'); option.attr ('value', ''); option.text ('silakan pilih'); jq.append (opsi); $ .each (data, function, i, item) {var option = $ ($ (opsi '; item [jq.attr (valuefield ')]; }}; // 6. Default parameter list $.fn.combobox.defaults = { url: null, param: null, data: null, valueField: 'value', textField: 'text', placeholder: 'Please select', onBeforeLoad: function (param) { }, onLoadSuccess: function () { }, onChange: function (value) { } }; // Paragraf ini baru ditambahkan, dan metode inisialisasi $ (dokumen) .ready (function () {$ ('. ComboBox'). Masing -masing (fungsi () {var $ comboBox = $ (ini); $ .fn.ComboBox.call ($ comboBox, $ comboBox.data ());})}); }) (jQuery);Sebagian besar kode tidak berbeda dari yang terakhir. Mari fokus pada paragraf berikut
// paragraf ini baru ditambahkan. Setelah inisialisasi halaman selesai, metode inisialisasi $ (dokumen) .ready (function () {$ ('. ComboBox'). Masing -masing (fungsi () {var $ comboBox = $ (ini); $ .fn.comBobox.call ($ combox, $ comboBox.data ());})});Jelas bahwa setelah inisialisasi halaman selesai, komponen diinisialisasi melalui pemilih gaya. Masing-masing digunakan, jika ada beberapa gaya .comboBox, de-initialize masing-masing secara bergantian. Hubungi metode panggilan untuk memanggil inisialisasi ComboBox melalui $ .fn.combobox.call ($ ComboBox, $ comboBox.data ());. Dua parameter dalam metode panggilan sesuai dengan:
1) Objek jQuery yang saat ini diinisialisasi
2) Daftar Parameter. Di sini, atribut data-* yang diperoleh melalui $ comboBox.data () adalah semua atribut HTML Data-*. Lulus semua atribut data-* sebagai parameter ke dalam metode inisialisasi ComboBox.
2. Inisialisasi dalam HTML melalui data-*
<Pilih id = "search_" name = "search_province" data-url = "/home/getProvince" data-param = '{"type": "0"}'-field-field = "name" value-value-field = "id"> </pilih>Tentukan atribut data-*. Dari hal di atas kita tahu bahwa inisialisasi di sini adalah untuk menginisialisasi komponen melalui pemilih gaya. BBOBOX, jadi diperlukan bahwa jika Anda ingin menggunakan data-* untuk menginisialisasi komponen, Anda harus mengatur gaya class = "ComboBox" sehingga latar belakang dapat memperoleh tag yang perlu diinisialisasi.
3. Metode Backend C#
HomeController kelas publik: pengontrol {daftar publik <string> lstprovince = Daftar baru <string> () {"Beijing", "Tianjin", "Chongqing", "Shanghai", "Hebei", "Shanxi", "Liaoning", "Jilin", "Heilongjiang", "Lia," Jilin "," Heilongjiang " "Anhui", "Fujian", "Jiangxi", "Shandong", "Henan", "Hubei", "Hunan", "Guangdong", "Hainan", "Sichuan", "Guizhou," Yunnan "," Yanan "," Shaanxi "," GanSi, "GanNan," Tuannan, "Yanhan," Shaanxi, "GANSI," GANSI, "GANSI", "YANNAN," SHAININER "," GANSI, "YANNAN," YANNAN, "SHAIANA", "YANNAN", " Wilayah Otonomi Mongolia "," Wilayah Otonomi Guangxi Zhuang "," Wilayah Otonomi Tibet "," Wilayah Otonomi Ningxia Hui "," Wilayah Otonomi Xinxia Uygur "," Wilayah Administrasi Khusus Hong Kong "," Wilayah Administrasi Khusus Makau "}; Public JsonResult getProvince (tipe string) {var lstres = Daftar baru <province> (); untuk (var i = 0; i <10; i ++) {var omodel = provinsi baru (); omodel.id = i; omodel.name = lstprovince [i]; lstres.add (omodel); } return json (lstres, jsonrequestbehavior.allowget); }} provinsi kelas publik {public int id {get; mengatur; } Nama string publik {get; mengatur; }}Tidak ada yang bisa dikatakan tentang menguji kode.
4. Efek debugging
Mendapatkan efeknya
Ini pada dasarnya melengkapi inisialisasi komponen melalui data-*.
3. Ringkasan
Di atas secara singkat menunjukkan penggunaan metode data jQuery () yang dikombinasikan dengan atribut data HTML5. Ini pada dasarnya dapat memenuhi kebutuhan blogger: Anda tidak perlu menulis satu baris lagi kode JS untuk menginisialisasi tag secara langsung. Saat menggunakannya, cukup rujuk ke file jquery.js dan jQuery.extension.js. Tetapi kita tahu bahwa karena ini adalah fitur di HTML5, harus ada persyaratan tertentu untuk browser. Tentu saja, fungsi penggunaan ini relatif mendasar, tetapi cukup untuk inisialisasi beberapa komponen sederhana.
Jika ada pemahaman yang salah dalam artikel ini, silakan tunjukkan, dan blogger akan sangat berterima kasih.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.