السلام عليكم ورحمة الله وبركاته
قبل الدرس مثال جهزته النتيجة النهائية والكود كامل
عشان تفهم التجربة غير القائمة بتلاقي الخلفية تغيرت جرب تحدث الصفحة بتلاقي الخلفية نفسها ماتغيرت ليش كيف الحركة ديه اذا تبغى تعرف تابع الدرس
هذا رابط التجربة :Edit this Fiddle - jsFiddle
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,
اليوم اتيت لكم بشرح localStorage هي تؤدي نفس وظيفة الcookies او session في الphp لكن القيم بدل ماتخزن في السيرفر تخزن في جهاز المستخدم فبيكون استيراد البيانات اخف لانه بتقل العمليات على السيرفر
نبدأ الشرح بسم الله
طيب انا بشرحها بمثال يعني انا بسوي قائمة فيها الوان تكون الألوان للخلفية
--------------------------------------------------------------------------
الخطوة الأولى:-
اول شي نضيف قائمة بالألوان
قبل الدرس مثال جهزته النتيجة النهائية والكود كامل
عشان تفهم التجربة غير القائمة بتلاقي الخلفية تغيرت جرب تحدث الصفحة بتلاقي الخلفية نفسها ماتغيرت ليش كيف الحركة ديه اذا تبغى تعرف تابع الدرس
هذا رابط التجربة :Edit this Fiddle - jsFiddle
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,
اليوم اتيت لكم بشرح localStorage هي تؤدي نفس وظيفة الcookies او session في الphp لكن القيم بدل ماتخزن في السيرفر تخزن في جهاز المستخدم فبيكون استيراد البيانات اخف لانه بتقل العمليات على السيرفر
نبدأ الشرح بسم الله
طيب انا بشرحها بمثال يعني انا بسوي قائمة فيها الوان تكون الألوان للخلفية
--------------------------------------------------------------------------
الخطوة الأولى:-
اول شي نضيف قائمة بالألوان
رمز PHP:
<select class="bg">
<option value="black">أسود</option>
<option value="blue">أزرق</option>
<option value="green">اخضر</option>
</select>
طبعا هذي قائمةمفهومة قائمة وفيها ثلاث الوان أسود و أزرق, و خضر
الخطوة الثانية:-
نجلب قيمة الإختيار بالJquery
نحط الكود ده في الheader اللي هو يفتح الjquery ويسوي العمليات اللي نبغى نسويها في الjquery
رمز PHP:
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script>
$(document).ready(function(){
$('.bg').change(function(){
localStorage.bg=$('.bg').val();
$('body').css('background',localStorage.bg);
});
if(localStorage.bg == 0){$('body').css('background','white');}else{
$('body').css('background',localStorage.bg);
}
});
</script>
طبعا انا بشرح الكود ده
رمز PHP:
$('.bg').change(function(){
localStorage.bg=$('.bg').val();
$('body').css('background',localStorage.bg);
});
هذا يعني اذا تم تغيير القيمة من القائمة اللي اديناها class اسمه bg في كود الhtml اللي فوق
انشئ متغير بإسم localStorage.bg واجعله يساوي الإختيار اللي اخترناه من القائمة
طبعاlocalStorage هي دالة معرفة في اللغة خلينا نقول هي اللي تخزن البيانات في جهاز المستخدم
و.bg هي عبارة عن اي اسم تختاره عشان يتخزن بإسم معين
فبكون المتغير كذا
انشئ متغير بإسم localStorage.bg واجعله يساوي الإختيار اللي اخترناه من القائمة
طبعاlocalStorage هي دالة معرفة في اللغة خلينا نقول هي اللي تخزن البيانات في جهاز المستخدم
و.bg هي عبارة عن اي اسم تختاره عشان يتخزن بإسم معين
فبكون المتغير كذا
رمز PHP:
localStorage.bg//localStorage مايتغير
//.bg غيره بكيفك
//حتى لو انشأت متغير اسمه
//localStorage.ali ='أي شي';
الكود اللي بعده هو
رمز PHP:
if(localStorage.bg == 0){$('body').css('background','white');}else{
$('body').css('background',localStorage.bg);
}
يعني اذا كان المتغير ده ما له قيمة في جهاز المستخدم اجعل الخلفية =بيضاء
واذا كان المتغير ده له قيمة في جهاز المستخدم اجعل الخلفية = القيمة المخزنة
وبيكون الكود كامل كده
واذا كان المتغير ده له قيمة في جهاز المستخدم اجعل الخلفية = القيمة المخزنة
وبيكون الكود كامل كده
رمز PHP:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="HUSSEN AL SHATRI" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script>
$(document).ready(function(){
$('.bg').change(function(){
localStorage.bg=$('.bg').val();
$('body').css('background',localStorage.bg);
});
if(localStorage.bg == 0){$('body').css('background','white');}else{
$('body').css('background',localStorage.bg);
}
});
</script>
<title>Untitled 1</title>
</head>
<body>
<select class="bg">
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</body>
</html> 
2 comments:
: السلام عليكم ورحمه الله وبركاته :
فيك خير ان شاء الله اخ علي :
دروسك دائماً مفيده ولذيذه ، وانا متابع دروسك على اليوتيوب ..
وراح اتابعك هنا .. الى الامام وننتظر منك المزيد والمفيد ..
شكراً لك
رائع جزاك الله خير شرح واضح ومفهوم
بارك الله فيك
إرسال تعليق