منتديات هرقلة ستار






اضافة رد جديد اضافة موضوع جديد


08-10-2023 11:42

معلومات الكاتب ▼
إنضم في : 24-03-2022
رقم العضوية : 1
المشاركات : 793
الدولة : تونس
قوة السمعة : 100
في هذا الشرح سنتعرف على طريقة Bar والتي تظهر مستوى تحميل الصفحة في المنتدى

نقوم بإضافة الكود التالي في ملف style.css الخاص بستايل المنتدى


[code=css]
.header {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}

.progress-container {
/* background-color: rgba(150, 150, 150, 0.6);*/
height: 10px;
width: 150%;
}

.progress-bar {
background-color: #2196f3;
height: 10px;
width: 0%;
}

.content {
padding: 2em;
}



[/code]


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


[code=js]
$(document).ready(function() {
$(document).scroll(function(e) {
var dimensions = {
scrollTop: $(window).scrollTop(),
documentHeight: $(document).height(),
windowHeight: $(window).height()
};

// Exclude the window to get actual height!
var pageScrolledPercentage =
dimensions.scrollTop /
(dimensions.documentHeight - dimensions.windowHeight) *
100;
$(".progress").css("width", pageScrolledPercentage + "%");
});
});



[/code]

نقوم بحفظ الملف بإسم progress.js ونقوم بنقله إلى مجلد includes/js الموجود في جذر المنتدى
إضافة Progress Bar للمنتدى
من لوحة تحكم الإدارة نقوم بإنشاء قالب جديد ونعطيه الإسم progress
إضافة Progress Bar للمنتدى
نفتح قالب headinclud ونضيف آخره الكود التالي

[code=plain]
{template}progress{/template}


[/code]

إضافة Progress Bar للمنتدى

نقوم بعد ذلك بتفريغ كاش المتصفح ونلاحظ النتيجة

إضافة Progress Bar للمنتدى

اضافة رد جديد اضافة موضوع جديد



المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
إضافة شريط تقدم تحميل الصفحة - Loading page Progressbar HS Admin
0 246 HS Admin

الكلمات الدلالية
إضافة ، Progress ، للمنتدى ،