في المقالة السابقة ، استنادًا إلى ملخص تجربة Bootstrap Metronic لإطار التنمية [I] نظرة عامة على الإطار ومعالجة وحدات القائمة ، فإنه يقدم معالجة وحدات القائمة ، ويقدم بشكل أساسي كيفية الحصول على سجلات ديناميكية من قوائم قاعدة البيانات وإنشاء قوائم القائمة. يتم الحصول على نمط الأيقونة لمعلومات القائمة أيضًا من قاعدة البيانات ، لذلك يتعين علينا الحصول على تعريفات الأيقونات المختلفة في Bootstrap. تقدم هذه المقالة بشكل أساسي كيفية استخراج معلومات أيقونة Bootstrap وتخزينها في قاعدة البيانات لاستخدامها.
1. عرض القائمة وأيقونات bootstrap المختلفة
يمكننا أن نرى من الشكل أدناه أنه من أجل جمال القائمة ، يحتوي كل عنصر قائمة (هناك قوائم ثلاثية هنا) على أيقونة. على الرغم من أن الأحجام مختلفة ، إلا أننا نستخدم أيقونات bootstrap ، والتي هي كلها من محتويات مكتبة أيقونة bootstrap.
تنقسم مكتبة أيقونة bootstrap إلى ثلاث فئات:
Font Awesome: Bootstrap's Icon Font. جميع الرموز المتضمنة في Font Awesome هي ناقلات ، بحيث يمكن تحجيمها بشكل تعسفي ، وتجنب متاعب وجود أيقونة للقيام بأحجام متعددة. يمكن أيضًا استخدام الأنماط التي يمكن تعيين CSS للخطوط على هذه الرموز.
على سبيل المثال ، فيما يلي بعض الرموز الرائعة للخط:
الرموز البسيطة: جمع شعارات العديد من مواقع الويب وتوفير أحجام عالية الجودة ومختلفة من صور تنسيق PNG إلى مستخدمي الإنترنت. جميع أيقونة حقوق الطبع والنشر تنتمي إلى شركتهم.
كما هو موضح أدناه ، هناك بعض أيقونات الرموز البسيطة:
الغليفيكونون: يتضمن مجموعة من 200 مخططات تنسيق خطية رمزية توفرها الغليفيكون. يتم فرض رسوم على الجليفيكونز بشكل عام ، ولكن بعد التفاوض بين مؤلفي bootstrap و glyphicons ، يمكن للمطورين استخدامه دون دفع رسوم.
فيما يلي بعض محتوى الأنفيف:
باستخدام محتويات الرمز هذه ، يمكننا فقط تقديم الأنماط التالية.
<link href = "/content/meter/font-awesome/css/font-awesome.min.css" rel = "stylesheet"/> <link href = "/content/meter/simple-line-icons/simple-line-icons.min.css href = "/content/meter/bootstrap/css/bootstrap.min.css" rel = "STYLESHEET"/>
تدعم هذه الرموز العرض المواضيعي لمختلف bootstraps ، كما هو موضح في الآثار التالية.
أو يمكنك أيضًا جعل الرمز أكبر:
2. استخراج أيقونات Bootstrap المختلفة
من خلال المقدمة أعلاه ، ربما يكون لدينا فهم معين لرموز Bootstrap هذه ، ولكن إذا أردنا أن نكون قادرين على تحديد أيقونات في تحرير القائمة ، فلا نزال بحاجة إلى استخراج هذه المعلومات في قاعدة البيانات وعرضها لي أن أختار ، وإلا فلن يكون التكوين الديناميكي ممكنًا.
على سبيل المثال ، في واجهة التحرير أعلاه ، نقدم اختيارًا ديناميكيًا لرموز ويب القائمة. إذا قمنا بتسجيل مجموعة من الرموز المذكورة أعلاه في قاعدة البيانات ، فيمكننا عرضها في الواجهة وتحديد الرسم البياني المناسب منه.
بناءً على ملفات النمط أعلاه ، دعنا نحللها. بالنسبة لمحتوى الملف الخاص بـ font-awesome.min.css ، فإن جزء تعريف الأيقونة كما يلي.
بالنسبة للألعاب البسيطة ، فإن تعريف أسلوبه مشابه ، كما هو موضح أدناه.
بالنسبة إلى الغليفيكون ، فإن تعريف أسلوبه متشابه أيضًا ، كما هو موضح أدناه.
بناءً على هذه المعلومات ، يمكننا استخراج المعلومات التي نحتاجها من خلال مطابقة التعبير العادية وتخزينها في قاعدة البيانات لتحقيق الخطوة الأولى من العرض الديناميكي واختيار الرموز.
على سبيل المثال ، نحدد المتغيرات الجزئية والتعبيرات العادية للتعامل مع محتويات الملف:
regex string = "^//. (؟ <name>.*؟): قبل // s*// {" ؛ قائمة <Tring> filePathList = قائمة جديدة <string> () {"~/content/meteronic/assets/global/plugins/bootstrap/css/bootstrap.css" ، "~/content/thurs/meteronic/assets/global/plugins/simple-line-line-ics.css" ،}بعد ذلك ، يمكن استخراج محتوى المجموعة عن طريق قراءة محتوى الملف والحصول على سجل المطابقة.
content string = fileutil.filetoString (RealPath) ؛ قائمة <Tring> matchlist = cregex.getList (المحتوى ، regex ، 1) ؛
أخيرًا ، يمكننا حفظ هذه المعلومات في جدول قاعدة البيانات.
bootstrapiconinfo info = new bootstrapiconinfo () {displayName = item ، className = prefix + item ، createTime = dateTime.Now ، sourCetype = sourCetype ،} ؛ bllfactory <Outstrapicon> .instance.insert (info) ؛أخيرًا ، يتم تخزين السجل في قاعدة البيانات. التأثير كما يلي. تم تسجيل معلومات الأيقونة التي نحتاجها. وبهذه الطريقة ، عند استخدامه ، يمكنك استخدام معلومات كل حقل لعرض واجهة جيدة المظهر.
3. عرض أيقونة واختيار bootstrap
بعد أن نقرأ الملف ونستخرج المحتوى في التعبيرات العادية ، ثم حفظه في قاعدة البيانات ، يمكن استخدام معلومات الرمز هذه لنا ويمكن عرضها بطريقة مصنفة على الصفحة. كل نوع من الأيقونة مرفقة لسهولة الاستعلام ، كما هو موضح أدناه.
يشبه رمز صفحة العرض في هذا الجزء عرض البيانات العادي ، لكن معلومات الرأس غير مطلوبة. دعنا نلقي نظرة على رمز الصفحة كما هو موضح أدناه.
<viv> <viv> <viv> <i> <i> </i> معلومات الأيقونات </div> </viv> <viv> <viv> <span> إظهار لكل صفحة </span> <select id = "rows" onChange = "changerows ()"> <spoint> 50 </spans> <selem </span> <span id = 'totalCount'> 0 </span> ، إجمالي عدد الصفحات: <span id = 'totalPageCount'> 0 </span> صفحات. </viv> <hr/> <div style = "padding-left: 20px"> <div id = "grid_body"> </viv> <iv> <ul id = 'grid_paging'> </ul> </viv> </viv> </viv>
محتوى عرض الأيقونة الرئيسي موجود في HTML في الجزء أعلاه.
<div id = "grid_body"> </iv>
كما يلي البرنامج النصي المعالجة الذي يحصل بشكل ديناميكي وإنشاء رمز HTML لعرضه على الواجهة.
$ .getjson (iconurl + "&" + inction ، function (data) {$ ("#icon_body"). title =/"" + item.disPlayName + "/"> "؛ $ ("#icon_body"). إلحاق (tr) ؛بعد أن يحدد المستخدم الرمز المقابل ، يمكننا تعيين نمط SPAN من خلال البرنامج النصي لعرض الرمز الذي حددناه ، كما هو موضح أدناه.
$ ("#i_webicon"). attr ("class" ، className) ؛بالطبع ، عندما نختار رمزًا ، نقدم مربع حوار منبثق لعرض الرموز بفئات مختلفة ، بحيث يمكن للمستخدم العودة بعد تحديده.
وبهذه الطريقة ، انتهينا من استخراج أنواع مختلفة من المخططات من ملف الأيقونة ، ثم تخزينها في قاعدة البيانات ، وعرضها على الصفحة ، لكي نحدد وتعيين ديناميكيًا.
ما سبق هو ملخص تجربة إطار تطوير Metronic Bootstrap الذي أدخله المحرر لك [أربعة] المعرفة ذات الصلة حول استخراج أيقونات Bootstrap واستخدامها. آمل أن يكون ذلك مفيدًا للجميع. إذا كنت تريد معرفة المزيد من المعلومات ، فيرجى الانتباه إلى موقع Wulin.com!