ต่อไปในบทความก่อนหน้านี้ฉันจะแนะนำซีรี่ส์การเรียนรู้ bootstrap โดยใช้องค์ประกอบ bootstrap typeahead เพื่อให้ได้เอฟเฟกต์การดึงลงของ Baidu
Bootstrap จาก Twitter เป็นเฟรมเวิร์กส่วนหน้ายอดนิยมมากที่สุดในปัจจุบัน Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript มันง่ายและยืดหยุ่นทำให้การพัฒนาเว็บเร็วขึ้น
อย่างเป็นทางการ: http://twitter.github.io/typeahead.js/
ตัวอย่าง: http://twitter.github.io/typeahead.js/examples/ (บทความนี้แสดง: โครงการโอเพ่นซอร์สโดย Twitter)
ซอร์สโค้ดโครงการ: https://github.com/twitter/typeahead.js (คลิกดาวน์โหลด zip เพื่อดาวน์โหลด typeahead.js-master.zip)
ให้ฉันแสดงการเรนเดอร์ก่อน:
1. การดำเนินการ
HTML
เคล็ดลับ: ตัวอย่าง css คือไฟล์ CSS ในอินสแตนซ์
<link type = "text/css" href = "@url.content (" ~/scripts/typeahead/amplay.css ")" rel = "stylesheet"/> <script src = "@url.content (" ~/scripts/typeahead/typeahead.js " src = "@url.content (" ~/scripts/typeahead/hogan-2.0.0.js ")" type = "text/javascript"> </script> <script src = "@url.content (" ~/scripts/typeahead/hogan-2.0. src = "@url.content (" ~/scripts/typeahead/underscore-min.js ")" type = "text/javascript"> </script> <div> <div style = "margin: 10px 50px"> <dable> <dable> ชื่อ form-control ", placeholder =" โปรดป้อนชื่อ "}) </div> </div> </div>@html.Hidden (" getInputName ", url.action (" getInputName ") <script type =" remitnput ") + '/? query =%query', เทมเพลต: ['<p> {{vipname}} </p>', '<p> {{{name}} </p>', '<p> {{คำอธิบาย}} </p>']ผู้ควบคุม
#REGION รับชื่อ PULT DOWN /// <summary> /// รับชื่อ PULT PULL DOWN //// </summary> /// <returs> </returns> ActionResult GetInputName (String Query) {var list = รายการใหม่ <typeAheadModel> () getData ()) {if (item.name.contains (Query)) {list.add (รายการ);}}} return json (list, jsonRequestBehavior.allowget);}#endregionpublic รายการ <typeaheadmodel> getData ใหม่ typeAheadModel (); สำหรับ (int i = 0; i <5; i ++) {model = new TypeAheadModel (); model.description = "d"; model.vipname = "v"; model.name = "A" + i.toString (); i ++) {model = new TypeAheadModel (); model.description = ""; model.vipname = ""; model.name = "b" + i.toString (); model.value = "b" + i.tostring (); list.add (model);แบบอย่าง
คลาสสาธารณะ TypeAheadModel {ชื่อสตริงสาธารณะ {get; ชุด; } สตริงสาธารณะ vipname {get; ชุด; } คำอธิบายสตริงสาธารณะ {get; ชุด; } /// <summary> /// ค่าของกล่องข้อความที่เลือก /// </summary> ค่าสตริงสาธารณะ {get; ชุด; -ด้านบนเป็นส่วนประกอบ bootstrap typeahead ของซีรี่ส์การเรียนรู้ bootstrap ที่แนะนำให้คุณรู้จักโดยตัวแก้ไขเพื่อให้ได้เอฟเฟกต์การดึงลงของ Baidu ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!