في ضوء العديد من أطر الواجهة الأمامية السابقة (خاصة أطر التخطيط المستجيبة)، تبدو عناصر تحكم واجهة المستخدم تشبه إلى حد كبير صفحات الويب وليس لها طابع أصلي، لذلك فإن السعي وراء واجهة المستخدم الأصلية يعد أيضًا هدفًا مهمًا لواجهة المستخدم المتعددة اللغات (MUI). تعتمد MUI على واجهة مستخدم نظام iOS وتكمل بعض عناصر التحكم في واجهة المستخدم الفريدة لنظام Android. MUI لها ثلاثة معانٍ بشكل رئيسي: 1. نسخة متعددة اللغات من Windows، وهو نظام تشغيل كمبيوتر تم إصداره بشكل منفصل؛ 2. المنظمة الرسمية الأكثر موثوقية في العالم لإصدار شهادات الحلال؛ 3. اسم علم في تكنولوجيا الاتصالات المتنقلة.
1. الاستعدادات قبل استخدام الإطار1. قم بإنشاء ملف HTML جديد يحتوي على mui
في Hbuilder، أنشئ ملف HTML جديدًا وحدد قالب HTML الذي يحتوي على mui لإنشاء قالب صفحة mui بسرعة. يتعامل هذا القالب مع مراجع موارد mui وjs بشكل افتراضي.
2. أدخل mheader
يعد شريط العنوان العلوي ضروريًا لكل صفحة. أدخل mheader في Hbuilder لإنشاء شريط التنقل العلوي بسرعة.
3. أدخل مبودي
باستثناء عناصر التحكم في التنقل العلوي وعلامة التبويب السفلية، يوصى بوضع عناصر تحكم أخرى في عنصر تحكم .mui-content . أدخل mbody في Hbuilder لإنشاء مقطع تعليمات برمجية يحتوي على .mui-content بسرعة.
1. الأكورديون (لوحة قابلة للطي)
اللوحة القابلة للطي تشبه القائمة الثانوية، كما يلي:
<ul class=mui-table-view> <li class=mui-table-view-cell mui-collapse> <a class=mui-navigate-right href=#>اللوحة 1</a> <div class=mui- انهيار المحتوى> <p>محتوى اللوحة 1 الفرعي</p> </div> </li> </ul><ul class=mui-table-view> <li class=mui-table-view-cell mui - انهيار> <أ class=mui-navigate-right href=#>اللوحة 2</a> <div class=mui-collapse-content> <p>محتوى اللوحة 2 الفرعي</p> </div> </li> </ul >
2. الأزرار (الأزرار)
زر عادي
أضف فئة .mui-btn إلى عقدة الزر لإنشاء زر افتراضي؛ إذا كنت بحاجة إلى أزرار بألوان أخرى، فتابع إضافة الفئة المقابلة على سبيل المثال، يمكن أن يصبح .mui-btn-blue زرًا أزرق.
<button type=button class=mui-btn>افتراضي</button><button type=button class=mui-btn mui-btn-primary>أزرق</button><button type=button class=mui-btn mui- btn -success>أخضر</button><button type=button class=mui-btn mui-btn-warning>أصفر</button><button type=button class=mui-btn mui-btn-danger>أحمر</button><button type=button class=mui-btn mui-btn-royal>أرجواني</button>
التأثير بعد التشغيل هو كما يلي:
إذا كنت تريد أزرارًا بدون لون خلفية وحدود، فأنت تحتاج فقط إلى إضافة فئة .mui-btn-outlined ، ويكون الرمز كما يلي:
<button type=button class=mui-btn mui-btn-outlined>افتراضي</button><button type=button class=mui-btn mui-btn-primary mui-btn-outlined>أزرق</button><نوع الزر =button class=mui-btn mui-btn-success mui-btn-outlined>أخضر</button><button type=button class=mui-btn mui-btn-warning mui-btn-outlined>أصفر</button><button type=button class=mui-btn mui-btn-danger mui-btn-outlined>أحمر</button> <button type=button class=mui-btn mui-btn-royal mui-btn-outlined>أرجواني</button>
نتائج التشغيل هي كما يلي:
3. معرض الصور (دائري الصور)
يرث رف الصور الدائري من المكون الإضافي للشريحة، لذا فإن بنية DOM وأحداثه هي نفسها الموجودة في المكون الإضافي للشريحة؛
تشغيل الحلقة غير مدعوم بشكل افتراضي. بنية DOM هي كما يلي:
<div class=mui-slider> <div class=mui-slider-group> <div class=mui-slider-item><a href=#><img src=1.jpg /></a></div > <div class=mui-slider-item><a href=#><img src=2.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=3.jpg /></a></div> <div class=mui-slider-item><a href=#><img src =4.jpg /></a></div> </div></div>
افترض أن هناك أربع صور 1 و2 و3 و4 في دائرة الصورة الحالية، بدءًا من الصورة الأولى، قم بالتمرير إلى اليسار لتبديل الصور، عند التبديل إلى الصورة الرابعة، استمر في التمرير إلى اليسار. سيكون هناك تأثيران:
عند عرض الصورة الأولى، فإن الاستمرار في التمرير لليمين لعرض الصورة الرابعة هو نفس المشكلة؛ ويجب التحكم في تنفيذ هذه المشكلة من خلال فئة .mui-slider-loop وعقد DOM؛
إذا كنت تريد دعم التكرار، فأنت بحاجة إلى إضافة فئة .mui-slider-loop إلى عقدة .mui-slider-group ، وفي الوقت نفسه، تحتاج إلى إضافة صورتين بشكل متكرر، ويصبح ترتيب الصور: 4 ، 1، 2، 3، 4، 1. مثال التعليمات البرمجية كما يلي:
<div class=mui-slider> <div class=mui-slider-group mui-slider-loop> <!--دعم التكرار، تحتاج إلى تكرار عقد الصورة--> <div class=mui-slider-item mui-slider - تكرار العنصر><a href=#><img src=4.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=1.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=2.jpg /></a> </div> <div class=mui-slider-item><a href=#><img src=3.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=4.jpg /></a></div> <!--يدعم التكرار، ويحتاج إلى تكرار عقد الصورة--> <div class= mui -slider-item mui-slider-item-duplicate><a href=#><img src=1.jpg /></a></div> </div></div>
يحتوي إطار عمل mui على مكون إضافي مدمج للصور الدائرية، من خلال واجهة برمجة تطبيقات JS المغلفة بهذا المكون الإضافي، يمكن للمستخدمين تعيين ما إذا كان سيتم عرض دائري تلقائيًا أم لا، وفيما يلي مثال على التعليمات البرمجية:
// احصل على كائن المكون الإضافي لشريط التمرير var Gallery = mui('.mui-slider'); 0 });لذلك، إذا كنت تريد ألا يتم تشغيل دائرة الصور تلقائيًا، ولكن يتم تبديلها عن طريق التمرير اليدوي للمستخدم، فأنت تحتاج فقط إلى تعيين معلمة الفاصل الزمني على 0 من خلال الطريقة المذكورة أعلاه.
إذا كنت تريد الانتقال إلى الصورة العاشرة، فيمكنك استخدام طريقة gotoItem للمكون الإضافي لدائرة الصورة، على سبيل المثال:
// ربط الحدث الذي يأتي مع mui يمكنه فقط استخدام طريقة تفويض الحدث mui(.mui-content).on(tap,#btn,function(){gallery.slider().gotoItem(2);//النشر إلى الصورة الثالثة الفهرس يبدأ من 0});4.الإدخال (نموذج الإدخال)
سيتم ضبط سمة العرض على جميع عناصر الإدخال ومنطقة النص والعناصر الأخرى المضمنة في فئة .mui-input-row على width: 100%; بشكل افتراضي. يمكن أن يؤدي تغليف عنصر التسمية وعناصر التحكم المذكورة أعلاه في .mui-input-group إلى تحقيق أفضل ترتيب.
(توجد أيضًا أيقونة عين على الجانب الأيمن من مربع إدخال كلمة المرور، والتي أجدها مفيدة بشكل خاص)
الرمز هو كما يلي:
<form class=mui-input-group> <div class=mui-input-row> <label>اسم المستخدم</label> <input type=text class=mui-input-clear placeholder=يرجى إدخال اسم المستخدم> </ div> <div class=mui-input-row> <label>كلمة المرور</label> <input type=password class=mui-input-password placeholder=يرجى إدخال كلمة المرور> </div></form>
يوفر mui حاليًا أيضًا العديد من وظائف تحسين الإدخال: الحذف السريع، والإدخال الصوتي *5+ فقط، ومربع كلمة المرور الذي يعرض كلمات المرور المخفية.
1) الحذف السريع: ما عليك سوى إضافة فئة .mui-input-clear إلى عنصر التحكم في الإدخال. عندما يكون هناك محتوى في عنصر التحكم في الإدخال، سيكون هناك رمز حذف على اليمين، سيؤدي النقر عليه إلى مسح محتوى الإدخال الحالي.
الرمز هو كما يلي:
<form class=mui-input-group> <div class=mui-input-row> <label>حذف سريع</label> <input type=text class=mui-input-clear placeholder=يرجى إدخال المحتوى> </div >>النموذج>
2) مربع البحث: قم بإضافة فئة .mui-input-row .mui-input-search -row لاستخدام عنصر التحكم في البحث
الرمز هو كما يلي:
<div class=mui-input-row mui-search> <input type=search class=mui-input-clear placeholder=></div>
3) الإدخال الصوتي *5+ فقط: لتسهيل الإدخال السريع، يدمج mui الإدخال الصوتي بتنسيق HTML5+، ما عليك سوى إضافة فئة .mui-input-speech إلى عنصر التحكم في الإدخال المقابل لاستخدام الإدخال الصوتي في بيئة 5+.
4) مربع كلمة المرور: أضف فئة .mui-input-password إلى عنصر الإدخال لاستخدامها
الرمز هو كما يلي:
<form class=mui-input-group> <div class=mui-input-row> <label>مربع كلمة المرور</label> <input type=password class=mui-input-password placeholder=يرجى إدخال كلمة المرور> </div >>النموذج>
5.قائمة(قائمة)
يعد مكون القائمة المغلف بواسطة mui بسيطًا نسبيًا وسهل الاستخدام. ما عليك سوى إضافة فئة .mui-table-view على عقدة ul وفئة .mui-table-view-cell على عقدة li .
<ul class=mui-table-view> <li class=mui-table-view-cell>العنصر 1</li> <li class=mui-table-view-cell>العنصر 2</li> <li class= mui-table-view-cell>العنصر 3</li></ul>
نتائج التشغيل هي كما يلي:
تخصيص لون تمييز القائمة انقر فوق القائمة، وسيتم تمييز عنصر القائمة المقابل باللون الرمادي. إذا كنت تريد تخصيص لون التمييز، فأنت تحتاج فقط إلى إعادة كتابة .mui-table-view-cell.mui-active ، كما يلي:
/*انقر لتمييز اللون الرمادي*/.mui-table-view-cell.mui-active{ لون الخلفية: رمادي؛} أضف أسهم التنقل على اليمين إذا كنت بحاجة إلى إضافة سهم تنقل إلى الجانب الأيمن وتحويله إلى رابط تنقل، فما عليك سوى إضافة a فرعية أسفل عقدة li وإضافة فئة .mui-navigate-right إلى a ، كما يلي :
<ul class=mui-table-view> <li class=mui-table-view-cell> <a class=mui-navigate-right>العنصر 1</a> </li> <li class=mui-table- عرض الخلية> <a class=mui-navigate-right>العنصر 2</a> </li> <li class=mui-table-view-cell> <a class=mui-navigate-right>العنصر 3</a> </li></ul>
نتائج التشغيل هي كما يلي:
أضف عناصر تحكم مثل علامات الزاوية الرقمية على اليمينيدعم mui وضع الاشتراكات الرقمية والأزرار والمفاتيح وعناصر التحكم الأخرى في القائمة؛ ويفترض mui وضع الاشتراكات الرقمية على الجانب الأيمن من القائمة.
<ul class=mui-table-view> <li class=mui-table-view-cell>العنصر 1 <span class=mui-badge mui-badge-primary>1</span> </li> <li class= mui-table-view-cell>العنصر 2 <span class=mui-badge mui-badge-success>2</span> </li> <li class=mui-table-view-cell>العنصر 3 <span class=mui-badge>3</span> </li></ul>
نتائج التشغيل هي كما يلي:
(قائمة الصور والنصوص) ترث قائمة الصور والنصوص من مكون القائمة، وتضيف بشكل أساسي فئات .mui-media و .mui-media-object و .mui-media-body و .mui-pull-left/right . وفيما يلي نموذج التعليمات البرمجية
<ul class=mui-table-view> <li class=mui-table-view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui-pull-left src=img /a.jpg> <div class=mui-media-body> السعادة<p class='mui-ellipsis'>إنه لأمر ممتع أن تنام مع من تحب؛ ولكن ماذا يجب أن تفعل إذا كنت تشخر؟ </p> </div> </a> </li> <li class=mui-table-view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui- pull-left src=img/b.jpg> <div class=mui-media-body> منزل خشبي<p class='mui-ellipsis'>أريد منزلًا خشبيًا صغيرًا مثل هذا، حيث يمكنني صنع الآيس كريم وأكل البطيخ في الصيف، والجلوس حول الموقد للتدفئة في الشتاء.</p> </div> </a> </li> <li class=mui-table -view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui-pull-left src=img/c .jpg> <div class=mui-media-body> اتفاقية التنوع البيولوجي < p class='mui-ellipsis'>تبدو المدينة في وضع الفرن وكأنها لوحة مقلوبة عند الغسق.</p> </div> </a> </li></ul>
نتائج التشغيل هي كما يلي:
الخلاصة: إطار عمل mui سهل الاستخدام للغاية، كما أنه يحتوي على العديد من عناصر التحكم التي يمكننا استخدامها. ويمكن الاطلاع على التفاصيل على موقع mui الرسمي.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.