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

أهلا وسهلا بك في منتديات معاذ بحر

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


أهلا وسهلا بك الى منتديات معاذ بحر


 :: قســــم تطويـــــــر الـــمـــواقـــــــع :: قســــم تطويـــــــر الـــمـــواقـــــــع :: قسم لغات البرمجة
شاطر
بيانات كاتب الموضوع
التنقل بين الصفحات بدون تحديث الصفحة حصريا لمنتديات معاذ بحر
.: الـمعـلومـآت :.
الكاتب:
اللقب:
نـائب الإدارة
الرتبه:
نـائب الإدارة
.: الصـورة الرمزيـة :.
.: الـبيـآنـآت :.
الجنس : ذكر
مشاركاتي : 563
نقاطي : 16075
ولدت بتاريخ : 24/08/1997
سجلت بتاريخ : 14/06/2010
عمري : 19
مكان السكن : فلسطين
.: الســآعة الآن :.

.: معـلــومــآت الاتصــآل :.
الحالة:
اتصـل بي:
معاينة صفحة البيانات الشخصي للعضو http://www.sky-ga.com

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


اليوم اتي لكم بشرح حصري لمنتديات معاذ بحر 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:
سوجار سوجار سوجار أثقال أثقال ارقيله ارقيله ارقيله


تم الارســال 21/11/2012, 03:02
الملفات المرفقةمنتديات معاذ بحر.zip لا تتوفر على صلاحيات كافية لتحميل هذه المرفقات.? الحجم (37 Ko) (عدد مرات التنزيل 1)

أضــف تعليقك على الموضوع بوساطة الفيس بوكـ
.: الـمعـلومـآت :.
الكاتب:
اللقب:
الإدارة العليا
الرتبه:
الإدارة العليا
.: الصـورة الرمزيـة :.
.: الـبيـآنـآت :.
الجنس : ذكر
مشاركاتي : 1205
نقاطي : 976205640
ولدت بتاريخ : 04/04/1997
سجلت بتاريخ : 12/06/2010
عمري : 19
.: الســآعة الآن :.

.: معـلــومــآت الاتصــآل :.
الحالة:
اتصـل بي:
معاينة صفحة البيانات الشخصي للعضو http://maaz-b.forummi.com

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


ألف شكر لك يا باشا على هذا الشرح الوافي والكامل والحصري أيضا 069
سلمت يداك :silent:
أجمل تحية لك .. تحية مع شكر


تم الارســال 21/11/2012, 03:06

أضــف تعليقك على الموضوع بوساطة الفيس بوكـ
.: الـمعـلومـآت :.
الكاتب:
اللقب:
نـائب الإدارة
الرتبه:
نـائب الإدارة
.: الصـورة الرمزيـة :.
.: الـبيـآنـآت :.
الجنس : ذكر
مشاركاتي : 563
نقاطي : 16075
ولدت بتاريخ : 24/08/1997
سجلت بتاريخ : 14/06/2010
عمري : 19
مكان السكن : فلسطين
.: الســآعة الآن :.

.: معـلــومــآت الاتصــآل :.
الحالة:
اتصـل بي:
معاينة صفحة البيانات الشخصي للعضو http://www.sky-ga.com

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


شكرا لك اخ معاذ على ردودك الحلوة والعطرة ب اجمل رائحة في الكون


تم الارســال 21/11/2012, 03:07

أضــف تعليقك على الموضوع بوساطة الفيس بوكـ
الــرد الســـريـع

خــدمات المـوضـوع
 KonuEtiketleri كلمات دليليه
 KonuLinki رابط الموضوع
 Konu BBCode BBCode
 KonuHTML Kodu HTMLcode
إذا وجدت روابط لاتعمل في الموضوع او أن الموضوع ( التنقل بين الصفحات بدون تحديث الصفحة حصريا لمنتديات معاذ بحر ) مخالف ,, من فضلك راسل الإدارة من هنا