كيفية التبديل بين ملفي نمط عن طريق وسائل تخزين المستعرض

#111 سبتمبر 2011 في 01:15 صاحب الموضوع

بسم الله الرحمن الرحيم

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

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

لتطبيق ذلك نلجأ إلى عدة طرق :

الأولى وهي طريقة تعتمد على المخدم وذلك بشرط أن يكون المستخدم مسجل ضمن الموقع ومربوط كل مستخدم مع ملف نمط (CSS file) بحيث عند دخول المستخدم يتم التبديل بين الملفات إلى الملف المطلوب سأتطرق في موضوع قادم لهذه الطريقة ان شاء الله .

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

الطريقة الثالثة هي طريقة بسيطة تعتمد بشكل أساسي على طرف الزبون واستخدام ( JavaScript + CSS+ cookie ) حيث سيتم التحقق عند كل عملية دخول للموقع من قيمة معينة موجودة ضمن ال cookie ومن ثم تطبيق النمط الذي يستخدمه هذا الزائر وهنا لا يلزم لان يكون الزائر مسجلا مسبقا لدى الموقع وسيحقق هذا مرونة للزائر لضبط الموقع على التنسيق الذي يريد .

الطريقة الرابعة وتعتمد بشكل عام نفس مبدا الطريقة الثالثة ولكن تختلف باسلوب تخزين قيمة شرط معيين ليقوم بالتبديل بين ملفين انماط وتعتمد في هذا المبدا localstorage

الان سأقوم بشرح الطريقتين الثالثة والرابعة :

اولا المشترك بين الطريقتين هو ملف ال html وملفي CSS

ملف ال html لا يهمنا محتواه وانما يهمنا بشكل اساسي ان يكون به بعض التقسيمات لتوضح الفكرة المرجوة .

Page.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" >
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>css change</title>
  </head>
  <body>
  <div id="header">
  Header</div>
  <div id="body">
  </div>
  <div id="footer" class="style1"> choose style   
  <a href="#" style="color:#000066;" >Blue</a>
  <a href="#" style="color:#CC3300;" >Orange</a>
  </div>
  </body>
  </html>

ايضا نقوم بتصميم ملفين CSS كل واحد بتنسيقات مختلفة

arorange.css

body{
              	background-color:black;
              	margin:0px;
  }
  #header{
              	height:200px;
              	background-color:orange;
              	color:white;
              	text-align:center;
              	font-size:62px;
              	vertical-align:middle;
  }
  #body{
  height:500px;
  color:#FFFFCC;
  background-color:#999966;
  }
    #footer{
              	height:50px;
              	background-color:orange;
              	color:white;
              	text-align:center;
              	font-size:25px;
              	vertical-align:middle;
  }

enblue.css

body{
              	background-color:black;
              	margin:0px;
  }
  #header{
              	height:200px;
              	background-color:blue;
              	color:white;
              	text-align:center;
              	font-size:62px;
              	vertical-align:middle;
  }
  #body{
  height:500px;
  color:#FFFFCC;
  background-color:#999966;
  }

  #footer{
              	height:50px;
              	background-color:blue;
              	color:white;
              	text-align:center;
              	font-size:25px;
              	vertical-align:middle;
  }

الان نقوم بالتصريح عن ملفي ال css بصفحة ال html بعد وسم ال title

<link rel="stylesheet" type="text/css" title="Arabic orange" id="styleorange" disabled="true"
  	href="arorange.css" />
  <link rel="stylesheet" type="text/css" title="English blue" id="styleblue"  disabled="true"
  href="enblue.css"  />

طبعا وضعت الخاصية disabled بقيمة true اي التنسيقين غير مفعلان لذلك يجب تفعيل احدهما في حدث تحميل الصفحة .

الطريقة التي تعتمد على الCookie :

لكي نقوم بإسناد قيمة والحصول على قيمة يتوجب عليك معرف التعامل مع ال cookie بكل الاحوال توفر العديد من المكتبات طرقا للتعامل مع ال cookie أو أن نقوم بانشاء ذلك للتابعين setCookie و getCookie

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies.substr(0,ARRcookies.indexOf("="));
  y=ARRcookies.substr(ARRcookies.indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
	{
	return unescape(y);
	}
  }
}

  function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

وبالاخر أقوم بإنشاء تابع لتخزين قيمة التنسيق المستخدم مع تفعيل ذلك التنسيق :

function setstylecookie(cssstyle){
              	setCookie("cssstyle",cssstyle,30);
              	if(cssstyle=="blue")
              	{
              	document.getElementById("styleorange").disabled=true;
              	document.getElementById("styleblue").disabled=false;
              	}
              	else if(cssstyle=="orange")
              	{
              	document.getElementById("styleorange").disabled=false;
              	document.getElementById("styleblue").disabled=true;
              	}
  }

ايضا في حدث تحميل الصفحة نقوم بالتحقق من القيمة المخزنة بالCookie ومن ثم تطبيق التنسيق وفق القيمة المخزنة

window.onload=function(){
              	var style=getCookie("cssstyle");
              	if(style=="blue")
              	{
              	document.getElementById("styleblue").disabled=false;
              	document.getElementById("styleorange").disabled=true;
              	}
              	else if(style=="orange")
              	{
              	document.getElementById("styleorange").disabled=false;
              	document.getElementById("styleblue").disabled=true;
              	}
              	else
              	{
              	document.getElementById("styleorange").disabled=false;
              	}
  }

الطريقة التي تعتمد على وسيط التخزين localStorage :

لسنا بحاجة الا الى تابع سوا تابع التحقق وتغيير التنسيق setstylelocalstorage

function setstylelocalstorage(cssstyle){
              	localStorage["style"]=cssstyle;
              	if(cssstyle=="blue")
              	{
              	document.getElementById("styleorange").disabled=true;
              	document.getElementById("styleblue").disabled=false;
              	}
              	else if(cssstyle=="orange")
              	{
              	document.getElementById("styleorange").disabled=false;
              	document.getElementById("styleblue").disabled=true;
              	}
  }

وفي حدث التحميل :

window.onload=function(){
              	var style=localStorage["style"];
              	if(style=="blue")
              	{
              	document.getElementById("styleblue").disabled=false;
              	document.getElementById("styleorange").disabled=true;
              	}
              	else if(style=="orange")
              	{
              	document.getElementById("styleorange").disabled=false;
              	document.getElementById("styleblue").disabled=true;
              	}
              	else
              	{
              	document.getElementById("styleorange").disabled=false;
              	}
  }

مع تغيير التابع عند النقر

  <a href="#" style="color:#000066;" onclick="setstylelocalstorage('blue')">Blue</a>
  <a href="#" style="color:#CC3300;" onclick="setstylelocalstorage('orange')">Orange</a>

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

يلزمنا تابع لعمل ما يلي :

ايقاف تفعيل كل ملفات ال CSS وتفعيل الملف المطلوب كما في الكود التالي :

<script type="text/javascript">
  <!--
  function switchfile(cssstyle)
  {
	var i, link_tag ;
	for (i = 0, link_tag = document.getElementsByTagName("link") ;
  	i < link_tag.length ; i++ ) {
  	if ((link_tag.rel.indexOf( "stylesheet" ) != -1) && link_tag.title)
   	{
    	link_tag.disabled = true ;
  	}
	}
	document.getElementById(cssstyle).disabled=false;
  }

  function setstylelocalstorage(cssstyle){
              	localStorage["style"]=cssstyle;
              	switchfile(cssstyle);

  }
  window.onload=function(){
              	var style=localStorage["style"];
              	switchfile(style);
  }
  //-->
  </script>

مع تمرير قيمة الcssstyle كقيمة الid لعنصر ال Link .

المقالة بدون كود حتى يتم التجريب :)

In bad state

#211 سبتمبر 2011 في 15:04

شكرا على الإفادة

لكن يبدو لي من الأفضل القيام بهذا الأمر من جانب السيرفر، لأن onload يتم المناداة عليها بعد رسم الصفحة، وعند تغيير ال style يجب إعادة رسم الصفحة من الأول لتطبيقه، وهذا يمكن أن يؤثر على ال performance، خصوصا إذا كانت الصفحة تحتوي على عناصر كثيرة.

طبعا لم أقم بمقارنة، لكن من منظور نظري فقط

#311 سبتمبر 2011 في 19:49

العفو صديقي :)

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

تم تعديل هذه المشاركة بواسطة X-File في 12 سبتمبر 2011 في 02:49 — السبب: حذف كلمة مكررة

In bad state

#412 سبتمبر 2011 في 02:25

جزاك الله الف خير اخي الكريم على هذا الدرس الرائع

جعله الله في ميزان حسناتك ان شاء الله

M.B.O

Mohamed Bin Othman

إبن المكلا

يابني البشر ماذا فعلتم بالبشر !!

إسـألـنـي

#512 سبتمبر 2011 في 02:54

اخي الغالي ..

تميزت وأبدعت .,,

أشكرك من أعماق قلبي

#612 سبتمبر 2011 في 23:40

شكرا لك اخي الكريم

وأنا شخصياً استعمل هذه السطور القليلة للتبديل بين عدد لا نهائي من ملفات الاستايل (وليس 2 فقط)

ولا تحتاج إضافة جميع ملفات css إلى الصفحة

ويتم تحميل الصفحة لأول مرة بالاستايل الافتراضي

وهذا هو الكود

جافا سكريبت

  var s = GetCookie("scl_th");
  document.write('<link id="stylesheet" rel="stylesheet" href="shkl/' + ( (s == null) ? 'green' : s ) + '.css" type="text/css" />');
function setTheme(name) {
  SetCookie("scl_th", name);
  document.getElementById("stylesheet").href="shkl/"+name+".css";
  }
function SetCookie(name,value) {
		var date = new Date();
		date.setTime(date.getTime()+(265*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	document.cookie = name+"="+value+expires+"; path=/";
}
function GetCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca;
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

أتمنى أن يعجبكم

اللهم علمنا ما ينفعنا وانفعنا بما علمتنا

التغير هو القانون الدائم للحياة.ودوام الحال من المحال

فلماذا لا نتغير بإرادتنا إلى ما نريد؟ قبل أن تغيرنا الحياة مجبرين إلى ما لا نريد؟

موقعي

كيفية التبديل بين ملفي نمط عن طريق وسائل تخزين المستعرض

مواضيع مشابهة

عدد الزوار حالياً