المقدمة: في الآونة الأخيرة ، عندما كنت أستخدم مكون bootstrap ، وجدت مشكلة في سهولة الاستخدام. تتطلب العديد من تهيئة المكونات البسيطة كتابة الكثير من رمز التهيئة في JS ، مثل علامة تحديد بسيطة. نظرًا لأنه يحتاج فقط إلى الحصول على بيانات من الخلفية وملءها في الخيار ، ولكن الحصول على البيانات من الخلفية يتطلب تهيئة JS ، لذلك يتسبب في الكثير من التعليمات البرمجية المكررة في رمز تهيئة JS عند تهيئة الصفحة ، والتي تبدو مزعجة للغاية. لذلك تذكرت سمة البيانات في جدول bootstrap. سيكون رائعًا إذا كان بإمكاني استخدام البيانات-لتهيئة المكونات البسيطة مباشرة في HTML. دعونا نلقي نظرة أولاً على وثائق جدول bootstrap:
يمكنك أن ترى أنه يمكن استخدام جميع الخصائص والأحداث الموجودة في جدول Bootstrap تقريبًا في البيانات-والتي تبدو جيدة. ثم سيبدأ المدون في البحث. البيانات-من أين يأتي هذا الشيء؟
1. دراسة أولية على بيانات jQuery ()
بعد البحث عبر الإنترنت ، وجدت أخيرًا مصدر البيانات-*. اتضح أنه من jQuery و HTML5. أشياء جيدة ، أشياء جيدة حقًا! دعونا نلقي نظرة على jQuery API
الاستخدام الأصلي كما يلي:
الوظيفة هي في الواقع واضحة للغاية ، والتي تتمثل في إضافة سمات وبيانات معينة إلى العنصر ، أو أخذ القيم.
دعنا نلقي نظرة على مزيج من طريقة البيانات () وسمة HTML5-*
هاها ، هذا الشيء جيد. يمكن الحصول على القيمة التي تم تعيينها بواسطة بيانات HTML5-* باستخدام طريقة بيانات jQuery (). القواعد هنا هي كما يلي:
1) يجب أن تبدأ جميع سمات البيانات بـ "البيانات-" ،
2) يتم فصل السمات بـ "-" ،
3) عند أخذ سمات في jQuery ، ما عليك سوى إزالة "البيانات" و "-".
مع هذا كأساس ، نحن نعرف كيفية تعيين خصائص في العلامة ثم تأخذ الخصائص المقابلة في JS. دعنا نشرح ذلك أدناه بالاشتراك مع مثال التغليف الأخير لـ Combobox.
2. jQuery Data () ينفذ مكون التهيئة*
تذكر سلسلة مكون JS السابقة - تغلف مكونات JS الخاصة بك. يمكنك أيضًا تغليف comboBox بسيط في هذه المقالة ، والتي يمكن أن تجلب البيانات من الواجهة الخلفية عبر عنوان URL. لذلك ، سنظل نبذل قصارى جهدنا على أساس هذا المكون ، وإضافة سمة البيانات* مباشرة إلى علامة SELECT لتهيئة مكون المربع المنسدلة.
1. رمز تغليف مكون JS
(الدالة ($) {// 1. تحديد طريقة تمديد jQuery comboBox $ .fn.combobox = function (الخيارات ، param) {if (typeof ortions == 'string') {return $ .fn.combobox.methods [Options] (this ، param) ؛ $. ottrom.text. Options.onbeforeLoad. (I ، Option) (Options.Oncles Options). url) {$ .getjson (url ، function (data) {jq.empty () ؛ var ortive = $ ('<spoint> </potion>') ؛ Option.Attr ('value' ، '') ؛ Option.text ('flease select') ؛ jq.append (report) jq.attr ('valuefield')) ؛ }} ؛ // 6. قائمة المعلمة الافتراضية $ .fn.combobox.defaults = {url: null ، param: null ، data: null ، valuefield: 'value' ، textfield: 'text' ، placeholder: 'free select' ، onbeforeload: function (param) {} ، onloadsucess: function () {} ، onchange: تتم إضافة هذه الفقرة حديثًا ، وطريقة التهيئة $ (document) .Ready (function () {$ ('. combobox'). كل (function () {var $ combobox = $ (this) ؛ $ .fn.combobox.call ($ combobox ، $ combobox.data ()) ؛}) ؛) ؛ }) (jQuery) ؛معظم الرموز لا تختلف عن آخرها. دعونا نركز على الفقرة التالية
//تتم إضافة هذه الفقرة حديثًا. بعد اكتمال تهيئة الصفحة ، طريقة التهيئة $ (وثيقة) .READY (function () {$ ('. combobox'). كل (function () {var $ combobox = $ (this) ؛ $ .fn.combobox.call ($ comboBox ، $ combobox.data ()) ؛}) ؛من الواضح أنه بعد اكتمال تهيئة الصفحة ، يتم تهيئة المكون من خلال محدد النمط. يتم استخدام كل منها ، إذا كان هناك العديد من أنماط .combobox ، قم بإزالة كل منها بدوره. استدعاء طريقة المكالمة للاتصال بتهيئة combobox من خلال $ .fn.combobox.call ($ combobox ، $ combobox.data ()) ؛. تتوافق المعلمتان في طريقة الاتصال مع:
1) كائن jQuery الذي تم تهيئته حاليًا
2) قائمة المعلمات. هنا ، فإن سمات البيانات التي تم الحصول عليها من خلال $ combobox.data () كلها سمات بيانات HTML-*. تمرير جميع سمات البيانات-كمعلمات في طريقة تهيئة Combobox.
2. تهيئة في HTML من خلال البيانات-*
<حدد ID = "search_" name = "search_province" data-url = "/home/getProvince" data-param = '{"type":حدد سمة البيانات-*. من ما سبق نعلم أن التهيئة هنا هي تهيئة المكون من خلال STYLE SECECTOR.COMBOBOX ، لذلك فمن المطلوب أنه إذا كنت ترغب في استخدام البيانات-* لتهيئة المكون ، يجب عليك تعيين نمط class = "combobox" حتى تتمكن الخلفية من الحصول على العلامات التي تحتاج إلى تهيئة.
3. الواجهة الخلفية C#
HomeController من الفئة العامة: Controller {قائمة عامة <string> lstprovince = قائمة جديدة <string> () {"Beijing" ، "Tianjin" ، "Chongqing" ، "Shanghai" ، "Hebei" ، "Shanxi" ، "Liaoning" ، "Jilin" ، "Hilongjiang" "Anhui" ، "Fujian" ، "Jiangxi" ، "Shandong" ، "Henan" ، "Hubei" ، "Hunan" ، "Guangdong" ، "Hainan" ، "Sichuan" ، "Guizhou" ، "Yunnan" ، "Yannan" ، "منطقة المنغوليا الداخلية المستقلة" ، "منطقة قوانغشي تشوانغ المستقلة" ، "منطقة التبت المستقلة" ، "المنطقة الإدارية الخاصة نينجشيا هوي" ، "منطقة إدارية خاصة من شينشيا أويغور" ، "منطقة إدارية خاصة من ماكاو" ؛ public JsonResult getProvince (نوع السلسلة) {var lstres = new list <Brucn> () ؛ لـ (var i = 0 ؛ i <10 ؛ i ++) {var omodel = new Province () ؛ omodel.id = i ؛ omodel.name = lstprovince [i] ؛ lstres.add (omodel) ؛ } إرجاع JSON (lstres ، jsonrequestbehavior.allowget) ؛ }} فئة عامة مقاطعة {public int id {get ؛ تعيين؛ } اسم السلسلة العامة {get ؛ تعيين؛ }}لا يوجد ما يقوله عن اختبار الكود.
4. تصحيح تأثير
احصل على التأثير
هذا يكمل أساسا تهيئة المكون من خلال البيانات-*.
3. ملخص
يوضح ما سبق بإيجاز استخدام طريقة بيانات jQuery () مع سمة HTML5 Data-*. يمكن أن تلبي احتياجات المدونين بشكل أساسي: لا تحتاج إلى كتابة سطر واحد من رمز JS لتهيئة العلامة مباشرة. عند استخدامه ، فقط الرجوع إلى ملفات jquery.js و jquery.extension.js. لكننا نعلم أنه نظرًا لأنها ميزة في HTML5 ، يجب أن تكون هناك متطلبات معينة للمتصفح. بطبيعة الحال ، فإن وظيفة الاستخدام هذه أساسية نسبيًا ، لكنها تكفي لتهيئة بعض المكونات البسيطة.
إذا كان هناك أي فهم غير صحيح في المقالة ، فيرجى الإشارة إلى ذلك ، وسيكون المدون ممتنًا للغاية.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.