كيفية عمل قالب متعدد الألوان ( HTML – CSS – JQUERY )

كتب يوم : 15 يونيو 2013 - تصنيف : تصميم مواقع انترنت

multi-color-templates

السلام عليكم زواري الكرام

أدون اليوم عن كيفية عمل قالب موقع متعدد الألوان بلغات الـ html + css + jquery

ويكفي أن يكون لديك معرفة بسيطة لتتعرف على الأكواد التي سنذكرها تباعاً

أولاً / لماذا قالب متعدد الألوان :

القالب متعدد الألوان يتيح لزوار المواقع اختيار الثيم أو ألوان العرض التي تناسبهم ويعطي موقعك ميزة تنافسية مقارنة بالمواقع الأخرى في نفس مجالك .

ثانياً / الأكواد والشرح

تحتاج أولا أن تضمن ملف الجي كويري إلى موقع في الهيدر بين وسمي الهيد <head></head> باستخدام الكود التالي :

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

ثانيا تحتاج إلى تضمين ملف جي كوير الخاص بحفظ الكووكيز cookie وفائدته تذكر إعدادات المستخدم لقالب الألوان الذي قام باختياره

تخيل معي أن الزائر يقوم بتغيير قالب الألوان في كل صفحة يقم بزيارتها …. ممل فعلاً …أليس كذلك ؟

قم بتضمين الملف بعد ملف الجي كويري عن طريق الكود التالي :

<script type="text/javascript" src="jquery.cookie.js" language="javascript"></script>

قم بتحميل الملف في آخر التدوينة

نقم الآن بعمل روابط للتنقل بين قوالب الألوان ، ولنفترض انها روابط ولدينا ملفين ستايل style1.css & style2.css

يكون كود الروابط لقوالب الألوان كالتالي

<ul id="nav">
<li><a href="#" rel="style1.css" class="yellow"></a></li>
<li><a href="#" rel="style2.css" class="blue"></a></li>
</ul>

هل لاحظت ان روابط القوالب موجده في rel وليس href  ? تنبه لذلك

الآن كود الجي كويري الخاص بالنقل بين القالبين عند الضغط على الرابط داخل القائمة التي تحمل آي دي ID = nav

<script type="text/javascript" >
// الكود التالي هو يتأكد ما إن كان المستخدم اختار قالب ألوان بالفعل أم لا
// لو كان المستخدم اختار قالب يقم الكود بتحميله
if($.cookie("css")) {
$("link").attr("href",$.cookie("css"));
}
// الكود التالي هو المسؤول عن تغيير ملفات قالب الألوان حال الضغط أحد انظمة الألوان المتاحة
$(document).ready(function() {
// يمكنك تغيير #nav li a بالمسار المخصص لديك للتنقل بين قوالب الألوان
$("#nav li a").click(function() {
$("link").attr("href",$(this).attr(‘rel’));
// 365 تعني أن يحتفظ الكوكيز باختيار المستخدم لمد عام كامل
$.cookie("css",$(this).attr(‘rel’), {expires: 365, path: ‘/’ });
return false;
});
});
</ script >

ملحوظة هامة : يفضل تجربة الأكواد وروابط الجافا على سيفر محلي مثل xampp أو wamp لتتأكد من عملها بكفاءة

 

أعجبتك التدوينة ، أترك تعليق 🙂