كيف تستخدم jQuery Colorbox مع معرض صور ووردبريس

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله وعلى آله و صحبه و من والاه بإحسان إلى يوم الدين.

– يوفر ووردبريس إمكانية إضافة معرض صور في الصفحات أو التدوينات.

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

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

سنقوم إن شاء لله باستخدام إضافة jQuery Colorbox في قالب ووردبريس لصنع معرض صور يدعم تكبير الصور وبدون استخدام أي إضافة من إضافات وردبريس وسيتم التطبيق في قالب ووردبريس 2011 (twentyeleven) وهو القالب الافتراضي المُفعّل في إصدارة ووردبريس 3.5 .

قبل البدء علينا أن ننشئ معرض صور ، نفتح شاشة الإدارة ونختار تدوينة جديدة ثم نقوم بإختيار إضافة وسائط من الزر تحت حقل عنوان التدوينة:

إضافة معرض وسائط

ثم نقوم بإضافة صور من الجهاز أو من تلك الموجودة في مكتبة الصور :

إضافة ملفات وسائط

ثم نقوم بتحديد جميع الصور و الضغط على زر إنشاء معرض جديد والموجود في زاوية الشاشة اليسرى أسفل الشاشة :

إنشاء معرض الصور

ستظهر شاشة أخرى تعرض خيارات للصور (تغيير ترتيب عرض الصور وإضافة وصف لكل صورة) وأيضا خيارات للمعرض يسار الشاشة (تحديد عدد الأعمدة -يعني عرض الصور في عمودين ، ثلاثة.. الخ- وتحديد رابط الصورة).
نقوم باختيار 3 أعمدة ثم نختار من القائمة المنسدلة خيار “رابط لـ ملف الوسائط” ثم نختار زر إدراج المعرض :

إعدادات معرض الصور

بعد ذلك نكتب اي اسم للتدوينة ثم نقوم بنشرها من نافذة “نشر” والموجودة يسار الشاشة وذلك بالضغط على زر “نشر” ثم نقوم بعرض التدوينة من خلال رابط “مشاهدة التدوينة”والذي يظهر أعلى الشاشة.
نشر التدوينة

ستظهر التدوينة كالآتي و عند النقر على أي صورة قإنها ستنقلك ستقوم بعرض الصورة على المتصفح في صفحة منفصلة.

معرض الصور في التدوينة

لا شيء جذاب حول المعرض، سوى أنه مرتب في شبكة مكونة من صفوف و أعمدة.. حان الوقت لنضيف بعض الجاذبية!!

استخدام jQuery Colorbox في المعرض :

سنقوم بوضع ملف jquery.colorbox.js في مجلّد js وملف colorbox.css في مجلّد inc .
ثم سنقوم بتضمين الملفيّن في ملف الترويسة header.php داخل وسم head وقبل إغلاق الوسم مباشرة:
(قبل ذلك سنقوم بتضمين ملف مكتبة jQuery لأنه ضروري لعمل الـ colorbox).

<link rel="stylesheet" href="<?php bloginfo("stylesheet_directory");?>/inc/colorbox.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="<?php bloginfo("stylesheet_directory");?>/js/jquery.colorbox.js"></script>


هناك أيضا ملفات صور تجدونها في مجلد images والموجود داخل مجلد الخاص بالـ colorbox ، أيضا يجب نسخ هذا المجلد و وضعه في مجلد inc الموجود في قالب twentyeleven .

تفعيل colorbox لعرض الصور :

لكي يعمل الـ colorbox بصورة صحيحة فإن الصورة المراد تكبيرها يجب أن تكون داخل عنصر anchor (أي وسم a).
.
للتوضيح أكثر لاحظ الآتي :
هذه هي طريقة استخدام الـ colorbox :

  $('.x').colorbox();
ويتم تطبيقه على :
<a class="x" href="مسار الصورة الكاملة">
    <img src="مسار الصورة المصغّرة"/>
</a>

لكن في حالتنا فإن الصور موجودة و الروابط موجودة..ونحتاج فقط لمعرفة class وسم الـ anchor الذي يحوي الصور و نضعه مكان ( x. ) الموجود في المثال أعلاه.

ولكن كيف سنعرفه؟
سنقوم بفتح كود الصفحة لمعرفة كيف سنصل للرابط و ذلك باستخدام أدوات تطوير قوقل كروم (أو ما يوازيها مثل Firebug في فايرفوكس أو Dragonfly في أوبرا ).

في نفس صفحة التدوينة سنقوم بالضغط بزر الفأرة الأيسر على أي صورة من المعرض ونختار Inspect Element .
سيظهر في النصف السفلي (أو الأيمن) من الشاشة نافذة تحتوي كود الصفحة الحالية.

الكود المظلل بالأزرق الخفيف هو وسم الصورة التي ضغطنا عليها بالفأرة:

كود الصورة

الآن نرصيد أن نصل للرابط باستخدام الجيكوري ولكن المشكلة هي أن العنصر (الرابط a) الذي يحتوي الصورة (لا يوجد فيه class) و لذلك سنستخدم العنصر الأعلى منه (dt) للوصول إلبه وهو الـ class الموجود فيه هو gallery-icon :
(يتم وضع الكود التالي بعد في ملف header.php قبل وسم إغلاق head مباشرة)

<script>
$(function () {

  $(".gallery-icon a").colorbox(); /* دالة تفعيل الإضافة*/

});
</script>

نقوم بإغلاق أدوات التطوير ثم نقوم بإعادة تحميل الصفحة Refresh وذلك بالضغط على F5 .
ثم نقوم بتجربة المعرض مرة أخرى.. colorbox يعمل!!
معرض صور colorbox - غير مترابط

ولكن هناك مشكلة..كل صورة تعرض في صندوق colorbox على حدة وليست على شكل معرض مترابط ( أزرار التالي و السابق ومفاتيح يمين و يسار في لوحة المفاتيح للتنقل بين الصور ).

يوفر colorbox خيار أن تكون الصور مترابطة ولكن يجب أن يكون جميع وسوم الروابط التي تحوي الصور لها نفس الـ class لذلك سنقوم بإضافة التصنيف cbox يدوياً إلى الروابط :

$(".gallery-icon a").addClass('cbox');/* لتكون الصور مترابطة يجب أن يكون لها نفس التصنيف */

و سنقوم بتعديل طفيف على دالة تفعيل الـ colorbox حيث سنضيف خيار معرض الصور المترابطة كالآتي :

$(".gallery-icon a").colorbox({rel:'cbox'}); /* دالة تفعيل الإضافة*/

ليكون الكود بالكامل هو:

<link rel="stylesheet" href="<?php bloginfo("stylesheet_directory");?>/inc/colorbox.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="<?php bloginfo("stylesheet_directory");?>/js/jquery.colorbox.js"></script>

<script>
$(function () {
    $(".gallery-icon a").addClass('cbox');
    $(".gallery-icon a").colorbox({rel:'cbox'}); /* دالة تفعيل الإضافة*/

});

</script>

ثم نقوم بتجربة المعرض مرة أخرى :
معرض صور colorbox

تعمل بصورة جيدة!!

المصادر:
مكتبة jQuery Colorbox
الصور من Radhia-Dz في فلكر
#

وصلى اللهم وسلم وبارك على سيدنا محمد و على آله و صحبه و من اتبع هداه إلى يوم الدين و الحمدلله رب العالمين.

كيفية عمل صندوق بحث بنكهة آبل – الجزء الثاني

صندوق بحث آبل- الجزء الثاني

بسم الله و الحمد لله و الصلاة و السلام على سيدنا رسول الله –صلى الله عليه و على آله و صحبه و من والاه بإحسان إلى يوم الدين –.

اليوم سنكمل –إن شاء الله- ما بدأناه في الدرس السابق وذلك بتفعيل صندوق البحث ليقوم بالبحث في قاعدة بيانات مجهزّة مسبقا ثم يقوم بعرض النتائج في المتصفح و كل ذلك يتم (أجاكسيّاً).

ما هي الفكرة الأساسية؟

الفكرة ببساطة هي البحث في قاعدة البيانات كلما كتب المستخدم حرفاً في صندوق البحث و عرض النتيجة مباشرة كما في الشكل:

ajax search
كيفية ظهور نتائج البحث

ولكن ما هو الأجاكس Ajax؟

نظرة تاريخية

“ليس له علاقة مع أجاكس أمستردام!”
إن “أجاكس” ليس تقنية في حد ذاته و إنما هو مصطلح يرمز لعدة تقنيات تعمل سوياً.فكلمة أجاكس Ajax  هي اختصار لـ (Asynchronous JavaScript and XML )  استخدم المصطلح أول مرة مطوّر المواقع Jesse James Garret  عام 2005 :

“كنت محتاجاً لشيء أبسط من جملة:

Asynchronous Javascript + CSS + DOM+ and XMLHttpRequest

لكي أستخدمه عند مناقشة هذا المفهوم مع العملاء.”

ما هو….عمليّا؟

بصورة مبدئية.. يكفي القول بأنه عمل طلب ( Http Request ) للخادم (السيرفر) و التعامل مع النتيجة من هذا الطلب بدون إعادة تحميل الصفحة أو الانتقال لصفحة أخرى. والأمثلة على ذلك كثيرة:

أمثلة لتطبيقات أجاكس
قوقل مليئة بتطبيقات الأجاكس... لاحظ أيضا ظهور التحديثات في تويتر.

 

أعتقد أن الصورة اتّضحت نوعاً ما!! الأجاكس موضوع ممتد و ربما سنتطرّق إليه لاحقاً بإذن الله.

الملفات المستخدمة:

 

إضافة إلى الدرس السابق فإن التعديلات شملت تعديل كود ملف الـ HTML و إضافة ملف PHP ليقوم بالبحث في قاعدة البيانات.بالإضافة إلى ملفين أحدها للاتصال و الآخر لفلترة مدخلات المستخدم.

الصفحة الرئيسية التي تحوي صندوق البحث والـ CSS والجافاسكريبت متمثلة في الجيكويري.و ملف البي اتش بي PHP الذي يحوي كود البحث في قاعدة البيانات.

الخطوات:

  1. الــ HTML و ال CSS .
  2. الـجيكويري JQuery والأجاكس Ajax.
  3. البي اتش بي PHP .

 

أولاً : HTML  و CSS :

إلى الأعلى
سنضيف أولا قائمة نتائج البحث مع الصور بمحتوى وهمي Dummy Content قبل بدء أي شيء وذلك لتسهيل تحديد شكل القائمة و موضعها بالنسبة لصندوق البحث عند عرض النتائج لاحقا.ثم سنقوم بحذف المحتوى الوهمي و من ثم إخفائها وذلك بالخاصية display:none في الــ CSS .

محتوى وهمي
تم إضافة بعض المحتوى الوهمي لضبط خصائص و أبعاد صندوق البحث

HTML :

كود الـ HTML لقائمة نتائج  البحث:

 
<div id="menu" class="r25">
 <img id="wait" src="imgs/wait.gif" alt="loading"/>
<input id="search" class="r25" type="text" />
<ul>
  <li> < img src="imgs/products/ipad.png"/ >
<h4>ipad</h4>
All-new thinner, lighter design. Faster A5 chip. FaceTime video calling. With the same 10-hour battery. It's not a tablet, it's iPad.</li>
</ul>
</div>

CSS :

يكتمل الشكل النهائي لقائمة النتائج زائداً مؤشر جاري البحث (الصورة الصغيرة أقصى يسار الصندوق) بإضافة كود الـ CSS .. سنركز على كود قائمة نتائج البحث وصورة (جاري البحث) لأن الباقي تم المرور عليه في الدرس السابق:

 
#results{ /*    تنسيق صندوق البحث   */
width: 360px;
background: #fff;/* #fff=white */
list-style: none;/* منع عرض نقط أو مربعات بجانب كل نتيجة */
text-align: center;
display: none;/* لن يتم عرض صندوق البحث إلا عند الكتابة على صندوق البحث */
position: absolute;
margin-top:0px;
padding: 0px;
border:1px solid #e2e2e2; /* #e2e2e2 = pretty light gray*/
/* the radius */
-moz-border-radius:5px;
-webkit-border-radius: 5px;
border-radius:  5px;
/* the box shadows  إضافة ظل على صندوق البحث...بحيث يكون خفيف الظل */
-moz-box-shadow: 0px 5px 10px black;
-webkit-box-shadow:0px 5px 10px black;
box-shadow: 0px 5px 10px black;
}

#results li{ /* تنسيق نتائج البحث */
height: 64px;
border-bottom: 1px solid #e2e2e2;
padding:5px;
}

#results li:hover{/* تنسيق النتائج عند مرور مؤشر الماوس فوقها */
background-image: -webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#fff)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #e2e2e2, #fff); /* Chrome 10+, Saf5.1+ */
background-image:    -moz-linear-gradient(top, #e2e2e2, #fff); /* FF3.6 */
background-image:     -ms-linear-gradient(top, #e2e2e2, #fff); /* IE10 */
background-image:      -o-linear-gradient(top, #e2e2e2, #fff); /* Opera 11.10+ */
background-image:         linear-gradient(top, #e2e2e2, #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e2e2e2', EndColorStr='#fff'); /* IE6–IE9 */
}
#results li h4,p{
padding: 0px;
margin: 0px;
}

#results li p{/* تنسيق وصف كل منتج من المنتجات */
color:gray;
font-size:12px;
margin-left:5px;
}
#results img{/*  تنسيق الصور المعروضة في نتائج البحث */
float:left;
}

#wait{/*   هذا هو الجزء المتعلق بمؤشر البحث و هي صورة صغيرة متحركة في أقصى يسار صندوق البحث الغرض منها إظهار وجود عملية جارية حالياً */
display: none;/*  لن يتم عرضه حتى تتم الكتابة في صندوق البحث */
position: absolute; /* */
margin-top: 3px;
margin-left: 3px;
}

مهلاً مهلاً من أين يأتي كل هذا الـ CSS!!؟؟

البعض تعوّدت كتابته مباشرة و لكن من أفضل المواقع لتعلّم الــ CSS هو CSS3PLEASE.com قم بتطبيق خصائص الـ CSS مباشرة ثم انسخها إلى صفحتك..الأمر بسيط!!


ثانياً : الجافا سكربت (مكتبة الجيكويري) والأجاكس :

إلى الأعلى

الأجاكس

ميكانيكية العمل ببساطة على التسلسل الآتي:
عند التركيز بالماوس على صندوق البحث يكون محرك الحدث هنا هو الــتركيز focus والذي يفعّل الدالة animate التي تقوم بتحريك الصندوق.وقد قمنا بإعدادها مسبقاً.

كتابة الكلمة المراد البحث عنها :محرك الحدث هنا هو الضغط على لوحة المفاتيح keyup  والذي بدوره ينادي الدالة $.ajax() لتقوم بعملها.

سنقوم الآن بإعداد الجزء من الجافاسكربت الذي يستمع للوحة المفاتيح Keyboard Event .و يقوم بتنفيذ ما بداخله – كود الأجاكس – عند الضغط على لوحة المفاتيح keyUp.

 
//onKeyUp
$('#search').keyup(function(){// سيقوم البحث بتنفيذ الدوال والأوامر التالية عند رفع الأصبع عن أحد ازرار لوحة الفاتيح
  

  if($(this).attr('value')!="")//اختبر ما إذا كان صندوق البحث يحوي نصاً أم لا ..إذا كان يحوي نصاً سيقوم بإظهار مؤشر (جاري البحث) سم يقوم بتنفيذ دالة الأجاكس،أما إذا كان لا يحوي شيئا فسوف يتخطى جميع الكود الآتي و يقوم بعرض رسالة (أكتب للبحث).
  {
  $('#wait').css('display','block');//أظهر مؤشر جاري البحث إذا كان  هنالك محتوى في صندوق البحث
/********************************************/
//يتم وضع كود دالة الأجاكس هنا...بحيث يقوم  بالتنفيذ مع كل ضغطة على لوحة المفاتيح
$.ajax()
{
}
/********************************************/

}//end if
  else 
  $('#results').html("<h4>أكتب للبحث</h4>");//اطبع هذه الرسالة في حالة عدم و جود نص في صندوق البحث

});//end keyup

نستخدم الآن الدالة $.ajax() وكما ذكرنا سنضعه داخل الكود أعلاه:

 
  $.ajax({
                type: 'POST',//طريقة الطلب إما post و get
                url: 'ajax_search.php',//ملف البي اتش بي الذي سيتم مناداته و ارسال مفردة البحث إليه و الذي بدورة سيقوم بالبحث في قاعدة البيانات
                data:'search='+$(this).attr('value'),//المتغيرات التي سيتم ارسالها
        success: function(html) {
      
          $('#results').fadeIn();  // أظهر قائمة النتائج،لاحظ أنها حتى هذه اللحظة لا يحوي شيئاً
        
        if(html=="")//قم بعرض رسالة تفيد عدم وجود نتيجة إذا كانت النتيجة (لا شيء)
          $('#results').html("< h4 >لا توجد نتيجة..حاول استخدام كلمة مفتاحية أخرى</ h4 >");
    
        else 
          $('#results').html(html);// اعرض النتيجة المرسلة من ملف البي اتش بي
        
    
        $('#wait').fadeOut();//قم بإخفاء مؤشّر جاري التحميل بعد استقبال المحتوى من ملف البي اتش بي
                }
        
        });

السطر الأول type يوضح طريقة إرسال البيانات باستخدام GET  أو POST .

السطر الثاني url وفيه يتم تحديد وجهة طلب الأجاكس والملف الموضوع هنا هو ajax_search.php و هو الذي سيبحث في قاعدة البيانات و يقوم بإعادة النتيجة باستخدام الدالة echo .

في السطر الثالث data نقوم بتحديد المتغيرات التي نودّ إرسالها إلى صفحة الـ PHP وقد أرسلنا هنا المتغير search و أسندنا إليه النص الموجود في صندوق البحث.

دالة success يتم تنفيذها حينما يكون طلب الأجاكس ناجحاً.. وظيفتها استقبال البيانات القادمة من ملف الـPHP وعرضها في المتصفح. لاحظ المتغير html : يمثِّل البيانات القادمة من ملف الــPHP.

التحكم في حركة الصندوق :

كان هذا في الدرس السايق..و لكن تم تعديل تنفيذ الدالة Blur لتقوم بإخفاء قائمة النتائج أولاً ثم تصغير صندوق البحث بعد ذلك.

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

  $("#results").fadeOut({ //قم بإخفاء قائمة صندوق البحث
    duration: "slow", // ببطىء
    complete: function(){ //وعند الانتهاء من عمليه الإخفاء..قم بتنفيذ هذه الدالة
  
    $('#search').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 ),//وليكن هذا الحدث خلال فترة 300 ملليثانية
    

     $('#search').css({
      "background-image":"url(imgs/white_magn.png)"
      }),
     

    $('#search').attr("value","");//تنظيف صندوق البحث من أي نص بداخله
  
  
    }//end function
  });//end fadeout

});//end blur



ثالثا البي اتش بي PHP:

إلى الأعلى

طريقة عمل PHP هي كالآتي: نتصل بقاعدة البيانات.. نستقبل الكلمة المراد البحث عنها ثم نتأكد من صلاحيتها.. نقوم بعملية البحث..ثم نرسل البيانات على شكل HTML باستخدام الدالة echo إلى الجيكويري مرة أخرى ليعرض النتائج في صفحة الــ HTML.

(من الجدير بالذكر هنا أن PHP يرسل المتغيرات إلى ملفات الفلاش أيضا عن طريق الدالة echo).

سنقوم في البداية بإنشاء جدول البيانات وتتكون من 3 حقول رئيسية وهي اسم المنتج واسم صورته و وصفه .

 

CREATE TABLE `apple` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_name` varchar(50) CHARACTER SET latin1 NOT NULL,
  `image` varchar(50) CHARACTER SET latin1 NOT NULL,
  `description` text COLLATE latin1_general_ci NOT NULL,
  PRIMARY KEY (`id`)
);

ملف الاتصال connection.php:
والذي يقوم بالاتصال مع قاعدة البيانات.

 
//incs/connection.php
// الاتصال مع قاعدة البيانات
$connection = mysql_connect("localhost","username","password"); 
  if (!$connection) {
    die("  فشل الاتصال: " . mysql_error());
  }

  $db_select = mysql_select_db("db-name",$connection);
  if (!$db_select) {
    die("فشل اختيار قاعدة البيانات : " . mysql_error());
  }


ثم ملف الدوال:
ملف الدوال functions.php
يحوي على الدالة mysql_prep التي تقوم بتنظيف ما أدخله المستخدم وتزيل أي إدخال مشبوه : Code Injection

هذه هي الـsnippet المفضّلة لدي لتنظيف إدخال المستخدم وإعدادها للإستخدام الآمن.
 
//incs/functions.php
  function mysql_prep( $value ) {
    $magic_quotes_active = get_magic_quotes_gpc();
    $new_enough_php = function_exists( "mysql_real_escape_string" ); // i.e. PHP >= v4.3.0
    if( $new_enough_php ) { // PHP v4.3.0 or higher
      // undo any magic quote effects so mysql_real_escape_string can do the work
      if( $magic_quotes_active ) { $value = stripslashes( $value ); }
      $value = mysql_real_escape_string( $value );
    } else { // before PHP v4.3.0
      // if magic quotes aren't already on then add slashes manually
      if( !$magic_quotes_active ) { $value = addslashes( $value ); }
      // if magic quotes are active, then the slashes already exist
    }
    return $value;
  }



أخيرا نعود إلى الملف الـ PHP الرئيسي:
 
  
        header ('Content-type: text/html; charset=utf-8');
  require_once('incs/functions.php');//يتم مناداة الملف  التالي لاستخدام الدالة الموجود فيه
  require_once("incs/connection.php");//يتم مناداة هذا الملف للاتصال بقاعدة البيانات

// The search stuff  

//استقبال المتغير الذي يحوي كلمة البحث و تنظيفه من أي كود إدخال مشبوه
$search=mysql_prep($_POST['search']);

  $data="";
  if($search!="")
  {
          $query = "SELECT * ";
      $query .= "FROM apple ";
      $query .= "WHERE product_name like '%". $search ."%' LIMIT 6";
      
      $result_set = mysql_query($query,$connection) or  die("Database query failed: " . mysql_error());
      
        if(mysql_num_rows ($result_set)>0)//إذا هناك نتائج...
        {    

          while ($row = mysql_fetch_array($result_set)) //التعامل مع نتيجة البحث سطراً سطراً و تقسيم كل سطر إلى مصفوفة للحصول على قيمة كل حقل على حده.
          {
            $image=$row['image'];//تخزين اسم الصورة
            $pname=$row['product_name'];//تخزين اسم المنتج
            $desc=$row['description'];//تخزين الوصف

//يتم إسناد المحتوى الأساسي لقائمة النتائج الصور و اسم المنتج و وصفه في المتغير التالي والذي سيتم إرساله فيما بعد أجاكسيّا ليقوم الجي كويري بعرضه
            $data.="<li><img src='imgs/products/$image' /><h4>$pname</h4><p>$desc</p></li>";
          }//end while loop
          
        
        }//end if
    
      

  
  }//end if
        
  echo $data; // قم بارجاع النتيجة إلى الجيكويري ليقوم بعرضها..إذا كانت تحوي شيئا سيعرضها..و إذا كانت فارغة سيعرض رسالة تفيد بعدم وجود نتيجة..



كان بالإمكان أن وضع كل الكود بي بما فيه ملفي الاتصال connection.php و الدوال functions.php داخل ملف البي اتش بي الرئيسي و لكن من الأفضل فصل المحتوى لعدة أسباب..منها تسهيل إصلاح الأخطاء..التنظيم ،على سبيل المثال قد تحتاج إلى استخدام كود الاتصال أو دالة الإعداد mysql_prep مرة أخرى في ملف آخر..فليس هناك حوجة لإعدادة كتابة الدالة مرة أخرى..عليك فقط مناداة ملف البي اتش بي ثم منادات الدالة المطلوبة…التنظيم شيء جيد 🙂

أشهر أنواع المتصفحات
تمت تجربة هذا الكود في المتصفحات أعلاه.


أتمنى أن يكون الشرح وافياً و الكود واضحاً…في انتظار ردودكم…و دمتم 🙂
وصلى اللهم و سلم و بارك على سيدنا محمد و على آله و صحبه و سلم تسليما كثيرا إلى يوم الدين و الحمدلله رب العالمين

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

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 🙂
جزيل الشكر و التقدير للأخ محمد علي الطيب للمراجعة الفنية و النصائح و الإرشادات المفيدة بحق.

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