تحليل مثالBootstrap للتحويل إلى ميزة تغيير البدل البديل لمحرك البحث Baidu

تطبيق وظيفة تغيير الشكل واسع النطاق، سواء كانت واجهة البحث أو واجهة الإدارة العادية وما إلى ذلك، يمكن تصميمها وتطبيق وظيفة تغيير الشكل لتحسين تجربة المستخدم.　

اليوم، قمت بالتقليد 功能 من Baidu تغيير الشكل، وقد تم تحقيق وظيفة تغيير الشكل الأساسية، وسأقوم بتقديم كيفية تحقيق ذلك للجميع. في عملية تصميم الواجهة، استخدمت إطار Bootstrap لتحسين التكيف مع الشاشة. (بالطبع، أيضًا من أجل فهم استخدام هذا الإطار بشكل أفضل، لا تنسوا إدخال حزمة css وjs الخاصة بBootstrap framework). من الأفضل في إنشاء المشروع تقسيم css وjs وimages بشكل منفصل.　

أولاً، النسق، لقد قمت بالنسق ببساطة لصفحة تغيير الشكل، حيث تحتوي على بعض الأزرار والصور، من أجل تحقيق ذلك بسهولة، لذا تم اختيار صور الخلفية لتغيير الشكل مباشرة، تم استخدام علامات ul li للنسق مباشرة، طبعاً يمكن أيضًا استخدام نسق div الأصلي.　

<div class="container-fluid b-icons">
 <div class="b-icons-item" id="b-box"><a href="javascript:;">صندوق الجوائز</a></div>
 <div class="b-icons-item" id="b-change"><a href="javascript:;">تغيير الشكل</a></div>
 <div class="b-icons-item" id="b-msg"><a href="javascript:;">الرسالة</a></div>
 </div>
 <div class="s-icons">
 <div class="s-icons-bottom">
  <div class="icon-items">
  <ul>
   <li><a href="javascript:;">مثير</a></li>
   <li><a href="javascript:;">ألعاب</a></li>
   <li><a href="javascript:;">كرتون</a></li>
   <li><a href="javascript:;">نجوم</a></li>
   <li><a href="javascript:;">مناظر طبيعية</a></li>
   <li><a href="javascript:;">بسيط</a></li>
   <li><a href="javascript:;">ناعم</a></li>
   <li><a href="javascript:;">تخصيص</a></li>
  </ul>
  </div>
  <div class="icon-up">
  <div>
   <i class="glyphicon glyphicon-arrow-up"></i>
   <a href="javascript:;">إغلاق</a>
  </div>
  </div>
  <div style="clear: both"></div>
  <div class="icon-bottom">
  <ul>
   <li class="col-lg-1 col-lg-offset-1 dpic"><img src="images/0.jpeg" title="[#1#]"></li>
   <li class="col-lg-1 dpic"><img src="images/1.jpeg" title="[#1#]"></li>
   <li class="col-lg-1 dpic"><img src="images/2.png" title="[#1#]"></li>
   <li class="col-lg-1 dpic"><img src="images/3.jpg" title="[#1#]"></li>
   <li class="col-lg-1 dpic"><img src="images/4.jpg" title="[#1#]"></li>
   <li class="col-lg-1 dpic"><img src="images/5.jpg" title="[#1#]"></li>
   <li class="col-lg-1 dpic"><img src="images/6.jpeg" title="[#1#]"></li>
  </ul>
  </div>
 </div>
 </div>

الآن كيفية زخرفة المظهر، أنا أحب واجهة بسيطة.

هذا هو كود css:　

*{
 جنب: 0PX;
 ملء: 0PX;
 عائلة الخط: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
.b-icons{
 لون الخلفية: #569caa;
 طول: 32PX;
 طول الخط: 32PX;
}
.b-icons .b-icons-item{
 في: اليسار;
}
.b-icons #b-box{
 جنب: 10%;
}
.b-icons #b-change,.b-icons #b-msg{
 جنب: 20PX;
}
.b-icons #b-box,.b-icons #b-change,.b-icons #b-msg{
 نمط النص: تحته;
}
.b-icons #b-box a,.b-icons #b-change a,.b-icons #b-msg a{
 حجم الخط: 12PX;
 لون: #fff;
}
.s-icons{
 width: 100%;
 موقع: ثابت;
 يسار: 0PX;
 اعلى: 0PX;
 لون الخلفية: #fff;
 طول: 175PX;
 عرض: لا شيء;
}
.s-icons .s-icons-bottom{
 width: 100%;
 طول: 35PX;
 حد السفلي: 1PX سلك #808080;
}
.s-icons .icon-items{
 جنب: 15%;
}
.s-icons .icon-items>ul li{
 طول: 30PX;
 line-height: 30px;
 في: اليسار;
 list-style: none;
 جنب: 10PX;
 جنب: 10PX;
}
.s-icons .icon-items a{
 لون: #666;
}
.s-icons .icon-up{
 line-height: 30px;
 float: right;
 margin-right:10%
}
.s-icons .icon-up>div a,.s-icons .icon-up>div i{
 color: #2544ff;
}
.s-icons .icon-bottom{
 width: 100%;
 height: 100px;
 margin-left: 15%;
 margin-top:20px;
}
.s-icons .icon-bottom .dpic{
 text-align: center;
 list-style: none;
 margin-left: 5px;
}
.s-icons .icon-bottom .dpic img{
 width: 120px;
 height:80px;
}

جزءًا من الأهمية هو كيفية كتابة كود jQuery لتحقيق التبديل في الصور.

عند النقر على تغيير المظهر، يتم التبديل إلى واجهة تحتوي على تصنيفات المظهر والزر لتقليص، عند النقر على التقليص، يتم تقليص الواجهة. من أجل تنفيذ هذه الميزة، يجبثلاث طرقيمكنك اختيار طريقة واحدة:　

1) slideDown() و slideUp();　

2) show() و hide();　

3) fadeOut() و fadeIn().　

أنا أحب الطريقة الثانية هنا، لذا أستخدم الطريقة الثانية في الكود.　

كيف يمكن تحقيق تغيير خلفية الصورة عند النقر على الصورة؟ في الواقع، يتعلق الأمر فقط بمعالجة النمط، أي كيفية تغيير صورة الخلفية، و مشكلة عرض صورة الخلفية. إذاً، ما هي الطريقة لتحديد الصورة المضغط عليها أو المحددة؟ يمكن الحصول على مسار الصورة من خصائص src لـ img، يمكن استخدام method attr() من jQuery للحصول على ذلك. على سبيل المثال:　

　var src = $(this).attr("src");

this يشير إلى عنصر الصورة المضغط عليها بالفأرة حاليًا.

للتحديث غير تغيير صورة الخلفية للصفحة، استخدمت localStorage من html5، الطريقة الأكثر شيوعًا هي getItem() وsetItem() :　

var bgig = localStorage.getItem("bgig");

localStorage.setItem("bgig", src);

عملية تنفيذ هذه الميزة تتم كما يلي:

 $(function () {
 var bgig = localStorage.getItem("bgig");
 إذا (bgig == null) {
 $("body").css({ "background-image": "url(images/1.jpeg)", "background-size": "cover" });
 }
 else {
 $("body").css({ "background-image": "url(" + bgig + ")", "background-size": "cover" });
 }
 $("#b-change a").click(function () {
 $(".s-icons").show(500);
 });
 $(".icon-up a").click(function () {
 $(".s-icons").hide(500);
 });
 $(".dpic img").click(function () {
 var src = $(this).attr("src");
 $("body").css({ "background-image": "url(" + src + ")","background-repeat":"no-repeat","background-size":"100%" });
 localStorage.setItem("bgig", src);
 });
});

صورة النمذجة:

هذا هو محتوى المقال كله، آمل أن يكون هذا المقال مفيدًا جدًا لكم في التعلم، وأتمنى أن تدعموا أيضًا تعليم النفاس.

إذا كنت ترغب في التعمق أكثر في التعلم، يمكنك الضغط هنا للتعلم، وسأقدم لك أيضًا موضوعين رائعين: تعليم Bootstrap تعليم Bootstrap في الممارسة العملية

البيان: محتوى هذا المقال تم جمعه من الإنترنت، حقوق الطبع والتأليف تخص المالك الأصلي، المحتوى تم تقديمه من قبل مستخدمي الإنترنت بشكل تلقائي، هذا الموقع لا يملك حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل أي مسؤولية قانونية. إذا رأيت محتوى يشتبه في انتهاك حقوق الطبع والتأليف، فمرحب بك في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (أثناء إرسال البريد الإلكتروني، يرجى استبدال # بـ @) للإبلاغ، وتقديم الأدلة ذات الصلة، إذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فورًا.