cover

في الكاتب: و مدرجة تحت التنصيف دروس.

بسم الله و الحمدلله و الصلاة والسلام على سيدنا رسول الله و على آله و صحبه ومن والاه بإحسان إلى يوم الدين.
في أول تدوينة إن شاء الله سنتحدث عن كيفية عمل صندوق بحث يحاكي (تقريبا!!!) الموجود في موقع آبل Apple. وذلك باستخدام ثلاث طرق مختلفة:

  1. css3
  2. jquery
  3. mootools

الخطوات:

الشكل العام باستخدام css3 و html

search_menu

صورة تاريخية للقائمة و السيد صندوق البحث.

<div id="menu" class="r25">
<input type="text" id="search" class="r25"  placeholder="ابحث من هنا"   />
</div>


وهو الكود المطلوب لصندوق البحث،لاحظوا الــ Attribute المسمى بـ placeholder وهو يمثل النص الذي يكون في صندوق البحث قبل الضغط عليه.

والآن مع الـ style :

#menu{/* المخصص للقائمة style  الـ */
width:600px;
margin:0px auto;
padding:10px;
position:fixed;
top:25%;
left:25%;

/*الألوان و الألوان المتدرّجة */
background-color:#c2c2c2;/*الخلفية الإحتياطية..في حال لم يظهر تدرج الألوان سيظهر هذا اللون كخلفية*/
background-image: -webkit-gradient(linear,0% 100%, 0% 1%, from(#c2c2c2), to(#e2e2e2));/* لمتصفحات الكروم والسفاري */
background-image: -o-linear-gradient(bottom, #c2c2c2, #e2e2e2); /*  11.10+  للأوبرا*/
background: -moz-linear-gradient(bottom,#c2c2c2,#e2e2e2);/* للفايرفوكس و اشباهه */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c2c2c2', endColorstr='#e2e2e2');/ * للإنترنت اكسبلورر */
} 

#search{/*  !!المخصص لصندوق البحث...هذا هو مربط الفرس style الـ*/
background:#a2a2a2 url(imgs/white_magn.png) no-repeat right center;/* وضع صورة المكبّر في اقصى يمين صندوق البحث*/
border:1px  solid #a2a2a2;
outline:none; /* لمنع ظهور مستطيل حول صندوق البحث عند الضغط عليه */
padding-left:7px;
width:90px;
padding-right:20px;
direction:rtl;
}
/*في الكروم،السفاري و الفايرفوكس..عذرا:الأوبرا و الإنترنت إكسبلورر لا يدعمون الخاصية placeholder إضافة اللون الأبيض للـ */
input:-webkit-placeholder { 
    color: #FFF;  
}

input:-moz-placeholder { 
    color: #FFF;  
}

/* إضافة الأركان الدائرية لصندوق البحث */
.r25{
-moz-border-radius:25px; /* للموزيلا */
-webkit-border-radius: 25px;/* للكروم،السفاري و الأوبرا */
border-radius:  25px;/* جميع المتصفحات الحديثة */
}

الطريقة الأولى : تطبيق الحركة باستخدام css3

إلى الأعلى

استخدام الـ Pseudo-class:

لاحظ الحالة العادية و حالة تركيز مؤشر الماوس على صندوق البحث


باستخدام focus من CSS Pseudo-classes سيتم التعرف على تركيز(أي ضغطة) الماوس داخل صندوق البحث..وسيتم تغيير خصائص صندوق البحث تبعا لهذا الحدث.

/* جميع الخصائص التالية سيتم تفعيلها فقط عند تركيز الماوس */
#search:focus{
width:180px; /* زيادة عرض صندوق البحث */
background:#FFF url(imgs/dark_magn.png) no-repeat right center; /* تغيير صورة المكبر البيضاء إلى الرمادية */
border:1px solid white; /*  تغيير لون إطار الصندوق*/
-webkit-box-shadow:0px 0px 10px white; /*  !!إضافة ظل أبيض حول الصندوق..بإمكانك تسميته هالة ضوء*/
-moz-box-shadow:0px 0px 10px white;
box-shadow:0px 0px 10px white;
}

حان الوقت لبعض الحركة!

وسنستخدم فيها CSS3 Transitions لإظهار للحركة الإنتقالية الكاملة من الحالة العادية لصندوق البحث إلى حالة تركيز الماوس عليه.وهي ابسط طريقة.

دعونا نرى كيف يحدث ذلك:

#search{
.
.
.
/* سنضيف الأسطر التالية للكود الموجود مسبقا */

-webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

والآن دعونا نرى ما الذي يعنيه هذا السطر:

transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);

transition:
هي الخاصية property المستخدمة للتعبير عن الـحركة transition في الــ CSS
all :
تعني تفعيل هذه الحركة لكل الخصائص الداعمة…بالإمكان استبدالها بخصائص مفردة مثل…اللون أو العرض أو الإرتفاع..أوغيرها
500ms :
وتمثّل الزمن المستغرق لتنفيذ الـحركة Transition Time بالميللي-ثانية
cubic-bezier:
دالة الحركة،هناك دوال كثيرة للحركة الفائدة منها هي التحكم بسرعة الحركة بدقّة عالية..يمكنك المقارنة بين الدوال(Linear,ease,ease-in,ease-in-out,ease-out,cubic-bezier) في CSS3 transition-timing-function

الأسطر الثلاث الأخرى لها نفس الوظيفة لكن تختلف الصيغة لاختلاف أنواع المتصفحات.

الطريقة الثانية : تطبيق الحركة باستخدام JQuery

إلى الأعلى
الجيكويري هي مكتبة جافا سكربت رائعة!!وقد تبنّتها كثير من المؤسسات والشركات مثل جوجل Google، موزيلا Mozilla، ووردبريس WordPress ،دروبال Drupal،ديل Dell.تمتاز بأنها صغيرة الحجم وبإمكانيات عالية وتتوفر إضافاتها(plugins) بصورة كبيرة.أضف إلى ذلك أنها مجانية.
بداية سنضمّن الجيكويري في الصفحة بالإضافة إلى إضافة أخرى وظيفتها تمكين الـحركة لخاصية الخلفية background :

/ * هذا هو الرابط الدائم لمكتبة الجيكويري */
< script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script >  

/* هذه السكربت مطلوبة لتمكين تغيير لون الخلفية باستخدام الدالة animate */
< script  src="js/jquery-bg-animation.js" type="text/javascript"></script > 

سنقوم بتطبيق نفس الحركة السابقة ولكن باستخدام الجيكويري.وذلك بتحويل الجزئية المتعلقة بالــ focus في الـ CSS من Pseudo-class إلى Event أو حدث في الجيكويري كالآتي :

$(document).ready(function(){/*هذه الدالة تقوم بتحميل الكود عند جاهزية الصفحة */
$("#search").focus(function(){/* هنا يتم تفعيل كود الجيكويري عند تركيز الماوس على صندوق البحث */

$(this).animate({ /* هنا دالة الحركة */
  "width": "180px", 
"backgroundColor": "#FFFFFF", 
"-webkit-box-shadow": "0px 0px 10px white",
"-moz-box-shadow": "0px 0px 10px white" ,
"-o-box-shadow": "0px 0px 10px white" ,
"box-shadow": "0px 0px 10px white",
"border":"1px solid #FFF"  
   
  }, 400 );/*  الزمن المستغرق في الحركة بالميلليثانية*/

 /* لا تدعم تغيير صورة الخلفية قمنا بعملها منفصلة  animate  لأن دالة 
وتمكننا من إعادة تعيين أو إضافة خصائص للعنصر المطلوب  css  باستخدام دالة أخرى تسمى */ 
    $(this).css({
   "background-image":"url(imgs/dark_magn.png)"
    });

});//end focus event   
});//end the ready 


الكود السابق بالجيكويري كما ذكرنا يوازي الــ element:focus في الـ CSS .أي أننا قمنا باستبدال الـ focus الموجود في الـ css ..بالــ focus event الموجود في الجيكويري..إن التركيز على مسألة الأحداث من الأشياء المهمة لأنها توفر التفاعلية مع المستخدم باستخدامها في المكان المناسب.
دالة الــ animate تقوم تغيير بعض خصائص أو حتى إضافة خصائص لم تكن موجودة في العنصر المراد تحريكه.
وتقوم بإظهار هذه التغييرات بصورة سلسة و تدريجية.

حتى الآن تحدث الحركة هي عند تركيز مؤشر الماوس على الصندوق،ولكن إذا حركنا المؤشر بعيدا و ضغطنا فإنه سوف…
لن يحدث شيء!…لماذا؟…لأننا لم نقم بالاستعداد لفقدان التركيز على الصندوق وهذا الحدث هو عكس الـ focus ويسمى Blur .


سنقوم بإضافة الحدث Blur لصندوق البحث في الجيكويري.
لا يختلف عن كود ال focus سوى أنه سنعيد تعيين الخصائص القديمة للعنصر عند التركيز بمؤشر الماوس خارج صندوق البحث:

$("#search").blur(function(){

  $(this).animate({ 
  "width": "90px",
"backgroundColor": "#a2a2a2",
"-webkit-box-shadow": "0px 0px 0px gray",
"-moz-box-shadow": "0px 0px 0px gray" ,
"box-shadow": "0px 0px 0px gray",
"border":"1px solid #a2a2a2"  
   
  }, 300 );
    

$(this).css({
   "background-image":"url(imgs/white_mag.png)"
    });
   

لا يوجد blur بلا focus !
أي أن blur دائما و أبدا يأتي بعد focus

الطريقة الثالثة : تطبيق الحركة باستخدام Mootools

إلى الأعلى
وفيها سنتستخدم مكتبة الموتولز mootools وهي مكتبة أخرى مشابهه للجيكويري.
الفكرة مطابقة للجيكويري تماما…!!ولكن باختلاف الصيغة.
يحتوى الكود على دالتين لتحريك الصندوق.:
animate: و ظيفتها اظهار الحركة عند تركيز مؤشر الماوس focus.
animate_back: وظيفتها إرجاع الصندوق إلى حالته الأصلية عندما يفقد تركيز مؤشر الماوس داخله(اي يضغط بالماوس خارج الصندوق)blur.

سنستخدم مكتبة الموتولز وهي تتكون من ملفين الـ mootools-1.2.core.js و mootools-1.2.more.js +إضافة اسمها shakes وهي تسهّل تطبيق الــ Animation .نقوم الآن بإضافة الملفات للصفحة.ثم نبدأ كتابة كود الحركة:

< script src="js/mootools-1.2-core.js" language="javascript" type="text/javascript"></script > 
< script src="js/mootools-1.2-more.js" language="javascript" type="text/javascript"></script > 
< script src="js/shakes.js" language="javascript" type="text/javascript"></script > 

window.addEvent('domready', function() {/* تعني تحميل الكود عند جاهوية الصفحة */

var animate = $('search').animate()
    .morph({/*  دالة الحركة */
  "width": "180",
  "background-color": "#FFFFFF",
  "-webkit-box-shadow": "0px 0px 10px white",
        "-moz-box-shadow": "0px 0px 10px white" ,
        "box-shadow": "0px 0px 10px white",
        "border":"1px solid #FFF"  ,
        "background-image":"url(imgs/dark_magn.png)"
  });
    

  var animate_back = $('search').animate()
    .morph({
  "width": "90",
  "background-color": "#a2a2a2",
  "-webkit-box-shadow": "0px 0px 0px white",
        "-moz-box-shadow": "0px 0px 0px white" ,
        "box-shadow": "0px 0px 0px white",
        "border":"1px solid #a2a2a2"  ,
        "background-image":"url(imgs/white_magn.png)"
  });
    
/* هذان السطران يعنيان باختصار:ابدأ الحركة عند ضغط الماوس عل صندوق البحث*/
$('search').addEvent('focus', function() { /* هنا سيتم ربط الحركة بالحدث focus*/
    animate.start();
});

/*أيضا هذا الأسطر تعني ابدأ الحركة ولكن عند ضغط الماوس خارج صندوق البحث */
$('search').addEvent('blur', function() {/* كذلك هنا سيتم ربط الحركة بالحدث blur*/
    animate_back.start();
});

});

تمت تجربته على :

المتصفحات الدّاعمة

تمت تجربته في هذه المتصفحات

ماذا الآن؟

في الجزء الثاني بإذن الله،سنقوم بجعل الصندوق يعمل مع البي اتش بي أجاكسيّاَ!! PHP+AJAX :)
جزيل الشكر و التقدير للأخ محمد علي الطيب للمراجعة الفنية و النصائح و الإرشادات المفيدة بحق.

ختاما ارجو ان اكون قد وفقت في هذا الدرس..,كما أتمنى أن لا تبخلوا علينا بلأسئلة فالغرض الأساسي هو الفائدة.
وصلى اللهم و سلم و بارك على سيدنا محمد و الحمدلله رب العالمين.

wdalhaj

مصمم و مطور ويب حر..يعشق شرب القهوة السوداء.. يمكنكم متابعته على التويتر [email protected]

More Posts

8 Responses to “كيفية عمل صندوق بحث بنكهة آبل – الجزء الأول”

    • wdalhaj

      تسلم يا ود مبارك اللهم آمين و يوفقكم إن شاء الله

    • wdalhaj

      التحية ليك يا دانتار…يسعدني إنو عجبك والله وبانتظار اعمالك بشدة :)

  1. mohamed yousif

    والله يا ود الجاح ماف اي شخشة الموقع عجبنا وسر بالنا …بالجد حاجة مفيدة بس حيبقا مفيد زيادا لو بديت سلسة دروس بتاعت فلاش بحكم انك راج معلم فيها وكد والله ولي التوفيق

    • wdalhaj

      تسلم يا محمد أسعدنا مرورك على الموقع وانشاء الله دايما يعجبك ويسر بالك!
      إن شاء الله حنبدا سلسلة تعليم الفلاش في وقت ما 😉
      ودمتم :)

أضف تعليقاً

  • (لن يتم نشره)