اشترك في مجموعة montadaphp.net حتى تصلك أخبار المنتدى  

بريدك الإلكتروني:

صفحة 1 من 2 12 الأخيرةالأخيرة
النتائج 1 إلى 20 من 23
شجرة الإعجاب30إعجاب

الموضوع: طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

  1. #1
    عضو شرف الصورة الرمزية SAIF.AJ
    تاريخ التسجيل
    03-07-2012
    السن
    26
    المشاركات
    225
    معدل تقييم المستوى
    6

    افتراضي طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

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

    سأقوم اليوم بشرح طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط
    أكبر مثال :
    Facebook
    مثال لموقع قمت بتصميمه على هذه الطريقه

    www.anaswehpress.com
    بسم الله نبدأ

    نبدأ بتصميم الصفحات
    في البدايه سنقوم بتجزيئ الموقع الى header و footer و ال content داخله سنقوم بتحميل أجزاء الصفحات إذا تم استدعائها من خلال روابط الموقع

    داخل ال header.php نقوم باتدعاء مكتبه الجيكويري

    كود PHP:
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    نقوم بانشاء ملف جافاسكربت داخل مجلد js ونعطيه اسم load.js

    ونقوم باستدعائه
    كود PHP:
    <script src="js/load.js"></script> 
    داخل تاج head في تصميم ال html لصفحه header.php

    داخل ملف load.js
    نقوم بكتابه كود جيكوبري وهو محور درس اليوم

    قبل البدئ بكتابه الكود ساوضح كيفيه العمل

    عند النقر على اي رابط داخل الصفحه (تاج <a>) سنقوم بارسال قيمه tab داخل اتريبيوت rel
    على الشكل التالي

    كود PHP:
                <a rel='tab' href=home.php'>Home</a> 
    وسنحدد حدث النقر على الروابط داخل ملف ال load انه اذا كانت قيمه ال rel للرابط تحتوي على tab ان يقوم باستدعاء الصفحه

    توضيح اكثر بعد الانتهاء من الكود
    كود PHP:
    $(function(){
    /* عند النقر على اي تاج 
    A
    داخل الصفحه ولديه الاتريبيوت 
    Rel=’tab’
    سيتم تنفيذ الداله التالية
    */
                
    $("a[rel='tab']").click(function(e){
               
                           
                            
    //  إحضار الرابط الذي تم النقر عليه
                            
    pageurl = $(this).attr('href');
                           
                            
    // إحضار المحتوى وعرضه داخل 
    // div 
    // content
     
                            
    $.ajax({url:pageurl+'?rel=tab',success: function(data){
                                        $(
    '#content').html(data);
                            }});
                           
                            
    //  تغيير شكل الرابط في المتصفح
                            
    if(pageurl!=window.location){
                                        
    window.history.pushState({path:pageurl},'',pageurl);    
                            }
                            return 
    false;  
                });
    });
     
    /* الكود التالي لتجاوز اذا قام الزائر بالنقر على زر الرجوع بدون اعاده تحميل المحتوى*/
    $(window).bind('popstate', function() {
                $.
    ajax({url:location.pathname+'?rel=tab',success: function(data){
                            $(
    '#content').html(data);
                }});
    }); 
    انتهينا من كتابه كود ال load.js

    سنقوم الان بكتابه تاجات html في صفحه ال header.php

    إدراج الروابط
    كود PHP:
    <div id='menu'>
                <
    a rel='tab' href='index.php>index</a> | 
                <a rel='
    tab' href='home.php'>home</a> | 
    </div> 
    إنتهينا الآن من صفحه ال header.php

    نبدأ الآن بكتابه الكود داخل الصفحات التي سيتك تحميلها

    سنقوم بالبدايه بالتاكد اذا تم استدعاء الصفحه عن طريق النقر على الروابط التي تحتوي على اتريبيوت rel=’tab’
    في حال ان الصفحات كانت بالفعل مستدعاه بهذه الطريقه ان لا نقوم باستدعاء ملف header.php لانه تم استدعائه سابقاً

    الكود صفحه home.php
    كود PHP:
    <?php
    // إذا لم يتم الإستدعاء بالطريقه السابقه قم بتضمين ملف 
    // header.php
    // واطبع تاج ال 
    // html >> content
    if($_GET['rel']!='tab'){
                include 
    'header.php';
                echo 
    "<div id='content'>";
    }
    ?>
     
    <p> محتوى الصفحه   </p>
     
    // نفس الطريقه يتم التعامل معها باستدعاء ال
    // footer.php
     
    <?php
    if($_GET['rel']!='tab'){
    // لإغلاق تاج
    // content        
    echo "</div>";
                include 
    'footer.php';
    }
    ?>

    في حال أردت التعامل مع GET Array أنصحك بتعديل الروابط باستخدام .htaccess

    لانه ستواجهك مشكله ستلاحظها اثناء تجربتك للكود

    ملاحظه هذا الكود وجده على موقع اجنبي وقمت بطرحه سابقاً باللغه الأصليه له
    وكان رد الأعضاء ياريت لو كان بالعربي J

    رابط الموضوع الإنتقال الى صفحه أخرى دون إعادة تحميل الصفحة + تغير الرابط Jqury

    أتمنى ان يكون واضح

    أرفقت الشرح في ملف word
    الملفات المرفقة الملفات المرفقة
    التعديل الأخير تم بواسطة SAIF.AJ ; 08-02-2013 الساعة 09:00 PM
    حازم نور, atefatwan, qahmad و 8 آخرون معجبون بهذا .
    Best regards

    Saif A. Jalajel

    Doha , Qatar

    Software Engineer

    Yii : Yes It Is

  2. #2
    عضو فعال
    تاريخ التسجيل
    29-07-2009
    السن
    28
    المشاركات
    117
    معدل تقييم المستوى
    9

    افتراضي رد: طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

    بارك الله فيكم
    SAIF.AJ معجب بهذا .

  3. #3
    مشرف منتدى الـ jQuery الصورة الرمزية atefatwan
    تاريخ التسجيل
    06-07-2007
    المشاركات
    1,513
    معدل تقييم المستوى
    12

    افتراضي رد: طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

    سلمت يمينك

    درس أكثر من رائع و فائدته كبيره

    جعل لك الله بكل حرف حسنه
    SAIF.AJ معجب بهذا .

  4. #4
    Webmaster
    "رب زدني علما"
    الصورة الرمزية يوسف الحمود
    تاريخ التسجيل
    24-12-2006
    المشاركات
    4,961
    معدل تقييم المستوى
    10

    افتراضي رد: طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

    ما شاء الله تبارك الله ...
    كأنك تشاهدني اليوم وأنا أقرأ في الجي كويري ...

    شكرا أخي سيف ...
    SAIF.AJ معجب بهذا .
    لا تعطني سمكة بل علمني كيف أصطاد
    "قد ترى السماء من ثقب إبرة"
    اللهم اشف عبدك عاطف عطوان وأنزل عليه عطفك ورحمتك وشفائك ... وجميع مرضى المسلمين ... آمين


    من استفاد من مواضيعي أو كتاباتي وأحب رد الجميل لي ... فليدعو لي بأن يرزقني الله من خيري الدنيا والآخرة وأن يفتح علي أبواب الرزق ...

    قوانين منتدى بي اتش بي

    Regulations Montada PHP




  5. #5
    مشرف الصورة الرمزية hamada10
    تاريخ التسجيل
    05-12-2009
    السن
    32
    المشاركات
    1,291
    معدل تقييم المستوى
    9

    افتراضي رد: طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

    تمام لكن اعتقد انه ده بيكون له تأثير سلبى على الموقع فى محركات البحث
    لان كل محتوى الموقع هيبقى عبارة عن صفحة واحدة برابط واحد بالنسبة لمحرك البحث

    سيد الاستغفار

    اللهم أنت ربي لا إله إلا أنت خلقتني وأنا عبدك وأنا على عهدك ووعدك ما استطعت أعوذ بك من شرما صنعت أبوء بنعمتك على وأبوء بذنبي فاغفر لي إنه لا يغفر الذنوب إلا أنت





    PHP-MySQL-HTML-CSS-Joomla-Ajax-Jquery-Vb6

    Developer

    الموقع الشخصى والاعمال السابقة

    http://www.hamada10.com

    السيــــرة الذاتية

    www.hamada10.com/cv.html



    لطلبات البرمجة

    www.hamada10.com/contact.html


    أخر الأعمال
    www.almshaheer.com



  6. #6
    مشرف منتدى الـ jQuery الصورة الرمزية atefatwan
    تاريخ التسجيل
    06-07-2007
    المشاركات
    1,513
    معدل تقييم المستوى
    12

    افتراضي رد: طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

    اقتباس المشاركة الأصلية كتبت بواسطة hamada10 مشاهدة المشاركة
    تمام لكن اعتقد انه ده بيكون له تأثير سلبى على الموقع فى محركات البحث
    لان كل محتوى الموقع هيبقى عبارة عن صفحة واحدة برابط واحد بالنسبة لمحرك البحث
    كلامك سليم جدا أخى حماده

    و لكن يمكن إستخدامها فى تصميم لوحات الإداره للمواقع وسيكون لها لمسة جماليه

  7. #7
    عضو شرف الصورة الرمزية SAIF.AJ
    تاريخ التسجيل
    03-07-2012
    السن
    26
    المشاركات
    225
    معدل تقييم المستوى
    6

    افتراضي رد: طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

    بارك الله فيكم جميعاً هاد واجبنا
    بلنسبه لمحركت البحث لا تأثر لان الصفحات فعلياً موجوده ولو تم استدعاء الرابط نفسه سيتم عرض الصفحه

    قم بتجربه الكود وسترى ما اقصد بوضوح
    يوسف الحمود و atefatwan معجب بهذا .
    Best regards

    Saif A. Jalajel

    Doha , Qatar

    Software Engineer

    Yii : Yes It Is

  8. #8
    عضو شرف الصورة الرمزية SAIF.AJ
    تاريخ التسجيل
    03-07-2012
    السن
    26
    المشاركات
    225
    معدل تقييم المستوى
    6

    افتراضي رد: طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

    توضيح اكثر :

    اعتذر عن استخدام هذا الموقع كمثال , وليس الهدف نشر الموقع ( بجميع الحالات انا استقلت من عندهم :P )

    :: AnaswePress ::

    اذا قمت بزياره الموقع قم بالانتقال الى اي رابط داخله سيتم تغيير عنوان الرابط في المتصفح ! وسيتم تغيير المحتوى

    قم بنسخ الرابط ولصقه في صفحه جديده سيقوم بفتح الصفحه على المحتوى الخاص بها لان الصفحه موجوده فعلياً

    لكن الذي يحصل ان الكود يقوم بالتاكد عن طريق ال rel='tab' اذا ان الزائر انتقل من خلال كود الجي كويري او لا

    وكود ال php يفصحل اذا كان الزائر دخل للصفحه عن طريق الكود لن يقوم باستدعاء ال header.php وفي حال ان الزائر دخل عن طريق الرابط او قام بعمل refresh للصفحه سيستدعي ال header.php
    يوسف الحمود معجب بهذا .
    Best regards

    Saif A. Jalajel

    Doha , Qatar

    Software Engineer

    Yii : Yes It Is

  9. #9
    عضو مشارك
    تاريخ التسجيل
    29-05-2007
    المشاركات
    81
    معدل تقييم المستوى
    11

    افتراضي رد: طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

    ممتاز، بارك الله في جهدك ووقتك


    شكراً لك
    SAIF.AJ معجب بهذا .

  10. #10
    عضو جديد
    تاريخ التسجيل
    11-10-2007
    السن
    36
    المشاركات
    2
    معدل تقييم المستوى
    0

    افتراضي رد: طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

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

    لذا فلم احب أن أخذ هذه الميزة دون ترك رسالة شكر
    SAIF.AJ و CompaQ معجب بهذا .

  11. #11
    عضو مشارك الصورة الرمزية هالي الدهوكي
    تاريخ التسجيل
    25-11-2011
    المشاركات
    38
    معدل تقييم المستوى
    0

    افتراضي رد: طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

    اخي بصراحة الموضوع جميل جدا لكن هناك مشكلة لي في الموضوع ...

    شوف انا عندي هل رابط
    كود HTML:
    <div id='menu'><a rel='tab' href='home.php?id=12'>Home</a> </div>
    شوف الرابط يصبح بشكل
    home.php?id=12
    و انا عندي تحقيق و هذا هو التحقيق شوفو
    كود HTML:
    <?php$get = $_GET['id'];if($get == "12"){echo "PAGE ID =".$get;} ?>
    يعني اذا كان ID الخاص بصفحة اطبع
    ID الصفحة يساوي مثلا 12


    لكن الطريقة لا تعمل معي ولا اعرف ما المشكلة ... ممكن توضيح

  12. #12
    عضو شرف الصورة الرمزية Abu Rayane
    تاريخ التسجيل
    09-06-2008
    المشاركات
    2,727
    معدل تقييم المستوى
    12

    افتراضي رد: طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

    اقتباس المشاركة الأصلية كتبت بواسطة هالي الدهوكي مشاهدة المشاركة
    home.php?id=12

    ID الصفحة يساوي مثلا 12


    لكن الطريقة لا تعمل معي ولا اعرف ما المشكلة ... ممكن توضيح
    هنا ستضطر ﻹستعمال json
    Belkaz Brahim معجب بهذا .
    http://www.alfirdaous.com

    السلام عليكم ورحمة الله وبركاته،
    نبحث عن مساعدين (مصممين، مبرمجين، إدخال بيانات، كاتبي مقالات،...) في إدارة موقع الفردوس، لمن يهمه الأمر، المرجو الإتصال بالإدارة من هنا.

    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

    I do not code for others
    I do not answer without codes
    I do not update the 3rd party codes
    All my codes bug, do not copy / paste them

  13. #13
    عضو فعال
    تاريخ التسجيل
    16-09-2012
    السن
    31
    المشاركات
    345
    معدل تقييم المستوى
    6

    افتراضي رد: طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

    بارك الله فيك بصراحة ستفيدني الفكرة كتيرا , و ما يعجبني كتيرا إرفاقك لملف الشرح و هي طريقة رائعة , تحياتي
    SAIF.AJ معجب بهذا .

  14. #14
    عضو فعال
    تاريخ التسجيل
    14-01-2010
    المشاركات
    138
    معدل تقييم المستوى
    8

    افتراضي رد: طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

    الموضوع اكثر من رائع ومفيد.... لكن بالنسبه كما قال الاخ في احد الردود انه لا يمكن الحصول على الارقام والمعلومات من get ارجو التوضيح كيف يمكن اصلاح هذه المشكله... اخ قال بدها json ونحنا بال php يا دوب ملحقين فارجو شرح الطريقه واكون لكم من الشاكرين
    ahmed hamdan معجب بهذا .

  15. #15
    ممنوع من المشاركة مؤقتا
    تاريخ التسجيل
    01-05-2013
    السن
    20
    المشاركات
    56
    معدل تقييم المستوى
    0

    افتراضي رد: طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

    جزاك الله كل خير
    الفائدة ستكون كبيرة من هذا
    جاري التجربة

  16. #16
    عضو مشارك الصورة الرمزية jafa34
    تاريخ التسجيل
    01-12-2012
    المشاركات
    82
    معدل تقييم المستوى
    5

    افتراضي رد: طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

    جزاك الله خيرا أخي
    درس مفيد جدا

  17. #17
    عضو مشارك الصورة الرمزية هالي الدهوكي
    تاريخ التسجيل
    25-11-2011
    المشاركات
    38
    معدل تقييم المستوى
    0

    افتراضي رد: طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

    انا لحد الأن منتضر ردودكم لكيفية جلب معلومات الرابط بطريقة GET لانه لا تعمل ال GET اثناء هذه الحالة و قال احد الأخوان يجب استعمال Json لكن ما هي اسهل طريقة لجلب معلومات الرابط للتحقق و كذلك التنقل بدون تحديث الصفحة و الف شكر لكم حبايب

  18. #18
    عضو شرف الصورة الرمزية Abu Rayane
    تاريخ التسجيل
    09-06-2008
    المشاركات
    2,727
    معدل تقييم المستوى
    12

    افتراضي رد: طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

    ضع الكود أولا
    http://www.alfirdaous.com

    السلام عليكم ورحمة الله وبركاته،
    نبحث عن مساعدين (مصممين، مبرمجين، إدخال بيانات، كاتبي مقالات،...) في إدارة موقع الفردوس، لمن يهمه الأمر، المرجو الإتصال بالإدارة من هنا.

    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

    I do not code for others
    I do not answer without codes
    I do not update the 3rd party codes
    All my codes bug, do not copy / paste them

  19. #19
    عضو مشارك الصورة الرمزية هالي الدهوكي
    تاريخ التسجيل
    25-11-2011
    المشاركات
    38
    معدل تقييم المستوى
    0

    افتراضي رد: طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

    اخي هو نفس الكود الذي اعطاه لنا الأخ SAIF.AJ

  20. #20
    عضو جديد الصورة الرمزية alisaki20
    تاريخ التسجيل
    27-09-2016
    السن
    16
    المشاركات
    4
    معدل تقييم المستوى
    0

    افتراضي رد: طريقه التنقل بين صفحات الموقع دون إعادة تحميل الصفحه مع تغيير عنوان الرابط

    اخی علیک ان تعید کل لصفخات لحالتها ال اولا
    وبعدها غیر محتوء ملف load.js الی :
    كود HTML:
    $(function(){
        var url = $("this").attr("href");    $.get("url", function(data, status){        document.getElementById("content").innerHTML = data;    });
    });
    او راح یشتغل الکود بس مانی متاکد لان انا لست جیداً فی الجاوا سکریپت ممکن ایکون به اخطاء او لو کان به اخطاء حاول اصلاحها
    التعديل الأخير تم بواسطة alisaki20 ; 21-11-2016 الساعة 04:28 PM

صفحة 1 من 2 12 الأخيرةالأخيرة

معلومات الموضوع

الأعضاء الذين يشاهدون هذا الموضوع

الذين يشاهدون الموضوع الآن: 2 (0 من الأعضاء و 2 زائر)

المواضيع المتشابهه

  1. مشاركات: 4
    آخر مشاركة: 06-02-2013, 01:46 PM
  2. مشاركات: 2
    آخر مشاركة: 19-10-2012, 01:49 AM
  3. مشاركات: 4
    آخر مشاركة: 23-11-2008, 07:01 PM
  4. مشاركات: 31
    آخر مشاركة: 09-10-2008, 06:28 PM
  5. ما هو كود تغيير عنوان الصفحة
    بواسطة mas123 في المنتدى مشاكل وحلول PHP Errors & Troubleshooting
    مشاركات: 4
    آخر مشاركة: 21-07-2008, 09:14 PM

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •