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

1. شرح الفكرة
2. طريقة الاستعمال
3. تطوير تطبيق js ليلائم احتياجاتنا
4. ملاحظات اخيرة

مثال : Demo

تفضل من هنا

شرح الفكرة

الفكرة وهي جعل أكثر من شكل للموقع ، أو أكثر من لون لنفس التصميم ، بحيث لكل شكل ملف تنسيق style sheet خاص به ، كذلك يجب التفكير في طريقة لجعل الحق للزائر في تغيير هذا التصميم و الشكل كما يريد هو ، مع جعل واحد افتراضي ، هنا يتوجب علينا أن نعمل ملف defeault و الملفات الباقية تكون ثانوية لا يتم تفعيلها إلا عند اختيارها

شرح الاستعمال

كما رأيت في صفحة المثال ، أنا عملت كل الخيارات التي يمكن أن نعرض بها الاختيارات ليتم تغيير ملفات الاستايل من طرف الزائر :

• قائمة اختيارات من نوع radio
• روابط تضم أسماء الاستايلات
• قائمة صور كل صورة تدل على شكل التصميم
• قائمة select

عندي في المثال 3 أشكال ، الرمادي فيها هو الافتراضي ، و الأزرق و الأسود ثانويين ، إذن لابد من عمل ملف افتراضي و ملفين ثانويين ، تابع :

<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="default.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="bleu" href="1.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="noir" href="2.css" />

الملف style به تنسيقات ستظهر في جميع التصاميم ، اما default.css فهذا خاص بالتنسيقات الخاصة بالشكل الافتراضي ولكنها ستتغير في التصاميم الأخرى
الملفين 1.css و 2.css خاصين بالأشكال الفرعية .
لاحظ انني عملت في الملفات الافتراضية rel=”stylesheet” و في الفرعية rel=”alternate stylesheet” ، أضفت alternate وهي تعني مناوب ، يعني عند استدعائه سينوب عن الافتراضي
راجع هذا الدرس في الاستدعاءات حتى ستوعب كل شيء الى هنا .
لا تنس أنني اعطيت لكل ملف title خاص به ، تذكره جيدا ، لأنك ستسعمله كمتغير .
ستحتاج كذلك ملف التطبيق الخاص ، يتم استدعاؤه كما العادة في وسم head

<script src="js/styleswitch.js" type="text/javascript"></script>

يمكنك تحميل ملف js من هنا
الآن لم يبق سوى طرق عرض الاختيارت :

• قائمة عناوين من نوع radio

  <form id="switchform">
  	<input type="radio" name="choice" value="none" onclick="chooseStyle(this.value, 60)" />الافتراضي<br />
  	<input type="radio" name="choice" value="bleu" onclick="chooseStyle(this.value, 60)" />الأزرق<br />
  	<input type="radio" name="choice" value="noir" onclick="chooseStyle(this.value, 60)" />الأسود
  </form>

  فورم عادي به خيارات من نوع radio لكن اعطيتها متغير choise ، و عند الضغط لتغيير اخيار سنعمل على الدالة chooseStyle() ندخل عليها اسم الاستايل و وهو الذي أشرنا اليه في الهيد بـ title ، و كذلك الوقت الذي سيبقى هذا الاستايل في جهاز هذا الزائر ، ما لم يتم مسح الكوكيز ، بالأيام ، 60 يوم .

• روابط عادية بها أسماء الخيارات :

  <a href="javascript:chooseStyle('none', 60)">الافتراضي</a><br />
  <a href="javascript:chooseStyle('bleu', 60)">الأزرق</a><br />
  <a href="javascript:chooseStyle('noir', 60)">الأسود</a>

  نفس العمل ، على نفس الدالة ولكن على روابط عادية

• صور تدل على نوع الاستايل :
  و هي مثل طريقة الروابط اعلاه

  <a href="javascript:chooseStyle('none', 60)" ><img src="images/8.png" alt="الافتراضي" /></a>    
  <a href="javascript:chooseStyle('bleu', 60)"><img src="images/9.png" alt="الأزرق" /></a>     
  <a href="javascript:chooseStyle('noir', 60)"><img src="images/7.png" alt="الأسود" /></a>

  و أدخلت تأثير على الصور بالتالي :

  a img {
  	border: 1px solid transparent;
  }
  a img:hover {
  	border: 1px solid #bbb;
  }

  لكن لم border: 1px solid transparent; و ليس borde:none;
  حتى لا أحصل على تحرك للصور عند تمرير المؤشر عليها ، لتنتقل من border = 0 الى border = 1

• خيارات option في قائمة select

  <form id="switchform">
  	<select name="switchcontrol" size="1" onchange="chooseStyle(this.options[this.selectedIndex].value, 60)">
  	<option value="none" selected="selected">الافتراضي</option>
  	<option value="bleu">الأزرق</option>
  	<option value="noir">الأسود</option>
  	</select>
  </form>

  هنا تتغير طريقة استعمال الدالة الى طريقة ديناميكية ، بحيث نشترط عليه كلما تم التغيير في اختيار العنوان في القائمة ، أن يأخذ الـ value منها و يدخلها مكان title في الدالة ، و هي ما قصدناه بـ this.options[this.selectedIndex].value

تطوير التطبيق js

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

• اضافة :

  var manual_or_random="manual"

  هذا المتغير تم عمله لتحديد نوع التصميم عند كل فتح ، هل هو عشوائي او يتم تحديده من طرف الزائر ، طبعا انا جعلته افتراضيا manual لأن هدفنا جعل الاختيار للزائر و التحكم في الشكل الذي سيرتاح له ، يمكنكـ جعل عوضها random حيث عند الفتح سيتم اختيار شكل عشوائي من الاشكال المتوفرة عندك

• المتغير :

  var randomsetting="3 days"

  و الذي سيأخذ 3 قيم ، يمكنك جعل أيما تريد منها افتراضيا ، وظيفة هذا المتغير هو تحميل الصفحة ، حيث يتم تحديد الوقت متى يتم تحميلها و اعادة تحميلها :

  • x days أي عدد معين من الأيام ، أي بعد عدد x من الأيام سيعيد التطبيق تحميل ملفات css
  • “eachtime” أي كل الوقت ، دائما ، في كل تحديث للصفحة يتم اعادة تحميل ملفات css ، وهذا سيسبب بطأ في مشروعك
  • “sessiononly” هذه خاصة بالجلسات session ، أي بعد كل غلق و فتح للجلسة ، يعيد التطبيق تحميل ملفات التنسيق من جديد ، والجلسة مثلا اغلاق و فتح المتصفح ، وهكذا .
• في حالة ما كنت تشتغل على متغيرات خاصة بكـ و كنت ستستعمل radio ، فلن تضطر لتسميتها بما سميته انا ، ، فقط أضف التالي في كود head و اعط متغيراتك اماكنها و اشتغل :

  <script type="text/javascript">
  window.onload=function(){
  var formref=document.getElementById("switchform")
  indicateSelected(formref.choice)
  }
  </script>

  بحيث switchform هو id الـ form ، و choice هو المتغير أو name لكل input من نوع radio

ما بقي من ملف js فقط بعض الدوال الشرطية الخاصة بالكويكز يمكنك مراجعتها و الاستفادة منها

ملاحظات اخيرة

• لا تستعمل eachtime في randomsetting لأنها ستبطئ مشروعك .
• استعمل manual عوض random في manual_or_random ، لأن المقصود من العمل ، هو جعل التحكم للزائر و ليس للاختيار العشوائي
• و اخيرا هذا مثال فقط ، يمكنك أن تبدع من الأفكار و الاضافات ماتريد ، فزائرك لابد ان يحترم ، فبه يقوم موقعك ، ولو عملت على راحته ، قد يجلب لك زائرا آخر يكون لموقعم مخلصا
• إذا أردت أن تجعل الاختلاف بين الأشكال المطروحة في موقعك فقط في الأولوان ، و الشكل يبقى نفسه ، لا داعي لتكرر غالب أوامر css في كل ملف ، إنما اجعل ملفا واحدا للأوامر المشتركة بين كل الملفات ، و ما يتم الاختلاف فيه اجعله منفردا كل في ملفه
• يمكنك أن تجعل لكل شكل تصميم متغير عن الآخر جذريا ، بشرط واحد ، أن يكون تصميمك معتمد على div و ليس على الجداول table ، وتكون كل الخصائص في ملف خارجي و ليس داخل style=”"

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

هذه التدوينة نُشرت في الأحد, 6 سبتمبر, 2009 عند 10:18 م و مصنفة تحت تصنيف JavaScript, css , xhtml. يمكنك متابعة أي تعليقات عبر رابط RSS 2.0. يمكنك ترك تعليق, أو تعقيب من مدونتك.
الوسوم :css, stylesheet, تطبيق, شكل