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

كتب يوم : 15 يونيو 2013 - تصنيف :أخبارتصميم مواقع انترنتجي كويري jquery
 
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 لتتأكد من عملها بكفاءة
 

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




أخبارتصميم مواقع انترنتجي كويري jquery


مواضيع قد تعجبك



تقرير: شاومي تجمع بيانات التصفح من مستخدمي هواتفها

البوابة العربية للأخبار التقنية البوابة العربية للأخبار التقنية قال باحث أمني من موقع (فوربس)...

أخبارالبوابة العربية للأخباربوابات أخبار تقنية تابع القراءة
Vivo تتخطى سامسونج في شحنات الهواتف الذكية في السوق الهندي

هذا الموضوع Vivo تتخطى سامسونج في شحنات الهواتف الذكية في السوق الهندي ظهر على...

unlimittechأخباربوابات أخبار تقنية تابع القراءة
العب Mafia III مجانًا الآن على Steam وXbox One

إن كنت من محبي سلسلة ألعاب الأكشن الشهيرة Mafia، وتود تجربة الجزء الثالث Mafia...

أخباربوابات أخبار تقنيةعرب هاردوير تابع القراءة