شرح كود جدول المحتويات التفاعلي
هذا الكود يتكون من جزأين رئيسيين: HTML/CSS
وJavaScript
. الكود يعمل على إنشاء جدول محتويات (Table of Contents) تفاعلي يمكن للمستخدمين النقر عليه للانتقال إلى أقسام محددة في الصفحة. سأشرح كل جزء بالتفصيل:
الهيكل العام (HTML)
<div id="btn-cm">
: هذا العنصر يعمل كحاوية رئيسية تحتوي على زر جدول المحتويات (#btn_toc
) وجدول المحتويات نفسه (#toc
).<div id="btn_toc">
: هذا الزر الذي يمكن النقر عليه لإظهار أو إخفاء جدول المحتويات. يحتوي على نص "محتويات" وأيقونة (SVG) تمثل سهمين لأعلى ولأسفل.<div id="toc">
: هذا العنصر يحتوي على قائمة مرتبة (<ol>
) بالعناوين الرئيسية للصفحة. كل عنصر في القائمة (<li>
) يحتوي على رابط (<a>
) يشير إلى قسم معين في الصفحة باستخدامhref
مع معرف (id
) مثل#toc_1
.<script>
: يتم تضمين مكتبة jQuery من خلال رابط خارجي لتسهيل التعامل مع الأحداث والتحريك.
التصميم (CSS)
#btn-cm
: يعطي تصميمًا للحاوية الرئيسية، مثل الحدود (border
)، زوايا مدورة (border-radius
)، ولون خلفية (background-color
).#btn_toc
: يعطي تصميمًا للزر، مثل وزن الخط (font-weight
)، مؤشر الماوس (cursor
)، وهوامش (margin
).#btn_toc:focus, #toc li:focus, .back_toc:focus
: يزيل الحدود الزرقاء الافتراضية عند النقر على العناصر (التركيز عليها).#toc li
: يجعل عناصر القائمة قابلة للنقر عليها (مؤشر الماوس يتغير إلى يد).#toc
: يعرض جدول المحتويات كشبكة (display: grid
).:target::before
: يستخدم لإضافة مسافة عند الانتقال إلى قسم معين في الصفحة لمنع المحتوى من الاختفاء خلف القائمة الثابتة.
JavaScript/jQuery
$(document).ready(function(){ ... })
: يتم تنفيذ الكود الموجود بداخله بمجرد تحميل الصفحة بالكامل.$("a").on('click', function(event){ ... })
: يتم إضافة حدث النقر (click
) لجميع الروابط (<a>
) في الصفحة.if (this.hash !== "") { ... }
: يتم التحقق مما إذا كان الرابط يحتوي على معرف (hash
) مثل#toc_1
.event.preventDefault()
: يمنع السلوك الافتراضي للرابط (الانتقال الفوري إلى القسم).$('html, body').animate({ scrollTop: $(hash).offset().top }, 800)
: يقوم بتحريك الصفحة بسلاسة إلى القسم المحدد خلال 800 مللي ثانية.window.location.hash = hash
: بعد الانتهاء من التمرير، يتم إضافة المعرف (hash
) إلى عنوان URL.
كيف يعمل الكود؟
- عند النقر على زر "محتويات"، يتم إظهار أو إخفاء جدول المحتويات (
#toc
) عن طريق تغييرdisplay
بينblock
وnone
. - عند النقر على أي رابط في جدول المحتويات، يتم الانتقال بسلاسة إلى القسم المقصود في الصفحة.
- يتم استخدام jQuery لتسهيل عملية التمرير السلس وإضافة المعرف (
hash
) إلى عنوان URL.
ملاحظات إضافية
- الكود يعتمد على jQuery، لذا يجب تضمين مكتبة jQuery قبل استخدامه.
- يمكن تحسين الكود باستخدام JavaScript خالص (بدون jQuery) إذا رغبت في ذلك.
- يمكن تعديل التصميم والألوان لتناسب احتياجاتك.
طريقة تركيب الكود
اذهب الي لوحة تحكم بلوجر
حدد السمة تحرير HTML
الآن انسخ كود Css والصقه فوق ]]></b:skin> في المظهر الخاص بك.
/* Table of Contents (melafndey) */#btn-cm {
border: 1px solid #dadada;
border-radius: 5px;
background-color: #f9f9f9;
}
#btn_toc {
font-weight: 700;
cursor: pointer;
margin: 10px;
}
#btn_toc:focus,#toc li:focus,.back_toc:focus {
outline: none;
}
#btn_toc svg {
vertical-align: middle;
}
#toc li {
cursor: pointer;
}
#toc {
display: grid;
}
.back_toc {
cursor: pointer;
text-align: left;
}
:target::before {
content: "";
display: block;
height: 40px;
margin-top: -40px;
visibility: hidden;
}
قم بنسخ الكود التالى وضعه فى المكان الذى تريده وتخصيصه بنفسك.
<div id="btn-cm">
<div id="btn_toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">محتويات <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
</div>
ضع الكود التالى فوق </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jquery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>