الرئيسيةالرئيسية  اليوميةاليومية  س .و .جس .و .ج  بحـثبحـث  الأعضاءالأعضاء  المجموعاتالمجموعات  التسجيلالتسجيل  دخول  

شاطر | 
 

 التنقل بين الصفحات بدون تحديث الصفحة حصريا لمنتديات معاذ بحر

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
akheel
نـائب الإدارة
نـائب الإدارة
avatar

الجنس : ذكر
مشاركاتي : 563
نقاطي : 16075
ولدت بتاريخ : 24/08/1997
سجلت بتاريخ : 14/06/2010
عمري : 19
مكان السكن : فلسطين

مُساهمةموضوع: التنقل بين الصفحات بدون تحديث الصفحة حصريا لمنتديات معاذ بحر    21/11/2012, 03:02

اليوم اتي لكم بشرح حصري لمنتديات معاذ بحر 069

وهو كيفية التنقل بين الصفحات بدون تحديث الصفحة 059

لتحميل كافة الملفات
من المرفقات او من هنا

http://www.gulfup.com/?xZyHzc

نضع بين ايديكم مثال على عمل الكود من هنا

http://maaz-b.forummi.com/h4-page
تابعوا الشرح

اولا نبدا في انشاء ترميز للصفحة (خطوة غير اجبارية (اختيارية)) عبر وضع هذا الكود في منطقة ال head

الكود:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

نبدأ بجلب ملفات الجافا سكريبت وربطها بالصفحة نقو بوضع الكود في منطقة ال head
عن طريق هذا الكود

الكود:
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.swipeplanes-1.2.min.js"></script>

الان نقوم ب وضع هذا الكود وهو جافا ونضعه في منطقة ال head

الكود:
<script>
         $(document).ready(function(){
            $('.myslider1').swipePlanes();
            $('.myslider2').swipePlanes();
         });
      </script>

الان مقوم بوضع اكواد السي اس اس في منطقة ال head او يمكنك وضعها في ملف سي اس اس منفصل
لكن عند وضعها في ملف سي اس اس منفصل يجب الحرص على ربط ال ملف في الصفحة عن طريق هذا الكود مع التعديلات اللازمة

الكود:
<link rel="stylesheet" href="مسار ملف السي اس اس" type="text/css" media="screen" />

وعند وضعها في الصفحة نفسها نقوم بوضع هذا المكود في منطقة ال head

الكود:
<style>
         .myslider1{
            width: 500px;
            height: 150px;
            border: 1px solid #CCC;
         }
         
         .slide1{
            width: 200px;
            height: 150px;
            background: #E8E8E8;
         }
         
         
         .myslider2{
            width: 500px;
            height: 250px;
            border: 1px solid #CCC;
         }
         
         .slide2{
            width: 500px;
            height: 250px;
            background: #E8E8E8;
         }
      </style>

الان انتهينا من منطقة ال head

الان نبدا في منقطة ال body
اذا تريد ان تجعل منطقة التنقل صغيرة استعمل هذا الكود
نقوم باستبدال Slide 1 الى المحتوى الذي تريد وضعهة في الشريحة الاولى او الصفحة الاولى و Slide 2 الصفحة الثانية وهكذا

الكود:
   <div class="myslider1">
         <div>
            <div class="slide1">Slide 1</div>
            <div class="slide1">Slide 2</div>
            <div class="slide1">Slide 3</div>
            <div class="slide1">Slide 4</div>
         </div>
      </div>

وهذه صور لعمل للكود


الان اذا تريد ان تكون المنطقة كبيرة نستعمل هذا الكود

الكود:
      <div class="myslider2">
         <div>
            <div class="slide2">Slide 1</div>
            <div class="slide2">Slide 2</div>
            <div class="slide2">Slide 3</div>
            <div class="slide2">Slide 4</div>
         </div>
      </div>

وهذه صورة لعمل الكود



كود الصفحة كاملة

الكود:
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <script src="jquery-1.8.2.min.js"></script>
      <script src="jquery.swipeplanes-1.2.min.js"></script>
      <title>التنقل بين الصفحات بدون تحديث الصفحة شرح حصري لمنتديات معاذ بحر</title>
      
      <script>
         $(document).ready(function(){
            $('.myslider1').swipePlanes();
            $('.myslider2').swipePlanes();
         });
      </script>
      
      <style>
         .myslider1{
            width: 500px;
            height: 150px;
            border: 1px solid #CCC;
         }
         
         .slide1{
            width: 200px;
            height: 150px;
            background: #E8E8E8;
         }
         
         
         .myslider2{
            width: 500px;
            height: 250px;
            border: 1px solid #CCC;
         }
         
         .slide2{
            width: 500px;
            height: 250px;
            background: #E8E8E8;
         }
      </style>
   </head>
   <body>
      <h2>التنقل بين الصفحات بدون تحديث الصفحة شرح حصري لمنتديات معاذ بحر </h2>
      <h4>:::صغير :::جميع الحقوق محفوظة لمنتديات معاذ بحر:::</h4>
      <div class="myslider1">
         <div>
            <div class="slide1">منتديات معاذ بحر شريحة 1</div>
            <div class="slide1">منتديات معاذ بحر شريحة 2</div>
            <div class="slide1">منتديات معاذ بحر شريحة 3</div>
            <div class="slide1">منتديات معاذ بحر شريحة 4</div>
         </div>
      </div>
      
      <h4>:::صغير :::جميع الحقوق محفوظة لمنتديات معاذكبير:::</h4>
      <div class="myslider2">
         <div>
            <div class="slide2">منتديات معاذ بحر شريحة 1</div>
            <div class="slide2">منتديات معاذ بحر شريحة 2</div>
            <div class="slide2">منتديات معاذ بحر شريحة 3</div>
            <div class="slide2">منتديات معاذ بحر شريحة 4</div>
         </div>
      </div>
   </body>
</html>

انتهينا وارجوا ان تستفيدوا من هذا الشرح
:silent:
سوجار سوجار سوجار أثقال أثقال ارقيله ارقيله ارقيله
المرفقات
منتديات معاذ بحر.zip
لا تتوفر على صلاحيات كافية لتحميل هذه المرفقات.
(37 Ko) عدد مرات التنزيل 1
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www.sky-ga.com
معاذ بحر
الإدارة العليا
الإدارة العليا
avatar

الجنس : ذكر
مشاركاتي : 1205
نقاطي : 976205640
ولدت بتاريخ : 04/04/1997
سجلت بتاريخ : 12/06/2010
عمري : 20

مُساهمةموضوع: رد: التنقل بين الصفحات بدون تحديث الصفحة حصريا لمنتديات معاذ بحر    21/11/2012, 03:06

ألف شكر لك يا باشا على هذا الشرح الوافي والكامل والحصري أيضا 069
سلمت يداك :silent:
أجمل تحية لك .. تحية مع شكر
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://maaz-b.forummi.com
akheel
نـائب الإدارة
نـائب الإدارة
avatar

الجنس : ذكر
مشاركاتي : 563
نقاطي : 16075
ولدت بتاريخ : 24/08/1997
سجلت بتاريخ : 14/06/2010
عمري : 19
مكان السكن : فلسطين

مُساهمةموضوع: رد: التنقل بين الصفحات بدون تحديث الصفحة حصريا لمنتديات معاذ بحر    21/11/2012, 03:07

شكرا لك اخ معاذ على ردودك الحلوة والعطرة ب اجمل رائحة في الكون
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www.sky-ga.com
 
التنقل بين الصفحات بدون تحديث الصفحة حصريا لمنتديات معاذ بحر
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
 :: قســــم تطويـــــــر الـــمـــواقـــــــع :: قســــم تطويـــــــر الـــمـــواقـــــــع :: قسم لغات البرمجة-
انتقل الى: