![شروحات jquery ، شرح كيفية عمل تغيير لاستايل والوان موقعك ب jquery [الدرس الخامس] Heqder10](https://i.servimg.com/u/f25/15/25/65/76/heqder10.jpg)
![شروحات jquery ، شرح كيفية عمل تغيير لاستايل والوان موقعك ب jquery [الدرس الخامس] Empty](https://2img.net/i/empty.gif)
نستكمل معكم أعضاء مطور الكرام دروس دورتنا, وفى هذا الدرس سوف نتعرف
على واحد من الحركات المهمه والمستخدمه بكثره فى كثير من المواقع وهى خاصية
تغيير الاستايل بأكثر من لون وبأكثر من شكل, وأنا فى هذا الدرس سوف أخذ
أفضل وأسهل الطرق لتطبيقها ان شاء الله ......
أولا: خلونا نشوف مثال عملى للناتج النهائى لهذا الدرس
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
تمام, بعد أن شاهدنا المثال العملى للتشويق بمتعة هذا الدرس,
دعنا نشوف خطة الدرس اللى راح نمشى وراها حتى نطبق هذا الدرس
بشكل ممتاز ومتقن ان شاء الله
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
نبدأ خطوات تنفيذ الدرس:
1-ملف index.php :
قبل الشرح نعرض لكم الكود كاملا لهذا الملف:
كود:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<**** ************"Content-Type" content="text/html; charset=utf-8" />
<title>مثال عملى لدالة تعدد الأستايلات</title>
<?php
if(!empty($_COOKIE['style'])) $style = $_COOKIE['style'];
else $style = 'day';
?>
<link id="stylesheet" type="text/css" href="css/<?php echo $style ?>.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/styleswitcher.jquery.js"></script>
</head>
<body>
<div id="container">
<h1>مثال عملى لدالة تعدد الاستايلات</h1>
<div id="banner"></div>
<div id="content">
<div id="style-switcher">
<h4 >:تغيير الأستايل</h4>
<ul>
<li id="day"><a href="style-switcher.php?style=day">نـهـار</a></li>
<li id="night"><a href="style-switcher.php?style=night">لــيــل</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#style-switcher a').styleSwitcher();
</script>
</body>
</html>
شرح الملف:
1-اولا: فيه جزئية php فى الملف, وحتى تفهمها عليك ان تكون على خلفية بسيطه بالphp:
الكود هو:
كود:
<?php
if(!empty($_COOKIE['style'])) $style = $_COOKIE['style'];
else $style = 'day';
?>
هذا الكود وظيفته انه سيبحث عن الكوكيز اللى اسمه style اللى راح نسويه فى الملف اللى راح اشرحه فى الخطوات القادمه, بحيث اذا وجده سوف يتم تعيين قيمته على جسب المتغير style, بحيث سيظهر ما تم جلبه سواء كان الكوكيز الخاص بالنهار day , او بالليل night
وفى حال لم يتم ايجاد الكوكيز , سوف يتم ارفاق المتغير للقيمة الافتراضيه day بحيث تكون هى القيمة الافتراضية للكوكيز, بحيث انه الظهور الافتراضى
للصفحة هو النهار وليس الليل
2-ستلاحظ انه فى الاشاره لملف css ,سوف تجد الكود الاتى:
كود:
<link id="stylesheet" type="text/css" href="css/<?php echo $style ?>.css" rel="stylesheet" />
ولو تلاحظ ان href للاشاره لاسم ملف css, يعتمد على قيمه المتغير style ,
بحيث اذا كانت قيمته day, فسوف يتم تطبيق ملف css الخاص بالنهار day , واذا لا سوف يتم اختيار الملف الاخر وهو night الخاص بالليل
3-نكمل بقية الكود , وستجده مفهوم , الى ان نصل للازار الخاصه بتغيير
الاستايل:
كود:
<li id="day"><a href="style-switcher.php?style=day">نـهـار</a></li>
<li id="night"><a href="style-switcher.php?style=night">لــيــل</a></li>
ستلاحظ ان الرابط href لكل زر يعتمد أيضا على قيمة المتغير syle ,بحيث
سيتم جلب وتنفيذ الكوكيز الخاص بكل زر سواء كان بالنهار لو كان للزر الخاص بالنهار, او بالليل لو كان للزر الخاص بالليل
4-لو نزلنا لاخر الكود سوف نجد كود jquery:
كود:
<script type="text/javascript">
$('#style-switcher a').styleSwitcher();
</script>
وهذا الكود وظيفته التغيير بين الاستايلين النهار والليل, اعتمادا على jquery ,بحيث يكون هناك لحظة تحميل عند الانتقال بين استايل لاخر...
2- ملفات css:
-عندنا ملفين :
-ملف day.css : الخاص بكود css, لاستايل النهار
-ملف night.css :الخاص بكود css, لاستايل الليل
طبعا كودهم موجودين بداخلهم , ويمكنهم استخدامها مباشرة,فلا حاجه
لشرحهم, لان شرحهم سوف يستغرق وقت طويل , وسننسى ما أريد اخراجه
لكم من هذا الدرس......
3-ملف style-switcher.php : وهذا هو ملف php, الذى هو يعتبر نواة
طريقة التغيير بين الاستايلات:
وهذا هو كوده:
كود:
<?php
$style = $_GET['style'];
setcookie("style", $style, time()+604800);
if(isset($_GET['js'])) {
echo $style;
} else {
header("Location: ".$_SERVER['HTTP_REFERER']);
}
?>
الكود بكل بساطه لو عندك خلفية ب php, اولا قمنا بعمل متغير style ,والذى سيجلب القيمة الخاصه بالاستايل فى المتصفح ,عند الضغط على الزر
الخاص بتغيير الاستايل سواء كان بالنهار او بالليل
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
ثم سنقوم بعد ذلك بعمل كوكيز, ليحفظ هذه القيمه, وسنحدد مدة قيمة
الكوكيز لمدة أسبوع اى حوالى 604800 ثانيه, بحيث كل مره تدخل على هذه
الصفحة سوف تجد نفس الاستايل اللى اخترته,ثم بعد ذلك سنتأكد ما اذا تم
تحديد القيمة js وهى الخاصة بكود jquery, والذى عن طريقه ستتم طريقة
الانتقال اللحظى بين لحظة تغيير الاستايل لاخر....
واذا لم يتم تنفيذ ذلك, يتم العوده للصفحة الرئيسية مره أخرى
4- ملفات js: وهم عباره عن ملفين
-ملف jquery.js : وهو خاص بمكتبة jquery
-ملف styleswitcher.jquery.js : وهو خاص بكود
jquery,اللى راح ينفذ لحظة الانتقال بين استايل لاخر
طبعا الكود الخاص بالتنفيذ سوف يكون صعب عليا أشرحه , لان أنا نفسى لاأستطيع كتابته , لذلك سنكتفى بأن نستخدمه هيك فى اى صفحة
5-اخير مجلد الصورimg
بهيك يكون الدرس انتهى,
ملفات الدرس مرفقة بالموضوع.........
بالتوفيق........
