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

#page2, #page3, #page4 {display: none;}

هذا يخفي كل "الصفحات" ما عدا الأولى. لذا تظهر الصفحة بشكل طبيعي عند التحميل الأول.

جافا سكريبت

حتى الآن لشرح ما نحتاج إلى تحقيقه عبر jQuery. في ملف custom.js ، نحتاج إلى استهداف عندما ينقر المستخدم على رابط التنقل. استرجع رابط href الخاص به وابحث عن "القسم" بنفس رقم التعريف ، ثم أخفي كل شيء في القسم الرئيسي للمحتوى # ثم تلاشى في القسم الجديد. هذا ما يبدو عليه:

$(function() {$('header nav a').click(function() {var $linkClicked = $(this).attr('href');document.location.hash = $linkClicked;if (!$(this).hasClass("active")) {$("header nav a").removeClass("active");$(this).addClass("active");$('#main-content section').hide();$($linkClicked).fadeIn();return false;}  else {return false؛}})؛ var hash = window.location.hash؛ hash = hash.replace (/ ^ # /، '')؛ switch (hash) {case 'page2': $ ("#" + hash + "-link"). trigger ("click")؛ break ؛ case 'page3': $ ("#" + hash + "-link"). trigger ("click")؛ break؛ case 'page4': $ ("#" + التجزئة + "-link"). المشغل ("انقر") ؛ فاصل ؛}}) ؛ 

يتم تقسيم هذا الرمز إلى قسمين ، الأول يحقق ما تحدثنا عنه للتو. لديه وظيفة نقرة على وصلات الملاحة رأس. ثم يضع "# page1، # page2" إلى آخر باسم $ linkClicked. ثم نقوم بتحديث عنوان URL الخاص بالمتصفح ليكون له نفس اسم علامة التجزئة. بعد ذلك ، لدينا بيان if يتأكد من أن الرابط الذي نضغط عليه ليس علامة التبويب الحالية ، إذا لم يكن هناك أي شيء ، ولكن إذا لم يكن إخفاء كل المحتوى الحالي وإظهار div بمعرّف $ linkClicked. سهل هكذا!

يتحقق القسم الثاني مما إذا كان عنوان url يحتوي على رابط تجزئة في نهاية الأمر ، إذا كان موجودًا ، فسيجد ارتباطًا مطابقًا على الصفحة بنفس القيمة (ولهذا السبب تحتوي الروابط على معرّفات محددة في الترميز) ثم تقوم بتشغيل رابط (ينقر عليه). ما يعنيه هذا ، يعني أنه يمكن للمستخدم إعادة تحميل صفحة بعد الانتقال إلى "الصفحة" ، وسيؤدي التحديث إلى إرسال المستخدم إلى هناك بدلاً من الرجوع إلى الصفحة الأولى فقط ، والتي غالبًا ما تكون مشكلة في هذا النوع من النظام.

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

باستخدام AJAX و PHP

لتحقيق هذا التأثير نفسه ولكن بطريقة مختلفة قليلاً ، بحيث لا يقوم الحمل الأولي بتحميل كل المحتوى لدينا وبالتالي إبطائه (هزيمة النقطة إذا كان الموقع يحتوي على الكثير من المحتوى) ، سنستخدم القليل PHP و AJAX. هذا يعني أن بنية الملف لمشروعنا ستتغير وتبدو كما يلي:

إذا نظرت ، فأن ملف الفهرس الآن هو .php وليس ahtml. لدينا أيضًا ملفًا إضافيًا باسم "load.php" بالإضافة إلى مجلد / دليل جديد يسمى الصفحات التي تحتوي على أربع صفحات HTML. هذا يعني الآن أنك إذا كنت تعمل محليًا ، فأنت بحاجة إلى إعداد بيئة تطوير محلية باستخدام شيء من هذا القبيل MAMP (لنظام التشغيل Mac) أو خادم WAMP (للنوافذ). أو يمكنك تحميل المجلد بأكمله على خادم ويب إذا كان لديك وصول وتحرير هناك ، ستحتاج في الأساس إلى بيئة حيث سيعمل PHP.

قام index.php بتغيير شيء واحد فقط ، ولكن من المهم ، أننا لن نقوم الآن بتحميل كل المحتوى الموجود فيه ، ونقوم ببساطة بالاتصال بالمحتوى الأولي مع تضمين PHP. سيبدو الآن شيء من هذا القبيل:

AJAX a Static Site

لذلك بداية السطر يتصل في أول ملف HTML من مجلد الصفحات لدينا ويتم إدخاله بالكامل في DIV الخاص بالمحتوى الرئيسي. يمكن أن يحتوي الملف المسمى على أي محتوى تريد أن يظهر على الصفحة.

باستخدام $ .ajax في JavaScript

دعنا ننتقل إلى جافا سكريبت الجديدة ، يبدو الآن مختلفًا بعض الشيء ، خاصةً أننا نستخدم الآن AJAX لجلب المحتوى الجديد من كل ملف HTML عندما ينقر المستخدم على بعض التنقلات المقابلة. هذه هي الوظيفة الأولى في الشفرة (تبقى الثانية كما في السابق):

$(function() {$('header nav a').click(function() {var $linkClicked = $(this).attr('href');document.location.hash = $linkClicked;var $pageRoot = $linkClicked.replace('#page', '');if (!$(this).hasClass("active")) {$("header nav a").removeClass("active");$(this).addClass("active");$.ajax({type: "POST",url: "load.php",data: 'page='+$pageRoot,dataType: "html",success: function(msg){if(parseInt(msg)!=0){$('#main-content').html(msg);$('#main-content section').hide().fadeIn();}  }})؛} else {event.preventDefault ()؛}})؛ 

لذلك دعونا نشرح ما يجري. نضيف متغيرًا واحدًا آخر ، وهو $Rootroot. هذا هو أساسًا الرقم الفعلي الذي تم النقر عليه (مع الأخذ في الاعتبار جزء "#page" من رابط التجزئة وترك الرقم الفردي). ثم داخل نفس العبارة "if" كما كان قبل أن نتصل ajax ونستخدم ملف PHP الآخر الذي ذكرناه سابقًا لتحليل المعلومات المعطاة (التي تم النقر فوقها) والعثور على الصفحة المقابلة. ثم إذا عاد بدون خطأ ، فنحن نقوم بإدراج HTML الجديد من الملف الذي تم استلامه في DIV الخاص بالمحتوى الرئيسي. ثم فقط لإيقافه يتغير فجأة ، نخفي كل شيء ثم نختفي فيه.

load.php

محتويات ملف PHP الجديد قصيرة وحلوّة ، فهي تأخذ رقم الصفحة التي أرسلها jQuery إليها وتبحث لمعرفة ما إذا كان ملف HTML المقابل موجودًا أم لا. إذا كان الأمر كذلك ، فإنه يحصل على كل المحتوى ويعيده إلى وظيفة AJAX (التي أظهرناها منذ لحظة أننا ندخل هذا المحتوى في DIV الرئيسي).

بعد ذلك يجب أن يظهر الموقع على أي حال ، ولكنك تريد أن تعمل بشكل صحيح.

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

يمكنك عرض jQuery demo هنا ، ال PHP demo هنا ، أو تنزيل المصدر ونلقي نظرة عن كثب.

هل استخدمت AJAX لتحميل المحتوى؟ هل استخدمت تقنية مشابهة لتسريع موقعك؟ دعنا نعرف أفكارك في التعليقات بالأسفل.

صورة مميزة / صورة مصغرة ، صورة فائقة الشحن عبر Shutterstock.