بعد ذلك ، في المقالة السابقة ، سأقدم لك سلسلة Bootstrap Learning ، باستخدام مكون 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.css. src = "@url.content (" ~/scripts/typeahead/hogan-2.0.0.0.js ")" type = "text/javaScript"> </script> <script src = "@url.content (" ~/scripts/typeahead/hogan-2.0.0.js ") src = "@url.content (" ~/scripts/typeahead/underscore-min.js ")" type = "text/javaScript"> </script> <viv> <div style = "margin: 10px 50px"> <viv> <billy> name </div>@html.texbox ( control-control "، placeholder =" الرجاء إدخال اسم "}) </div> </viv> </viv>@html.hidden (" getInputName "، url.action (" getInputName ")) <script type =" text/javaScript "> $ ('. inputName'). $ ("#getInputName"). val () + '/؟ query = ٪ query' ، template: ['<p> {{vipname}} </p>' ، '<p> {{name}} </p>' ، '<p> {{description}} </p>'] Hogan}) ؛ </script> </viv>وحدة تحكم
#Region الحصول على اسم موجه سحب لأسفل /// <summary> /// الحصول على مطالبة الاسم المنسدلة لأسفل /// </summary> /// getData ())) {if (item.name.contains (Query)) {list.add (item) ؛}}} return json (list ، jsonrequestbehavior.allowget) ؛ 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" + i ++) {model = new typeAheadModel () ؛ model.description = "" ؛ model.vipName = "" ؛ model.name = "b" + i.toString () ؛ model.value = "b" + i.toString () ؛ arsdنموذج
الفئة العامة typeAheadModel {public string name {get ؛ تعيين؛ } السلسلة العامة vipname {get ؛ تعيين؛ } وصف السلسلة العامة {get ؛ تعيين؛ } /// <summary> /// قيمة مربع النص المحدد /// </summary> قيمة السلسلة العامة {get ؛ تعيين؛ }}ما سبق هو مكون typeahead bootstrap من سلسلة التعلم bootstrap التي قدمها لك المحرر لتحقيق تأثير الانخفاض في Baidu. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!