คำนำ: บทความสองบทความก่อนหน้านี้ห่อหุ้มส่วนประกอบแบบฟอร์มพื้นฐานบางส่วนและบทความนี้ยังคงห่อหุ้มส่วนประกอบอื่น ๆ อีกมากมายตาม bootstrap แตกต่างจากบทความก่อนหน้านี้มีหลายองค์ประกอบในบทความนี้ที่ต้องการการสนับสนุนสำหรับไฟล์ JS บางไฟล์
แคตตาล็อกบทความ Bootstraphelper Series
C# Advanced Series - ห่อหุ้มส่วนประกอบ htmlhelper ของตัวเองทีละขั้นตอน: bootstraphelper
C# Advanced Series - ห่อหุ้มส่วนประกอบ HTMLHELPER ของตัวเองทีละขั้นตอน: BootStraPhelper (II)
C# Advanced Series - ห่อหุ้มส่วนประกอบ HTMLHELPER ของตัวเองทีละขั้นตอน: BootStraPhelper (3: ด้วยซอร์สโค้ด)
1. NumberBoxExtensions
NumberBoxExtensions เป็นกล่องข้อความดิจิตอลตามสไตล์ bootstrap มันถูกห่อหุ้มด้วยสปินเนอร์ซึ่งเป็นส่วนประกอบดิจิตอลตัวเองที่แนะนำโดยบล็อกเกอร์ ผู้ที่ไม่เข้าใจองค์ประกอบของสปินเนอร์สามารถตรวจสอบส่วนประกอบที่สองที่แนะนำใน http://www.vevb.com/article/88490.htm
จากการแนะนำก่อนหน้านี้เรารู้ว่าการเริ่มต้นของสปินเนอร์ส่วนประกอบที่เพิ่มขึ้นของตัวเองไม่จำเป็นต้องเขียนรหัส JS ใด ๆ สามารถเริ่มต้นได้โดยตรงโดยการกำหนดค่าแอตทริบิวต์ข้อมูลใน HTML สิ่งนี้นำมาซึ่งความสะดวกสบายอย่างมากในการห่อหุ้มของเรา เราจำเป็นต้องผ่านพารามิเตอร์การเริ่มต้นที่ใช้กันทั่วไปเป็นพารามิเตอร์ของวิธีการขยายจากนั้นเปลี่ยนเป็นแอตทริบิวต์ข้อมูลที่เกี่ยวข้องในพื้นหลังและกลับไปที่ปลายด้านหน้า
หากไม่มีความกังวลใจเพิ่มเติมให้ใส่ซอร์สโค้ดที่ห่อหุ้มก่อน
การใช้ระบบ; การใช้ System.collections.generic; การใช้ System.linq; การใช้ System.web; การใช้ System.web.mvc; namespace bootstrapextensions {public class numberBoxExtensions {/// <summary> /// สร้างกล่องข้อความจำนวนมาก /// name = "id"> id </param> /// <returs> ส่งคืนกล่องข้อความหมายเลข </returns> mVChtmlString numberTextbox สาธารณะ (BootStraPhelper HTML, id id) {return numberTextbox (html, id, null, null, null, null, null); } /// <summary> /// สร้างกล่องข้อความตัวเลข /// </summary> /// <param name = "html"> ตัวอย่างวิธีการขยาย </param> /// <param name = "id"> id </param> /// <param = "value" BootStraPhelper HTML, String ID, ค่าวัตถุ) {return numberTextBox (HTML, ID, ค่า, null, null, null); } /// <summary> /// สร้างกล่องข้อความตัวเลข /// </summary> /// <param name = "html"> อินสแตนซ์วิธีการขยาย </param> /// <param name = "value"> ค่าของกล่องข้อความ </param> /// param = "maxim =//////////////////////// <returns> ส่งคืนกล่องข้อความตัวเลข </returns> MVCHTMLSTRING NumberTextBox สาธารณะ (HTML bootStraPhelper, ค่าวัตถุ, int? min, int? max) {return numberTextbox (html, null, ค่า, นาที, สูงสุด, null, null); } /// <summary> /// สร้างกล่องข้อความตัวเลข /// </summary> /// <param name = "html"> อินสแตนซ์วิธีการขยาย </param> /// <param = "id"> id </param> // <param = "value"> value " การเจริญเติบโตด้วยตนเอง </param> /// <returs> ส่งคืนกล่องข้อความหมายเลข </returns> สาธารณะ mvchtmlstring numberTextbox (bootstraphelper html, ID สตริง, ค่าวัตถุ, int? min, int? max) {return numberTextbox } /// <summary> /// สร้างกล่องข้อความตัวเลข /// </summary> /// <param name = "html"> อินสแตนซ์วิธีการขยาย </param> /// <param name = "id"> id </param> /// <param = "value" name = "max"> การเจริญเติบโตของตนเองสูงสุด </param> /// <param name = "step"> ตัวเลขการเจริญเติบโตด้วยตนเอง </param> /// <returs> ส่งคืนกล่องข้อความตัวเลข </returns> mvchtmlstring numberTextbox (bootstraphelper html สูงสุด, ขั้นตอน, null); } /// <summary> /// สร้างกล่องข้อความหมายเลข /// </summary> /// <param name = "html"> ตัวอย่างวิธีการขยายตัวอย่าง </param> /// <param name = "id"> id </param> /// <param name = "value"> ค่าของกล่องข้อความ </param> // name = "max"> ค่าสูงสุดของการเติบโตของตนเอง </param> /// <param name = "step"> จำนวนการเจริญเติบโตของตนเอง </param> /// <param name = "ขั้นตอน"> จำนวนการเจริญเติบโตของตนเอง </param> /// <param name = "กฎ" BootStraPhelper HTML, String ID, ค่าวัตถุ, int? tag.mergeattribute ("คลาส", "อินพุต-กลุ่มสปินเนอร์"); tag.mergeattribute ("data-trigger", "spinner"); System.Text.StringBuilder SB = ใหม่ System.Text.StringBuilder (); //sb.append("< <input type = 'text' class = 'form-control text-center' value = '1' data-min = '-10' data-max = '10 'data-step =' 2 'data-rule =' ปริมาณ '> "); sb.append ("<อินพุต type = 'text' class = 'center-center รูปแบบการควบคุม'"); if (! string.isnullorEmpty (id)) {sb.append ("id = '"). ผนวก (id) .append ("'"); } if (value! = null) {sb.append ("value = '"). ผนวก (value.toString ()). ผนวก ("'"); } else {sb.append ("value = '1'"); } if (min! = null) {sb.append ("data-min = '"). ผนวก (min) .append ("'"); } if (สูงสุด! = null) {sb.append ("data-max = '"). ผนวก (สูงสุด) .append ("'"); } if (step! = null) {sb.append ("data-step = '"). ผนวก (ขั้นตอน) .append ("'"); } if (กฎ! = null) {sb.append ("data-rule = '"). ผนวก (Rule.toString ()). ผนวก ("'"); } else {sb.append ("data-rule = 'ปริมาณ'"); } sb.append ("/>"); sb.append ("<span class = 'อินพุต-กลุ่ม addon'>"); sb.append ("<a href = 'javascript ;;' class = 'spin-up' data-spin = 'up'> <i class = 'fa fa-caret-up'> </i> </a>"); sb.append ("<a href = 'JavaScript:;' class = 'spin-down' data-spin = 'down'> <i class = 'fa fa-caret-down'> </i> </a>"); sb.append ("</span>"); tag.innerhtml = sb.toString (); ส่งคืน mvchtmlstring.create (tag.toString ()); }} public enum spinningRule {ค่าเริ่มต้น, สกุลเงิน, ปริมาณ, เปอร์เซ็นต์, เดือน, วัน, ชั่วโมง, นาที, วินาที,}}นอกเหนือจาก ID และค่าพารามิเตอร์ที่จำเป็นสำหรับการเริ่มต้นของส่วนประกอบส่วนใหญ่จะเป็นขั้นต่ำ, สูงสุด, ขั้นตอน, กฎ, ฯลฯ ซึ่งสอดคล้องกับ data-min, data-max, ข้อมูลขั้นตอนข้อมูล, ข้อมูลและพารามิเตอร์อื่น ๆ
การใช้งานค่อนข้างง่าย ก่อนอื่นอ้างถึงไฟล์ JS และ CSS ที่เกี่ยวข้องในหน้าสอดคล้องกันแล้วเรียกมันว่าแบบนี้ใน CSHTML:
คัดลอกรหัสดังนี้: @bootstrap.numberTextbox (null, "1", 1, 10, 2, null)
รับผลลัพธ์:
สิ่งนี้สะดวกกว่าการคัดลอกรหัส HTML ชิ้นใหญ่ทุกครั้ง คุณรู้สึกเคลื่อนไหวเล็กน้อยหรือไม่?
2. DateTimeBoxExtensions
ด้วยส่วนประกอบดิจิตอลข้างต้นเป็นพื้นฐานขั้นตอนต่อไปคือการห่อหุ้มส่วนประกอบเวลา บล็อกเกอร์ยังวางแผนที่จะใช้แอตทริบิวต์ข้อมูลเพื่อเริ่มต้น แต่หลังจากค้นหาเป็นเวลานานไม่มีวิธีที่จะเริ่มต้นแอตทริบิวต์ข้อมูลใน DataTimePicker ไม่มีทางดังนั้นบล็อกเกอร์จะเริ่มต้นแอตทริบิวต์ข้อมูลด้วยตัวเองเท่านั้น
1. แผนเริ่มต้น
มาสร้างไฟล์ใหม่: bootstrap-datimepicker-helper.js รหัสภายในมีดังนี้
$ (function () {var datetimedefault = {locale: 'zh-cn', // วัฒนธรรมจีน}; $ .each ($ (". วันที่"), ฟังก์ชั่น (ดัชนี, รายการ) {var data = $ (รายการ) .data (); var param = $. -จากนั้นเขียนรหัส HTML เช่นนี้
<div class = 'วันที่อินพุต-กลุ่ม' ฟอร์แมต = "yyyy-mm-dd" data-maxdate = "2017-01-10" data-mindate = "2010-01-10"> <อินพุต type = 'text'/> <span> <span> </span>
ดูเหมือนว่าไม่มีปัญหาและในตอนแรกบล็อกเกอร์คิดว่าไม่มีปัญหา แต่สิ่งต่าง ๆ ขัดกับความปรารถนาของฉัน! มีสิ่งหนึ่งที่บล็อกเกอร์ไม่ได้พิจารณานั่นคือชื่อแอตทริบิวต์ที่ได้จากวิธีการข้อมูล () ใน jQuery จะถูกแปลงเป็นตัวพิมพ์เล็ก กล่าวคือ data-maxdate ที่เขียนใน HTML แต่ผลลัพธ์ที่ได้จากวิธี Data () จะกลายเป็น maxdate ดังแสดงในรูปด้านล่าง:
จากนั้นเมื่อมีการเริ่มต้น dateTimePicker จะมีการรายงานข้อยกเว้น JS วิธีนี้ใช้งานไม่ได้
2. แผนการปรับปรุง
เนื่องจากวิธีการข้างต้นไม่ทำงานเราจึงต้องปรับปรุง มีพารามิเตอร์ใดในวิธีการข้อมูล () ที่สามารถป้องกันไม่ให้เป็นตัวพิมพ์เล็กหรือไม่? หลังจากค้นหารอบ ๆ ฉันไม่พบคำตอบใด ๆ ในท้ายที่สุดไม่มีทางบล็อกเกอร์วางแผนที่จะเปลี่ยนมันด้วยตัวเองดังนั้นรหัส JS จึงกลายเป็นเช่นนี้:
$ (function () {var datetimedefault = {รูปแบบ: 'yyyy-mm-dd', // การจัดรูปแบบวันที่, เฉพาะตำแหน่งวันที่: 'zh-cn', // วัฒนธรรมจีน maxdate: '2017-01-01', // วันที่: '2010-01-01 FALSE,}; $ .Extend ({}, DateTimedEfault, ข้อมูล || {});หลักการคือการเปรียบเทียบผลลัพธ์ที่ได้จากวิธี Data () กับชื่อแอตทริบิวต์ของ DateTimedefault หลังจากการแปลงตัวพิมพ์เล็ก หากสิ่งเดียวกันเป็นจริงแอตทริบิวต์ข้อมูลใน HTML จะถูกเขียนทับ หลังจากการดีบักหลายครั้งโดยทั่วไปฉันไม่พบปัญหา
การเขียนโค้ดเช่นนี้สามารถแก้ปัญหาข้างต้นของเราได้ แต่ตัวแปร DateTimedEfault ของเราจำเป็นต้องมีพารามิเตอร์เริ่มต้นที่เพียงพอเพื่อให้บรรลุวัตถุประสงค์ของความครอบคลุม แน่นอนว่ามีพารามิเตอร์เพียงไม่กี่ตัวเท่านั้นที่ได้รับการแก้ไขโดยทั่วไปในโครงการและมีเพียงแอตทริบิวต์เริ่มต้นบางอย่างที่เราต้องเปลี่ยนมักจะมีการเปลี่ยนแปลงที่นี่
โอเคด้วยข้างต้นเป็นพื้นฐานทางทฤษฎี DataTimeBox ของเราจะถูกห่อหุ้มได้ง่าย เพียงอัปโหลดรหัส
การใช้ระบบ; การใช้ System.collections.generic; การใช้ System.linq; การใช้ System.web; การใช้ System.web.mvc; namespace bootstrapextensions {public class datetimeboxextensions {/// <summary> /// generate date control /// </summary> // ของแท็กกล่องข้อความ </param> /// <turns> ส่งคืนแท็ก html ที่แสดงผลการควบคุมวันที่ </returns> สาธารณะ mvchtmlstring datetimebox สาธารณะ (bootstraphelper html, สตริง id) {ส่งคืน datetimebox (html, id, null, null } /// <summary> /// สร้างการควบคุมวันที่ /// </summary> /// <param name = "html"> method method method </param> /// <param name = "id"> id ของแท็กกล่องข้อความ </param> /// <param = "value"> ค่าเริ่มต้นของแท็กแท็ก MVCHTMLSTRING DATETIMEBOX (BootStraPhelper HTML นี้, ID สตริง, ค่าวัตถุ) {ส่งคืน DateTimeBox (HTML, ID, ค่า, ค่า null, NULL, NULL, NULL); } /// <summary> /// สร้างการควบคุมวันที่ /// </summary> /// <param name = "html"> method method method </param> /// <param name = "id"> id ของแท็กกล่องข้อความ </param> /// <param = "value value"> ค่าเริ่มต้นของแท็ก <param name = "maxdate"> ค่าต่ำสุดของวันที่ </param> /// <param name = "Mindate"> ค่าสูงสุดของวันที่ </param> /// <returs> ส่งคืนแท็ก HTML ที่แสดงการควบคุมวันที่ DateTimeBox (HTML, ID, ค่า, รูปแบบ, maxdate, Mindate, Null, Null); } /// <summary> /// สร้างการควบคุมวันที่ /// </summary> /// <param name = "html"> ตัวอย่างวิธีการขยายตัวอย่าง </param> /// <param name = "id"> id ของป้ายกำกับกล่องข้อความ </param> /// <param = "value"> ค่าเริ่มต้น name = "maxdate"> ค่าต่ำสุดของวันที่ </param> /// <param name = "Mindate"> ค่าสูงสุดของวันที่ </param> /// <param name = "viewMode"> โหมดเรียกดูวันที่ควบคุม </param> /// <param name = "showclear" MVCHTMLSTRING DATETIMEBOX (BOOTSTRAPHELPER HTML, ID สตริง, ค่าวัตถุ, รูปแบบสตริง, สตริง maxDate, String Mindate, String ViewMode, bool? showClear) {tagbuilder tag = tagbuilder ใหม่ ("div"); tag.mergeattribute ("คลาส", "วันที่เข้าร่วมกลุ่ม"); if (! string.isnullorEmpty (รูปแบบ)) {tag.mergeattribute ("รูปแบบข้อมูล", รูปแบบ); } if (! string.isnullorempty (maxdate)) {tag.mergeattribute ("data-maxdate", maxdate); } if (! string.isnullorEmpty (Mindate)) {tag.mergeattribute ("data-mindate", Mindate); } if (! string.isnullorEmpty (ViewMode)) {tag.merGeattribute ("data-viewMode", ViewMode); } if (showclear! = null) {tag.mergeattribute ("data-showclear", showclear.toString ()); } System.Text.StringBuilder SB = ใหม่ System.Text.StringBuilder (); sb.append ("<อินพุต type = 'text' class = 'form-control'"); if (! string.isnullorEmpty (id)) {sb.append ("id = '"). ผนวก (id) .append ("'"); } if (value! = null) {sb.append ("value = '"). ผนวก (value.toString ()). ผนวก ("'"); } sb.append ("/>"). ผนวก ("<span class = 'อินพุต-กลุ่ม addon'>") .append ("<span class = 'glyphicon glyphicon-calendar'> </span>") .append ("</span>"); tag.innerhtml = sb.toString (); ส่งคืน mvchtmlstring.create (tag.toString ()); -จากนั้นหน้า CSHTML ของเราจะต้องอ้างอิง JS และ CSS ของเราเท่านั้น
<link href = "~/content/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" rel = "stylesheet"/> <script src = "~/content/bootstrap-datetimepicker/js/moment-with-locales.js" src = "~/content/bootstrap-datetimepicker/js/bootstrap-datetimepicker-helper.js"> </script>
จากนั้นใช้โดยตรง
<div> @bootstrap.datetimebox ("starttime", null, null, null, null, null) </div> <div> @bootstrap.datetimebox ("endtime", null, null, null, null, null)รับผลลัพธ์
3. textareextensions
การห่อหุ้มฟิลด์ข้อความข้อความนั้นค่อนข้างง่ายเนื่องจากโครงสร้างของมันคล้ายกับของกล่องข้อความ มาให้ซอร์สโค้ด encapsulation โดยตรง
การใช้ระบบ; การใช้ System.collections.generic; การใช้ System.linq; การใช้ System.web; การใช้ System.web.mvc; namespace bootstrapextensions {คลาสคงที่ระดับสาธารณะ textareextensions {/// <summary> /// /// // name = "id"> id </param> /// <returns> html tag </returns> public Static mvchtmlstring textareAbox (bootstraphelper html, id id) {ส่งคืน textareAbox (html, id, null, null, null); } /// <summary> /// ฟิลด์ข้อความ textarea /// </summary> /// <param name = "html"> อินสแตนซ์วิธีการขยาย </param> /// <param name = "id"> id </param> /// <param = "value"> value </param> /// MVCHTMLSTRING TEXTAREABOX (bootStraPhelper HTML นี้, ID สตริง, ค่าวัตถุ, สตริง cssclass) {ส่งคืน textareAbox (html, id, ค่า, cssclass, null, null); } /// <summary> /// ฟิลด์ข้อความ textarea /// </summary> /// <param name = "html"> อินสแตนซ์วิธีการขยาย </param> /// <param name = "id"> id </param> /// <param = "value"> value </param> /// ROWS </param> /// <turns> HTML TAG </returns> MVCHTMLSTRING TEXTAREABOX (BOOTSTRAPHELPER HTML นี้, ID สตริง, ค่าวัตถุ, สตริง CSSCLASS, int? } /// <summary> /// ฟิลด์ข้อความ textarea /// </summary> /// <param name = "html"> อินสแตนซ์วิธีการขยาย </param> /// <param name = "id"> id </param> /// <param = "value"> value </param> /// แถว </param> /// <param name = "cols"> จำนวนคอลัมน์ </param> /// <turns> html แท็ก </returns> สาธารณะ mvchtmlstring textareAbox สาธารณะ (bootstraphelper html, tagb "แท็ก tagb) tag.addcssclass ("form-control"); if (! string.isnullorEmpty (id)) {tag.mergeattribute ("id", id); } if (value! = null) {tag.mergeattribute ("value", value.toString ()); } if (! string.isnullorEmpty (cssclass)) {tag.addcssclass (cssclass); } if (rows! = null) {tag.mergeattribute ("rows", rows.toString ()); } if (cols! = null) {tag.mergeattribute ("cols", cols.toString ()); } ส่งคืน mvchtmlstring.create (tag.toString ()); -รองรับพารามิเตอร์ที่ง่ายที่สุดเพียงไม่กี่แถวและ COLS เท่านั้น หากโครงการของคุณมีความต้องการพิเศษบางอย่างเช่นการเริ่มต้นเป็นกล่องแก้ไขข้อความที่หลากหลายคุณสามารถปรับปรุงด้วยตัวเองได้
วิธีใช้
<div> @bootstrap.textareAbox ("id", "", "", 3, 5) </div>มีคำถามที่ต้องพูดถึงที่นี่นั่นคือเราเขียนมันโดยตรง แต่ผลลัพธ์คือ:
ดูเหมือนว่าแอตทริบิวต์ Cols ของเราไม่ทำงาน ปรากฎว่าตราบใดที่แท็กของคุณถูกเพิ่มเข้ากับสไตล์ class = 'form-control' มันจะเติมเต็ม div ทั้งหมดและวิธีการแก้ปัญหาก็ง่ายมาก ตัวอย่างเช่นเราสามารถทำการประมวลผลบางอย่างบน div:
คัดลอกรหัสดังต่อไปนี้: <div> @bootstrap.textareAbox ("", "", "", 3, 5) </div>
เนื่องจากแอตทริบิวต์ Cols ไม่ทำงาน Cols ในพารามิเตอร์จึงสามารถพิจารณาได้ว่าจะถูกลบออก
4. SelectExtensions
ถึงเวลาที่กล่องแบบเลื่อนลงที่ Tangled Select อีกครั้ง ทำไมคุณถึงบอกว่ามันพันกัน? เนื่องจากมีปัญหามากมายที่ต้องพิจารณาเมื่อห่อหุ้มมันเช่น:
วิธีจัดการค่าตัวเลือกแบบคงที่? จะส่งผ่านไปยังพื้นหลังได้อย่างไร? มันถูกห่อหุ้มตัวเลือกดั้งเดิมหรือห่อหุ้มไว้ในวิธีการเลือกและเหตุการณ์ตามส่วนประกอบบางอย่าง (เช่น Select2) หรือไม่?
ต่อมาฉันคิดถึงมันจุดประสงค์ของการห่อหุ้มคืออะไร? มันไม่สะดวกกว่าที่จะใช้หรือไม่? ถ้ามันถูกปิดผนึกยากเกินไปจะใช้งานได้ง่ายหรือไม่? โชคดีที่มันถูกห่อหุ้มโดยตรงในการเลือกที่ง่ายที่สุด บล็อกเกอร์ตั้งใจที่จะทำสิ่งนี้:
หากเป็นตัวเลือกแบบคงที่ให้เขียนแท็กเลือกดั้งเดิมโดยตรง หากเป็นตัวเลือกแบบไดนามิกให้ส่ง URL ที่เกี่ยวข้องไปยังพื้นหลังและสร้างตัวเลือกหลังจากได้รับข้อมูล รหัสห่อหุ้มมีดังนี้:
การใช้ระบบ; การใช้ System.collections.generic; การใช้ System.linq; การใช้ System.web; การใช้ System.web.mvc; namespace bootstrapextensions {คลาสคงที่ selectensions {/// <summary> ///ส่งกลับแท็ก /// ID </param> /// <กลับ> เลือกแท็ก </returns> mvchtmlstring สาธารณะ selectbox (bootstraphelper html, string id) {return selectbox (HTML, ID, NULL, NULL, NULL, NULL, NULL); } /// <summary> /// ส่งคืนเลือกแท็ก /// </summary> /// <param name = "html"> method method method </param> /// <param name = "id"> แท็ก ID </param> /// <param name = "value"> ค่าแท็กที่เลือก html, id id, ค่าวัตถุ) {return selectbox (html, id, ค่า, null, null, null, null); } /// <summary> /// ส่งคืนเลือกแท็ก /// </summary> /// <param name = "html"> method method method </param> /// <param name = "id"> แท็ก ID </param> /// <param name = "value"> ค่าแท็กที่เลือก MVCHTMLSTRING SELECTBOX (BootStraPhelper HTML นี้, ID สตริง, ค่าวัตถุ, สตริง cssclass) {return selectBox (html, id, value, cssclass, null, null, null); } /// <summary> /// ส่งคืนเลือกแท็ก /// </summary> /// <param name = "html"> อินสแตนซ์วิธีการขยาย </param> /// <param name = "id"> แท็ก ID </param> /// <param name = "value"> ค่าแท็กที่เลือก การร้องขอข้อมูล </param> /// <param name = "url"> url สำหรับการร้องขอข้อมูล </param> /// <param name = "textfield"> แสดงฟิลด์ </param> /// <param name = "valuefield"> ค่า strestring, selectbbox สตริง URL, String textField, String ValueField) {return selectBox (html, id, value, cssclass, url, null, textfield, valuefield); } /// <summary> /// ส่งคืนเลือกแท็ก /// </summary> /// <param name = "html"> อินสแตนซ์วิธีการขยาย </param> /// <param name = "id"> แท็ก ID </param> /// <param name = "value"> ค่าแท็กที่เลือก URL </param> /// <param name = "param"> พารามิเตอร์ที่ร้องขอ </param> /// <param name = "textfield"> แสดงฟิลด์ </param> /// <param name = "valuefield"> ฟิลด์ค่า </param> // <param = "valuefield" name = "multiple"> เป็นตัวเลือกหลายตัวเลือก </param> /// <return> เลือกแท็ก </returns> public Static mvchtmlstring selectbox (bootstraphelper html, id สตริง, ค่าวัตถุ, สตริง cssclass, url สตริง, สตริงพารามิเตอร์, สตริง textfield, สตริงค่า tag.addcssclass ("form-control"); if (! string.isnullorEmpty (id)) {tag.mergeattribute ("id", id); } if (value! = null) {tag.mergeattribute ("value", value.toString ()); } if (! string.isnullorEmpty (cssclass)) {tag.addcssclass (cssclass); } if (! string.isnullorempty (url)) {tag.mergeattribute ("data-url", url); } if (! string.isnullorEmpty (param)) {tag.mergeattribute ("data-param", param); } if (! string.isnullorEmpty (param)) {tag.mergeattribute ("data-param", param); } if (! string.isnullorEmpty (valuefield)) {tag.mergeattribute ("data-value-field", valuefield); } if (! string.isnullorEmpty (textfield)) {tag.mergeattribute ("ข้อมูล-ข้อความข้อมูล", textfield); } if (หลาย) {tag.mergeattribute ("หลาย", "หลาย"); } ส่งคืน mvchtmlstring.create (tag.toString ()); -จากนั้นส่วนหน้าใช้ JS เพื่อเริ่มต้นและจำเป็นต้องมีไฟล์ js utility.combobox.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 () {$ ('select') แต่ละ (ฟังก์ชั่น () {var $ combobox = $ (นี่); $ .fn.combobox.call ($ combobox, $ combobox.data ();ไฟล์ js นี้มาจากบทความก่อนหน้าโดยบล็อกเกอร์ //www.vevb.com/article/92595.htm
จากนั้นการโทรส่วนหน้า
<div> @bootstrap.selectbox ("sel", null, null, "/home/getdept", null, "name", "id") </div>5. สรุป
ณ จุดนี้รุ่นแรกของ Bootstraphelper ของเราเสร็จสมบูรณ์แล้วและส่วนประกอบแพ็คเกจหลักมีดังนี้:
แน่นอนว่าทุกคนชอบซอร์สโค้ดที่แบ่งปันมากที่สุด ที่อยู่ซอร์สโค้ด
หากคุณคิดว่าบทความนี้สามารถช่วยคุณได้โปรดแนะนำ
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น