هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.


 
الرئيسيةالرئيسية  أحدث الصورأحدث الصور  التسجيلالتسجيل  دخول  

 

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

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


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

التنقل بين الصفحات بدون تحديث الصفحة حصريا لمنتديات معاذ بحر  Empty
مُساهمةموضوع: التنقل بين الصفحات بدون تحديث الصفحة حصريا لمنتديات معاذ بحر    التنقل بين الصفحات بدون تحديث الصفحة حصريا لمنتديات معاذ بحر  Empty21/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>

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

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

الكود:
      <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>

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

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

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

الكود:
<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:
سوجار سوجار سوجار أثقال أثقال ارقيله ارقيله ارقيله
المرفقات
التنقل بين الصفحات بدون تحديث الصفحة حصريا لمنتديات معاذ بحر  Attachmentمنتديات معاذ بحر.zip
لا تتوفر على صلاحيات كافية لتحميل هذه المرفقات.
(37 Ko) عدد مرات التنزيل 1
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://www.sky-ga.com
معاذ بحر
الإدارة العليا
الإدارة العليا
معاذ بحر


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

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

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


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

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

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

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