• 0
bulbul

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

سؤال

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

في هذا المقالة سوف اتحدث عن موضوع بسيط وهو كيفية التبديل بين ملفين 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[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].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[i].rel.indexOf( "stylesheet" ) != -1) && link_tag[i].title)
{
link_tag[i].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 .

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

5

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

5 إجابة على هذا السؤال .

  • 0

شكرا على الإفادة smile.gif

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

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

2

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

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

تم تعديل بواسطه X-File
حذف كلمة مكررة
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

اخي الغالي ..

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

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

وأنا شخصياً استعمل هذه السطور القليلة للتبديل بين عدد لا نهائي من ملفات الاستايل (وليس 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[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

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

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

من فضلك سجل دخول لتتمكن من التعليق

ستتمكن من اضافه تعليقات بعد التسجيل



سجل دخولك الان

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .