Затем, в предыдущей статье, я представлю вам серию обучения начальной загрузке, используя компонент TypeAhead Bootstrap для достижения эффекта раскрытия Baidu.
Bootstrap, из Twitter, является самой популярной фронтальной структурой в настоящее время. Bootstrap основан на HTML, CSS и JavaScript. Это просто и гибко, что делает веб -разработку быстрее.
Официально: http://twitter.github.io/typeaead.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/examples.css ")" rel = "stylesseep"/> <script src = "@url.content (" ~/scripts/typeahead/typeahead.js ")" type = " src = "@url.content (" ~/scripts/typeahead/hogan-2.0.0.js ")" type = "text/javascript"> </script> <script src = "@url.content (" ~/scripts/typeahead/hogan-2.0.0.js ")" type = "javascript"/javascript> </javascript> </javascript> </javascript </javascript> </javascript> </javascript </javascript/javascript </javascript/javascript/jav src = "@url.content (" ~/scripts/typeahead/underscore-min.js ")" type = "text/javascript"> </script> <div> <div style = "margin: 10px 50px"> <div> <babel> name </label> <div>@html.text. Form-Control ", Placeholder =" Пожалуйста, введите имя "}) </div> </div> </div>@html.hidden (" getInputName ", url.action (" getInputName ")) <script type =" text/javascript "> $ ('. inputName'). $ ("#getInputName"). val () + '/? Query =%Query', шаблон: ['<p> {{vipname}} </p>', '<p> {{name}} </p>', '<p> {{описание}} </p>']. Hogan}); </script> </div>Контроллер
#region Получите имени GetData ()) {if (item.name.contains (Query)) {list.add (item);}}} return json (list, jsonrequestbehavior.allowget);}#endregionpublic list <peemaeadmodel> getData () {typeAheadEmeled <) tipeAledemeledemeledemelememelemelemelemelemelemelemelemelemelemelemelemelemelemelemelemelemelemelemelemele. new TypeaHeadModel (); for (int i = 0; i <5; i ++) {model = new typeaheadmodel (); model.description = "d"; model.vipname = "v"; model.name = "a" + i.toString (); model.value = "a" + tostring (); // list. i ++) {model = new typeaheadmodel (); model.description = ""; model.vipname = ""; model.name = "b" + i.tostring (); model.value = "b" + i.tostring (); list.add (model);} return List;}Модель
открытый класс typeaheadmodel {public String name {get; набор; } public String vipName {get; набор; } public String Описание {get; набор; } /// <summary> /// Значение выбранного текстового поля /// </summary> public String value {get; набор; }}Выше приведено компонент TypeAhead в Bootstrap серии Bootstrap Learning, представленную вам редактором для достижения эффекта раскрытия Baidu. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!