ในบทความก่อนหน้านี้ฉันได้แนะนำส่วนประกอบที่มีประโยชน์หลายประการในซีรี่ส์ Bootstrap Component (แนะนำ) ถัดไปบทความนี้แนะนำส่วนประกอบที่มีประโยชน์หลายประการในซีรี่ส์ Bootstrap Component (แนะนำ 2) เพื่อนที่สนใจจะเรียนรู้ร่วมกัน!
7. รายการส่วนประกอบอินพุตหลายค่า
เกี่ยวกับอินพุตหลายค่าของกล่องข้อความมันเป็นข้อกำหนดทั่วไปเสมอ วันนี้บล็อกเกอร์แนะนำองค์ประกอบอินพุตหลายค่าที่มีประโยชน์สำหรับทุกคน อย่าขอบคุณฉันโปรดโทรหาฉันว่า "ผ้าพันคอสีแดง"!
1. ผลการแสดงผล
กล่องอินพุตหลายค่าในท้องถิ่น
กล่องอินพุตหลายค่าระยะไกล
2. คำอธิบายรหัสที่มา
ขอบคุณชุมชนโอเพ่นซอร์สและคนน่ารักที่ชอบแบ่งปัน ที่อยู่โอเพ่นซอร์ส
3. ตัวอย่างรหัส
(1) อินพุตหลายค่าในท้องถิ่น
ก่อนอื่นคุณต้องอ้างอิงไฟล์ต่อไปนี้
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/jQuery-manifest-master/src/jQuery.Manifest.css" rel = "Stylesheet"/> src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/jQuery-manifest-master/build/parts/jQuery.ui.widget.js"> </script>
ไม่จำเป็นต้องใช้ไฟล์ js และ css ของ bootstrap บทความนี้มีสไตล์ที่ดีดังนั้นจึงมีการอ้างอิง ส่วนประกอบของรายการไม่ได้พึ่งพา bootstrap แต่ขึ้นอยู่กับ jQuery นอกจากนี้ยังต้องอ้างถึงสามไฟล์: jQuery.Manifest.css, jQuery.ui.widget.js และ jQuery.marcopolo.js
จากนั้นจะมีการเริ่มต้นของ HTML และ JS
<อินพุต type = 'text' autocomplete = "ปิด" id = "txt_man"/> <script type = "text/javascript"> $ (function () {$ ('#txt_man'). manifest ();}); </script>ผ่านขั้นตอนง่าย ๆ ดังกล่าวข้างต้นเอฟเฟกต์ข้างต้นสามารถผลิตได้ มันไม่ง่ายมากเหรอ? มาดูประเพณีของมันกันเถอะ
// คุณสมบัติทั่วไป: รับคอลเลกชันของรายการทั้งหมดในกล่องข้อความค่า var ค่า = $ ('#txt_man'). manifest ('value'); // วิธีการทั่วไป 1: ลบรายการสุดท้าย $ ('#txt_man'). รายการ ('ลบ', ': สุดท้าย'); // วิธีการทั่วไป 2: เพิ่มรายการข้อความใหม่ รูปแบบของพารามิเตอร์ที่สองถูกกำหนดโดยรูปแบบของข้อมูล JSON $ ('#txt_man') Manies ('เพิ่ม', {id: "1", ชื่อ: "abc"}); // วิธีการทั่วไป 3: รับรายการข้อมูลการค้นหาระยะไกล ('#txt_man') (เหตุการณ์, ข้อมูล, $ item, initial) {// alert ("รายการที่เพิ่มใหม่คือ:"+data);}); // เหตุการณ์ทั่วไป 2: ลบเหตุการณ์รายการ $ ('#txt_man') บน ('manifeStremove', ฟังก์ชั่น (เหตุการณ์, ข้อมูล, $ รายการ) {}); -(2) อินพุตหลายค่าระยะไกล
วิธีการป้อนข้อมูลการค้นหาระยะไกลทำให้เราต้องระบุที่อยู่ URL รับข้อมูลจากนั้นกลับไปที่เบราว์เซอร์ เพื่อความเรียบง่ายบทความนี้ใช้ URL โดยตรงบนเว็บไซต์ซอร์สโค้ดเพื่อแสดงผล
ก่อนอื่นคุณต้องอ้างอิงไฟล์ JS
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/jQuery-manifest-master/src/jQuery.Manifest.css" rel = "Stylesheet"/> src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/jQuery-manifest-master/build/parts/jQuery.ui.widget.js"> </script> <script src = " src = "~/content/jQuery-manifest-master/build/jQuery.Manifest.js"> </script>
เมื่อเปรียบเทียบกับข้างต้นมีการอ้างอิงเพิ่มเติมถึงไฟล์ jQuery.marcopolo.js
จากนั้นจะมีการเริ่มต้นของ HTML และ JS
<form action = "https://api.foursquare.com/v2/venues/search?callback=?" method = "get"> <div> <div> <input type = 'text' id = "txt_man2"/> <img src = "~/content/jQuery-manifest-master/busy.gif"/> </div> </div> </form> $ item, $ mpitem) {return data.name;}, formatValue: function (data, $ value, $ item, $ mpitem) {return data.id;}, marcopolo: {data: {client_id: 'no2mtQvBQanw3Sg23ofvMeG 'LG2WRKKS1SXZ2FMKDG01LDW1KDTEKKTULMXM0XEVWRN0LLHB' เจตนา: 'ทั่วโลก', ขีด จำกัด : 5, V: '20150601'}, formatDATA: ฟังก์ชัน (ข้อมูล) 3, param: 'Query'}, จำเป็น: true});}); </script>สำหรับความสำคัญของแต่ละพารามิเตอร์ควรเข้าใจได้ง่ายหากคุณต้องการ บล็อกเกอร์ตรวจสอบค่าส่งคืนของวิธีการค้นหาระยะไกลนี้สั้น ๆ
หากเพื่อนในอุทยานตั้งใจที่จะใช้วิธีระยะไกลนี้ด้วยตัวเองคุณสามารถอ้างอิงรูปแบบข้อมูลนี้เพื่อนำไปใช้
8. ส่วนประกอบการค้นหากล่องข้อความ Bootstrap-typeahead
ในความเป็นจริงส่วนประกอบจำนวนมากมีฟังก์ชั่นนี้เกี่ยวกับฟังก์ชั่นของการค้นหากล่องข้อความ ตัวอย่างเช่นมีองค์ประกอบการเติมข้อความอัตโนมัติใน jQuery UI ที่บล็อกเกอร์ใช้เพื่อให้สำเร็จโดยอัตโนมัติ ส่วนประกอบการค้นหาอัตโนมัติของกล่องข้อความ bootstrap กำลังเกิดขึ้นออนไลน์ เหตุผลที่ฉันเลือกองค์ประกอบนี้ในวันนี้เป็นเพราะฉันคิดว่ามันคล้ายกับสไตล์ของ Bootstrap และส่วนประกอบนั้นเล็กกว่าง่ายและใช้งานได้จริง
1. ผลการแสดงผล
การค้นหาแบบคงที่ในท้องถิ่น (แหล่งข้อมูลคือท้องถิ่น)
การค้นหาระยะไกล (แหล่งข้อมูลถูกดึงไปจากระยะไกลผ่านคำขอ AJAX)
2. คำอธิบายรหัสที่มา
คำอธิบายซอร์สโค้ด
3. ตัวอย่างรหัส
ไฟล์แรกที่ต้องอ้างอิง: ส่วนใหญ่มี CSS และไฟล์ JS ต้องการการสนับสนุนจาก jQuery และ bootstrap
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/demo/css/css/prettify src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/twitter-bootstrap-typeahead-master
จากนั้นการเริ่มต้นส่วนประกอบ
<input type = 'text' id = "txt_man" />
แหล่งข้อมูลในพื้นที่
<script type = "text/javascript"> $ (function () {$ ("#txt_man"). typeahead ({source: [{key: 1, value: 'toronto'}, {key: 2, value: 'montreal'}, {key: 3, ค่า: }, {key: 6, ค่า: 'Columbus'}, {key: 7, value: 'dallas'}, {key: 8, value: 'Vancouver'}, {key: 9, value: 'seattle'}, {key: 10, value: 'Los Angeles'}แหล่งข้อมูลได้รับผ่านคำขอ AJAX
<script type = "text/javascript"> $ (function () {$ ("#txt_man"). typeahead ({ajax: {url: '/home2/typeaheaddata', หมดเวลา: 300, วิธี: 'โพสต์', ทริกเกอร์ "value", val: "key"});}); </script>วิธีทดสอบที่สอดคล้องกับพื้นหลัง
public jsonResult typeAheadData () {var lstres = รายการใหม่ <jobal> (); สำหรับ (var i = 0; i <20; i ++) lstres.add (ใหม่ {key = i, value = guid.newguid (). toString ()คุณสมบัติทั่วไป:
•แสดง: ชื่อฟิลด์ที่แสดง
• VAL: มูลค่าจริง
•รายการ: จำนวนผลการค้นหาที่แสดงตามค่าเริ่มต้น ค่าเริ่มต้นคือ 8
•แหล่งที่มา: แหล่งข้อมูลท้องถิ่นจัดรูปแบบเป็นอาร์เรย์
• AJAX: วัตถุที่ร้องขอโดย AJAX สามารถเป็น URL สตริงโดยตรงหรือวัตถุวัตถุ หากเป็นวัตถุวัตถุฉันจะไม่พูดถึง URL คุณสมบัติ TriggerLength ระบุว่าอินพุตของอักขระหลายตัวกระตุ้นการค้นหา
เหตุการณ์ที่ใช้กันทั่วไป:
•รายการที่เลือก: ทริกเกอร์เมื่อเลือกค่าการค้นหา
<script type = "text/javascript"> $ (function () {$ ("#txt_man"). typeahead ({ajax: {url: '/home2/typeaheaddata', หมดเวลา: 300, วิธี: 'โพสต์', triggerlength: 1, loadingclass: null "key", itemselected: function (item, val, text) {}});}); </script>รายการพารามิเตอร์แสดงถึงวัตถุที่เลือกพารามิเตอร์ Val แสดงถึงค่าที่แท้จริงของรายการที่เลือกและข้อความแสดงถึงค่าที่แสดงของรายการที่เลือก
9. องค์ประกอบขั้นตอน bootstrap
เกี่ยวกับองค์ประกอบขั้นตอน bootstrap บทความก่อนหน้านี้แนะนำวิดเจ็ต YSTEP มันสามารถมีบทบาทบางอย่างในการดูความคืบหน้าของงาน แต่สำหรับธุรกิจที่ซับซ้อนบางแห่งมันไม่มีอำนาจเล็กน้อยที่จะจัดการกับธุรกิจที่เกี่ยวข้องตามขั้นตอนปัจจุบัน วันนี้บล็อกเกอร์จะแนะนำองค์ประกอบขั้นตอนที่มีผลดีมาก ด้วยองค์ประกอบนี้โปรแกรมเมอร์ไม่ต้องกังวลเกี่ยวกับการออกแบบขั้นตอนที่ซับซ้อนอีกต่อไป
1. ผลการแสดงผล
มองเห็นสไตล์
ทำตามขั้นตอนถึง "ขั้นตอนก่อนหน้า" และ "ขั้นตอนต่อไป"
ขั้นตอนเพิ่มเติม
2. คำอธิบายรหัสที่มา
ส่วนประกอบนี้ถูกค้นพบโดยบล็อกเกอร์ออนไลน์ ฉันเห็นว่ารูปแบบและประเพณีมากมายมาจาก bootstrap สิ่งเดียวที่ฉันต้องอ้างถึงคือไฟล์ JS และ CSS ยังไม่พบแหล่งที่มาของซอร์สโค้ด หากใครรู้แหล่งที่มาของซอร์สโค้ดคุณสามารถบอกบล็อกเกอร์ นอกจากนี้เพื่อที่จะเคารพผลการทำงานของผู้เขียนบล็อกเกอร์จะต้องเคารพความคิดริเริ่ม!
3. ตัวอย่างรหัส
ไฟล์ที่ต้องอ้างอิง
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/bootstap-step/css/bs-is-fun.css" rel = "stylesheet"/> src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/bootstrap-step/js/brush.js"> </script>
ต้องมีการอ้างอิง bs-is-fun.css และ brush.js และส่วนประกอบต้องการการสนับสนุนของ jQuery และ bootstrap
จากนั้นมีการเริ่มต้นของส่วนประกอบ
(1) ลูกศร
<ul> <li> <a> ขั้นตอนที่ 1 </a> </li> <li> <a> step2 </a> </li> <li> <a> ขั้นตอนที่ 3 </a> </li></ul>
หากเป็นขั้นตอนคงที่คุณต้องใช้รหัส HTML ด้านบนเท่านั้นเพื่อดูผลกระทบของขั้นตอนลูกศรในภาพด้านบน สไตล์ที่ใช้งานอยู่ที่นี่แสดงถึงสไตล์ที่ขั้นตอนผ่านไปแล้ว
(2) สแควร์
<ul> <li> <a> ขั้นตอนที่ 1 </a> </li> <li> <a> step2 </a> </li> <li> <a> ขั้นตอนที่ 3 </a> </li></ul>
(3) รูปทรงกลม
<ul> <li> <a> ขั้นตอนที่ 1 </a> </li> <li> <a> step2 </a> </li> <li> <a> ขั้นตอนที่ 3 </a> </li></ul>
(4) แถบความคืบหน้า
<ul> <li> <a> step1 <pan> </span> </a> </li> <li> <a> step2 <pan> </span> </a> </li> <li> <a> step3 <span > </span> </a> </li> <li> <a> step4 <span> </span> </a> </li> <li> <a> step5 <span> </span> </a> </li></ul>
(5) ขั้นตอนก่อนหน้าขั้นตอนต่อไป
"ขั้นตอนก่อนหน้า" และ "ขั้นตอนต่อไป" ในภาพด้านบนถูกกำหนดโดยตัวคุณเองในส่วนประกอบ bootstrap modal หรือเป็นรหัสที่โพสต์สำหรับการอ้างอิงของคุณ
<div id = "mymodalnext"> <div> <div> <div> <button type = "ปุ่ม" data-dismiss = "modal" aria-label = "close"> <span aria-hidden = "true"> × </span> </plos> </h4> การกำหนดค่าตัวเลือก </h4> 2 <span> </span> </a> </li> <li> <a> ขั้นตอนที่ 3 <span> </span> </a> </li> <li> <a> ขั้นตอนที่ 4 <pan> </pan> </a> </li> </li> </li> </li> role = "listbox"> <div> <p> ขั้นตอนที่ 1 </p> <div> กำหนดค่าบทบาท </div> <div> <อินพุต type = "text"/> </div> </div> <div> <button type = "ปุ่ม"> บันทึก </button> </div> <div> <p> ขั้นตอนที่ 2 </p> type = "ปุ่ม"> บันทึก </button> </div> <div> <p> ขั้นตอนที่ 3 </p> </div> <div> <p> ขั้นตอนที่ 4 </p> </div> </div> <p> ขั้นตอนที่ 5 </p> </div> <p> <p> type = "ปุ่ม"> ถัดไป </button> </div> </div> </div>
แน่นอนคุณต้องลงทะเบียนกิจกรรมคลิกสองปุ่ม
$ ("#mymodalnext. modal-footer ปุ่ม") แต่ละ (ฟังก์ชั่น () {$ (นี่). click (function () {ถ้า ($ (นี้) .hasclass ("mn-next")) {$ ("#mymodalnext .carousel") li.active "). next (). addclass (" active ");} else {$ ("#mymodalnext .carousel ") carousel ('prev'); ถ้า ($ ("#mymodalnext .step li ") {$ ($ ($ ($ (" li.active "). ความยาว - 1]). RemoveClass (" active ")}}})})ตรรกะอาจไม่สมบูรณ์และจำเป็นต้องมีการทดสอบหากใช้อย่างเป็นทางการ
10. ปุ่มโหลดส่วนประกอบ ladda-bootstrap
เกี่ยวกับการโหลดปุ่มบล็อกเกอร์ต้องการหาส่วนประกอบที่เหมาะสมในการปรับให้เหมาะสม หากไม่ได้ดำเนินการจะมีความเป็นไปได้ที่จะดำเนินการซ้ำ ๆ มาดูเรื่องเล็ก ๆ น้อย ๆ ในวันนี้
1. ผลการแสดงผล
พบกันครั้งแรก
สีที่กำหนดเองขนาดบาร์ความคืบหน้า
2. คำอธิบายรหัสที่มา
ที่อยู่ซอร์สโค้ด
3. ตัวอย่างรหัส
ไฟล์ที่ต้องอ้างอิง
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/ladda-bootstrap-master/ladda-bootstrap-master src = "~/content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda.min.js"> </script>
การเริ่มต้นส่วนประกอบ: เริ่มต้นปุ่ม 4 ปุ่ม
<button data-style = "Expand-Left"> <span> Expand-Left </span> </button> <button data-style = "Expand-Right"> <span> Expand Right </span> </button> <ปุ่ม data-style = "Zoom-in"> <pan> zoom-in </span> {$ ('ปุ่ม') คลิก (ฟังก์ชั่น (e) {e.preventdefault (); var l = ladda.create (นี่); l.start (); l.setProgress (0 - 1); $. โพสต์ ("/home2/typeAheadData", {}, ฟังก์ชัน L.Stop ();}); return false;});});รหัสสงสัย: ไม่ควรเข้าใจยาก รหัสที่เกี่ยวข้องในการเริ่มต้นส่วนประกอบ var l = ladda.create (นี่); L.Start (); นี่แสดงถึงวัตถุของปุ่มที่คลิกในปัจจุบัน (โปรดทราบว่านี่เป็นวัตถุ DOM แทนวัตถุ jQuery) จากนั้นเรียก l.stop (); หลังจากคำขอเสร็จสมบูรณ์ให้ปิดการโหลด
(1) ตัวเลือกรูปแบบข้อมูลทั้งหมดมีดังนี้ หากคุณสนใจคุณสามารถลองและดูว่าเอฟเฟกต์คืออะไร:
data-style = "Expand-Left"
data-style = "Expand-Right"
data-style = "Expand-Up"
data-style = "Expand-Down"
data-style = "zoom-in"
data-style = "zoom-out"
data-style = "Slide-left"
data-style = "Slide-Right"
data-style = "slide-up"
data-style = "slide-down"
รูปแบบข้อมูล = "สัญญา"
(2) หากคุณต้องการปรับขนาดของปุ่มส่วนประกอบจะมีคุณสมบัติขนาดข้อมูลในตัว ตัวเลือกขนาดข้อมูลทั้งหมดมีดังนี้:
data-size = "xs"
data-size = "s"
data-size = "L"
(3) หากคุณต้องการตั้งค่าสีของปุ่มให้ใช้สีสปินเนอร์ข้อมูล
data-spinner-color = "#ff0000"
(4) การตั้งค่าแถบความคืบหน้าของปุ่ม
ladda.bind ('ปุ่ม', {callback: function (อินสแตนซ์) {var progress = 0; var interval = setInterval (ฟังก์ชัน () {progress = math.min (ความคืบหน้า + math.random () * 0.1, 1); instance.setProgress (ความคืบหน้า); if (progress === 1)ความคืบหน้าการดำเนินการในปัจจุบันส่วนใหญ่จะถูกกำหนดผ่านอินสแตนซ์ประโยค SetProgress (ความคืบหน้า);, และค่าความคืบหน้าอยู่ระหว่าง 0 ถึง 1 แน่นอนว่าข้างต้นเป็นเพียงรหัสเพื่อทดสอบผลกระทบความคืบหน้า ในโครงการอย่างเป็นทางการเราจำเป็นต้องคำนวณสถานการณ์การดำเนินการตามคำขอปัจจุบันเพื่อส่งคืนความคืบหน้าแบบไดนามิก
11. สลับส่วนประกอบ bootstrap-switch
ในโฮมเพจของเว็บไซต์ Bootstrap Chinese คุณสามารถค้นหาองค์ประกอบดังกล่าวได้
1. ผลการแสดงผล
ผลเบื้องต้น
คุณลักษณะและเหตุการณ์ต่างๆ
2. คำอธิบายรหัสที่มา
Bootstrap-switch ที่อยู่ซอร์สโค้ด: https://github.com/nostalgiaz/bootstrap-switch
เอกสารและการสาธิต bootstrap-switch: http://www.bootstrap-switch.org/examples.html
3. ตัวอย่างรหัส
ไฟล์ที่ต้องอ้างอิง
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-switch-master/bootstrap-switch-master/dist/css/bootstrap3 src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/bootstrap-switch-master/bootstrap-switch-master
ส่วนประกอบขึ้นอยู่กับ jQuery และ bootstrap
จากนั้นจะมีการเริ่มต้นของ HTML และ JS
<อินพุต type = "ช่องทำเครื่องหมาย" Checked /> $ (function () {$ ('input [type = boxbox]'). bootstrapswitch ({size: "ใหญ่"});})ไม่จำเป็นต้องใช้แอตทริบิวต์ขนาด หากคุณใช้สไตล์เริ่มต้นพารามิเตอร์ไม่สามารถผ่านได้
คุณสมบัติที่ใช้กันทั่วไป
•ขนาด: ขนาดสวิตช์ ค่าเสริมคือ 'mini', 'เล็ก', 'ปกติ', 'ใหญ่'
• Oncolor: สีของปุ่ม ON ในสวิตช์ ค่าเสริมรวมถึง 'หลัก', 'ข้อมูล', 'ความสำเร็จ', 'คำเตือน', 'อันตราย', 'เริ่มต้น'
• Offcolor: สีของสวิตช์ในสีของปุ่มปิด ค่าเสริม 'หลัก', 'ข้อมูล', 'ความสำเร็จ', 'คำเตือน', 'อันตราย', 'เริ่มต้น'
• ontext: ข้อความของปุ่ม ON ในสวิตช์ค่าเริ่มต้นคือ "เปิด"
• Offtext: ข้อความของสวิตช์คือ "ปิด" โดยค่าเริ่มต้น
• ONINIT: เหตุการณ์ที่เริ่มต้นองค์ประกอบ
• OnswitchChange: เหตุการณ์เมื่อสวิตช์เปลี่ยนแปลง
เหตุการณ์และวิธีการทั่วไปสามารถใช้ในการดูเอกสารโดยตรงและอย่างเป็นทางการให้คำอธิบายโดยละเอียดมาก
12. การให้คะแนนการให้คะแนน Bootstrap-star
ทุกคนควรรู้การให้คะแนนในการจัดอันดับในวันที่ 10 และ 10 Taobao ฉันบังเอิญพบองค์ประกอบการให้คะแนนแบบ bootstrap ฉันพบว่ามันน่าสนใจ มันอาจจะเป็นประโยชน์สำหรับระบบอีคอมเมิร์ซชุมชนและฟอรัมในอนาคตดังนั้นฉันจะแบ่งปัน
1. ผลการแสดงผล
2. คำอธิบายรหัสที่มา
ดาวน์โหลดซอร์สโค้ด
3. ตัวอย่างรหัส
ส่วนประกอบนี้ต้องการการสนับสนุนสไตล์ jQuery และ bootstrap
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/bootstar-star-star-master/bootstar-star-rating-master/css/star-rating.css src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/content/bootstrap-star-star-master/bootstrap-star-star-reating-master/js/star-rating.js"> </script> <script src = "~/content/bootstrap-star-rating-master/bootstrap-star-star-rating-master/js/loclees/zh.js"> </script>
โดยตรงผ่านส่วนประกอบเริ่มต้น HTML
<อินพุต id = "input-2b" type = "number" min = "0" max = "5" step = "0.5" data-size = "xl" data-symbol = "" data-default-caption = "{rating} หัวใจ" data-star-captions = "}" data-size = "xl"> <input id = "input-21b" value = "4" type = "number" min = 0 max = 5 step = 0.2 data-size = "lg"> <อินพุต id = "อินพุต -21c" value = "0" type = "number" min = 0 max = 8 step = 0.5 data-size = min = 0 max = 5 step = 0.5 data-size = "sm"> <อินพุต id = "อินพุต -21e" value = "0" type = "number" min = 0 max = 5 step = 0.5 data-size = "xs"> <อินพุต id = "อินพุต -21f" min = "0" max = "5" step = "0.5" data-stars = 5data-symbol = "" data-default-caption = "{การจัดอันดับ} หัวใจ" data-star-captions = "{}"> <อินพุต id = "อินพุต -22" data-glyphicon = 0>ส่วนประกอบจะเริ่มต้นผ่าน class = "การให้คะแนน" นี่คือพารามิเตอร์บางอย่างที่ควรเข้าใจง่าย:
•ค่า: แสดงคะแนนเริ่มต้นเมื่อเริ่มต้นการเริ่มต้น
•ขั้นต่ำ: คะแนนขั้นต่ำ
•สูงสุด: คะแนนสูงสุด
•ขั้นตอน: สเกลขั้นต่ำที่เพิ่มเข้ามาในแต่ละครั้ง
•ขนาดข้อมูล: ขนาดของดวงดาว
•ดาว Data: จำนวนดาว
คุณสามารถรับคะแนนปัจจุบันได้โดยใช้ $ ("#input-21a"). val ()
ข้างต้นเป็นองค์ประกอบที่มีประโยชน์ของซีรี่ส์ Bootstrap ที่ตัวแก้ไขแนะนำให้คุณ (คำแนะนำ 2) ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!