Selanjutnya, di artikel sebelumnya, saya akan memperkenalkan kepada Anda seri pembelajaran Bootstrap, menggunakan komponen Bootstrap Typeafan untuk mencapai efek pull-down Baidu.
Bootstrap, dari Twitter, adalah kerangka kerja front-end paling populer saat ini. Bootstrap didasarkan pada HTML, CSS, dan JavaScript. Ini sederhana dan fleksibel, membuat pengembangan web lebih cepat.
Resmi: http://twitter.github.io/typeead.js/
Contoh: http://twitter.github.io/typeead.js/examples/ (artikel ini menunjukkan: proyek open source oleh twitter)
Kode Sumber Proyek: https://github.com/twitter/typeead.js (klik unduh zip untuk mengunduh typeead.js-master.zip)
Izinkan saya menunjukkan kepada Anda rendering terlebih dahulu:
1. Implementasi
Html
Tip: Contoh.CSS adalah file CSS dalam contoh
<tautan type = "text/css" href = "@url.content (" ~/scripts/typeahead/example.css ")" rel = "stylesheet"/> <script src = "@url.content (" ~/skrip/typeAhead/typeehead.js ")" Type = "TEXT/JAVAS/JAVAS/JAVAS/JAVAS/TYPEAED/TYPEAED/TYPEEHEAD.JS") src = "@url.content (" ~/scripts/typeahead/hogan-2.0.0.js ")" type = "text/javascript"> </script> <script src = "@url.content (" ~/skrip/typeahead/hogan-2.0.js ")" Tipe = "TEKP/JAV/JAV/JAV/JAV/JAVACAP/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAV/JAVET/ src = "@url.content (" ~/scripts/typeahead/underscore-min.js ")" type = "text/javaScript"> </script> <dv> <div style = "margin: 10px 50px"> <v> <label> </label> <v>@html.textbox ("input" input>@label "," input "new@label," new@label, " Form-control ", placeholder =" Harap masukkan nama "}) </div> </div> </div>@html.hidden (" getInputName ", url.action (" getInputName ")) <type skrip =" text/javascript "> $ ('. $ ("#getInputName"). Val () + '/? Query =%query', template: ['<p> {{vipname}} </p>', '<p> {{name}} </p>', '<p> {{deskripsi}} </p>']. Hogan}); </script> </div>Pengontrol
#region Get name prompt pull down /// <summary>/// Get name prompt pull down //// </summary>/// <returns></returns>public ActionResult GetInputName(string query){var list = new List<TypeaheadModel>();if (!string.IsNullOrWhiteSpace(query)){query = query.Trim();foreach (var item in GetData()){if (item.name.Contains(query)){list.Add(item);}}} return Json(list, JsonRequestBehavior.AllowGet);}#endregionpublic List<TypeaheadModel> GetData(){List<TypeaheadModel> list = new List<TypeaheadModel>();TypeaheadModel model = typeeadmodel baru (); for (int i = 0; i <5; i ++) {model = typeaheadmodel baru (); model.description = "d"; model.vipname = "v"; model.name = "a" + i.tostring (); model.value = "a" + i.tostring (); i.tostring (); model.value = "a" + i.tostring () () (); model); list.value = "a" + i.tostring (); 10;Model
kelas publik typeeadmodel {public string name {get; mengatur; } public string vipname {get; mengatur; } deskripsi string publik {get; mengatur; } /// <summary> /// nilai kotak teks yang dipilih /// </summary> nilai string publik {get; mengatur; }}Di atas adalah komponen typeahead bootstrap dari seri pembelajaran bootstrap yang diperkenalkan kepada Anda oleh editor untuk mencapai efek pull-down Baidu. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!