คำนำ: เมื่อเร็ว ๆ นี้เมื่อฉันใช้ส่วนประกอบ bootstrap ฉันพบปัญหาการใช้งานง่าย การเริ่มต้นองค์ประกอบง่าย ๆ จำนวนมากต้องมีการเขียนโค้ดการเริ่มต้นจำนวนมากใน JS เช่นแท็ก Select Simple เนื่องจากจำเป็นต้องได้รับข้อมูลจากพื้นหลังเท่านั้นและกรอกลงในตัวเลือก แต่การรับข้อมูลจากพื้นหลังต้องใช้การเริ่มต้น JS ดังนั้นจึงทำให้รหัสที่ซ้ำกันจำนวนมากในรหัสการเริ่มต้น JS เมื่อเริ่มต้นหน้าซึ่งดูน่ารำคาญมาก ดังนั้นฉันจึงจำแอตทริบิวต์ข้อมูลในตาราง bootstrap มันจะเจ๋งมากถ้าฉันสามารถใช้ data-* เพื่อเริ่มต้นองค์ประกอบง่าย ๆ โดยตรงใน HTML ก่อนอื่นให้ดูที่เอกสารตาราง bootstrap:
คุณจะเห็นว่าคุณสมบัติและเหตุการณ์เกือบทั้งหมดในตาราง bootstrap สามารถใช้ใน data-*ซึ่งรู้สึกดีมาก จากนั้นบล็อกเกอร์จะเริ่มค้นคว้า ข้อมูล-*สิ่งนี้มาจากไหน?
1. การศึกษาเบื้องต้นเกี่ยวกับข้อมูล jQuery ()
หลังจากค้นหาออนไลน์ในที่สุดฉันก็พบแหล่งที่มาของข้อมูล-* มันกลับกลายเป็นว่ามาจาก jQuery และ HTML5 สิ่งดีๆสิ่งดีๆจริงๆ! มาดู jQuery api กันเถอะ
การใช้งานดั้งเดิมมีดังนี้:
ฟังก์ชั่นนั้นชัดเจนมากซึ่งคือการเพิ่มแอตทริบิวต์และข้อมูลบางอย่างให้กับองค์ประกอบหรือใช้ค่า
ลองมาดูการรวมกันของวิธีการข้อมูล () และแอตทริบิวต์ html5 data-*
ฮ่าฮ่าสิ่งนี้ดี ค่าที่กำหนดโดย html5 data-* สามารถรับได้โดยใช้วิธี jQuery's data () กฎที่นี่มีดังนี้:
1) แอตทริบิวต์ข้อมูลทั้งหมดจะต้องเริ่มต้นด้วย "data-"
2) แอตทริบิวต์ถูกคั่นด้วย "-",
3) เมื่อใช้แอตทริบิวต์ใน jQuery เพียงลบ "ข้อมูล" และ "-"
ด้วยสิ่งนี้เป็นพื้นฐานเรารู้วิธีกำหนดคุณสมบัติในแท็กแล้วใช้คุณสมบัติที่เกี่ยวข้องใน JS มาอธิบายด้านล่างร่วมกับตัวอย่างของการห่อหุ้มสุดท้ายของ Combobox
2. jQuery data () ใช้ data-* ส่วนประกอบการเริ่มต้น
โปรดจำไว้ว่าซีรี่ส์ JS Component ก่อนหน้านี้ - ห่อหุ้มส่วนประกอบ JS ของคุณเอง นอกจากนี้คุณยังสามารถห่อหุ้ม combobox ง่าย ๆ ในบทความนี้ซึ่งสามารถดึงข้อมูลจากแบ็กเอนด์ผ่าน URL ดังนั้นด้านล่างเราจะยังคงพยายามอย่างเต็มที่กับพื้นฐานของส่วนประกอบนี้และเพิ่มแอตทริบิวต์ Data-* โดยตรงไปยังแท็ก Select เพื่อเริ่มต้นส่วนประกอบกล่องแบบเลื่อนลง
1. รหัสการห่อหุ้มส่วนประกอบ JS
(ฟังก์ชั่น ($) {// 1. กำหนดวิธีการขยาย jQuery combobox $ .fn.comboBox = ฟังก์ชั่น (ตัวเลือก, param) {ถ้า (ตัวเลือก typeof == 'string') {return $ .fn.combobox.methods [ตัวเลือก] (ตัวเลือกนี้ $ .fn.combobox.defaults, ตัวเลือก || {}); ตัวเลือก (ตัวเลือกที่อยู่อาศัย); ตัวเลือก onbeforeload.call (เป้าหมาย, param); รายการ) {ตัวเลือก var = $ (ตัวเลือก> </pet> '); Options.onchange (target.val ()); $ .getJson (url, ฟังก์ชั่น (ข้อมูล) {jq.empty (); var oppect = $ ('<petion> </ตัวเลือก>'); option.attr ('ค่า', ''); ตัวเลือก. ข้อความ ('โปรดเลือก'); jq.append (ตัวเลือก); รายการ [jq.attr ('valuefield')); - // 6. รายการพารามิเตอร์เริ่มต้น $ .fn.combobox.defaults = {url: null, param: null, data: null, valuefield: 'value', textfield: 'text', placeholder: 'โปรดเลือก', onbeforeload: ฟังก์ชั่น (param) {}, onloadsuccess: function () // ย่อหน้านี้ถูกเพิ่มใหม่และวิธีการเริ่มต้น $ (เอกสาร) .ready (function () {$ ('. combobox') แต่ละ (ฟังก์ชั่น () {var $ combobox = $ (นี่); $ .fn.combobox.call ($ comboBox, $ comboBox.data () }) (jQuery);รหัสส่วนใหญ่ไม่แตกต่างจากรหัสสุดท้าย มามุ่งเน้นที่ย่อหน้าต่อไปนี้
// ย่อหน้านี้ถูกเพิ่มเข้ามาใหม่ หลังจากการเริ่มต้นหน้าเสร็จสิ้นวิธีการเริ่มต้น $ (เอกสาร) .ready (function () {$ ('. comboBox') แต่ละ (ฟังก์ชั่น () {var $ comboBox = $ (this); $ .fn.combobox.call ($ comboBox, $ combobox.data ();})เป็นที่ชัดเจนว่าหลังจากการเริ่มต้นหน้าเสร็จสิ้นส่วนประกอบจะเริ่มต้นผ่านตัวเลือกสไตล์ แต่ละใช้ถ้ามีรูปแบบ. combobox หลายรูปแบบให้ยกเลิกการเริ่มต้นแต่ละอัน การโทรวิธีการโทรเพื่อเรียกการเริ่มต้นของ combobox ผ่าน $ .fn.combobox.call ($ combobox, $ combobox.data ()); พารามิเตอร์สองตัวในวิธีการโทรสอดคล้องกับ:
1) วัตถุ jQuery ที่เริ่มต้นในปัจจุบัน
2) รายการพารามิเตอร์ ที่นี่แอตทริบิวต์ Data-* ที่ได้รับผ่าน $ combobox.data () เป็นแอตทริบิวต์ HTML Data-* ทั้งหมด ผ่านแอตทริบิวต์ Data-* ทั้งหมดเป็นพารามิเตอร์ลงในวิธีการเริ่มต้นของ Combobox
2. เริ่มต้นใน HTML ผ่าน data-*
<select id = "search_" name = "search_province" data-url = "/home/getProvince" data-param = '{"type": "0"}' data-text-field = "name" data-value-field = "id"> </select>ระบุแอตทริบิวต์ Data-* จากข้างต้นเรารู้ว่าการเริ่มต้นที่นี่คือการเริ่มต้นส่วนประกอบผ่าน Style Selector.combobox ดังนั้นจึงจำเป็นต้องมีหากคุณต้องการใช้ data-* เพื่อเริ่มต้นส่วนประกอบคุณต้องตั้งค่า class = "combobox" เพื่อให้พื้นหลังสามารถรับแท็กที่ต้องเริ่มต้น
3. วิธี Backend C#
Public Class Homecontroller: คอนโทรลเลอร์ {รายการสาธารณะ <String> lstProvince = รายการใหม่ <String> () {"Beijing", "Tianjin", "Chongqing", "Shanghai", "Hebei", "Shanxi", "Liaoning", "Jilin" "Anhui", "Fujian", "Jiangxi", "Shandong", "Henan", "Hubei", "Hunan", "Guangdong", "Hainan", "Sichuan", "Guizhou", "Gansu", " "เขตปกครองตนเองมองโกเลียภายใน", "Guangxi Zhuang ภูมิภาคอิสระ", "เขตปกครองตนเองของทิเบต", "Ningxia Hui Autonomous Region", "Xinxia Uygur Autonomous Region", "ภูมิภาคการบริหารพิเศษของฮ่องกง", "Macao พิเศษ สาธารณะ jsonResult getProvince (ประเภทสตริง) {var lstres = รายการใหม่ <จังหวัด> (); สำหรับ (var i = 0; i <10; i ++) {var omodel = New Province (); omodel.id = i; omodel.name = lstprovince [i]; lstres.add (omodel); } return json (lstres, jsonrequestbehavior.allowget); }} จังหวัดระดับสาธารณะ {Public Int ID {get; ชุด; } ชื่อสตริงสาธารณะ {get; ชุด; -ไม่มีอะไรจะพูดเกี่ยวกับการทดสอบรหัส
4. เอฟเฟกต์การดีบัก
รับเอฟเฟกต์
สิ่งนี้จะเสร็จสิ้นการเริ่มต้นของส่วนประกอบผ่าน data-*
3. สรุป
ข้างต้นแสดงให้เห็นถึงการใช้วิธี jQuery data () โดยย่อรวมกับแอตทริบิวต์ HTML5 Data-* โดยทั่วไปสามารถตอบสนองความต้องการของบล็อกเกอร์: คุณไม่จำเป็นต้องเขียนรหัส JS อีกหนึ่งบรรทัดเพื่อเริ่มต้นแท็กโดยตรง เมื่อใช้งานเพียงอ้างถึงไฟล์ jQuery.js และ jQuery.extension.js แต่เรารู้ว่าเนื่องจากเป็นคุณสมบัติใน HTML5 จึงต้องมีข้อกำหนดบางประการสำหรับเบราว์เซอร์ แน่นอนฟังก์ชั่นการใช้งานนี้ค่อนข้างพื้นฐาน แต่ก็เพียงพอแล้วสำหรับการเริ่มต้นของส่วนประกอบง่าย ๆ
หากมีความเข้าใจที่ไม่ถูกต้องในบทความโปรดชี้ให้เห็นและบล็อกเกอร์จะขอบคุณมาก
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น