تقسيم المقال الطويل إلى عدة صفحات باستخدام javaScript

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

الكثير من المواقع لما ترى مقال طويل فإنها تجعله كملف مرفق أو كتاب للتحميل.

وفي هذا عدة سِلبيّات :

فمنها :مخالفة رغبات الناس فالكثير من الناس يريد الاطلاع السريع على المقال، ولا يرغب في حفظه في جهازه

ومنها : أن أهل المواقع لا يسمحون بالتحميل بدون مقدمات وتنقّل الزائر عبر صفحات.

ومنها: عدم دعم محركات البحث للبحث في داخل الملفات، مما يقلل الفائدة، ولا يشْهِر الموقع.

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

الأول: إما أن تسرد المقال كاملاً، وهذا ممل للزائر وكثير منهم لا يكمل القراءة أو لا يبدأ فيها إذا رأى المقال طويل.

والثاني: تقسيم المقال إلى عدة صفحات بالطريقة التقليدية وفيه عدة سِلبيَّات :

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

إذاً ما هو الحل؟

الحل في نظري القاصر ، السماح بتحميل المقال للزائر كاملاً، فإن كان طويلاً يقسّم إلى عدة صفحات بــــ javaScript

كيف ؟

لعل هناك عدة طرق حسب طبيعة كتابة المقال، وتفكير المبرمج ونظرة للمشكلة .

ولكن لدي حل متواضع بكود بسيط، لعلكم تشاركونني في تصحيحه وإزالة السلبيات العالقة به.

أنا أفترض المقال مقسّم إلى عدة فقرات، <p>........</p> ومن ثمّ يتمُّ حساب عدد الفقرات وتقسيمها إلى عدة مجموعات(صفحات). ومن هنا نستطيع إخفاءها كلها، وعدم إظهار إلا ما تشير إليه الصفحة المطلوبة.

من داخل السيرفر يكون فحص المقال المضاف وتقسيمه إلى فقرات:

$value = str_replace("<br>", "\n", $value);
$value = str_replace("<br />", "\n", $value);
$value = str_replace("<br/>", "\n", $value);
$value = str_replace("\n\n", "\n", $value);
$lines = explode("\n", $value);
$c = count($lines);
for ($i=0; $i < $c; $i++) {
	$lines[$i] = trim($lines[$i]);
	if (empty($lines[$i])) unset($lines[$i]);
	else $lines[$i] = "<p>".$lines[$i]."</p>";
}
$value = implode('', $lines);
$value = str_replace("<br /><br />", "<br />", $value);
$value = str_replace("</p><br />", "</p>", $value);
$value = str_replace("<br /><p>", "<p>", $value);
$value = str_replace("<o:p>", "<p>", $value);
$value = str_replace("</o:p>", "</p>", $value);
$value = str_replace("<p> </p>", "", $value);
$value = str_replace("<p></p>", "", $value);
$value = str_replace("<p><p>", "<p>", $value);
$value = str_replace("</p></p>", "</p>", $value);

لعل فقهاء الـ PHP عندهم اعتراض على الكود ولديهم طريقة أسهل من هذه ولكن المراد هو تقريب الصورة، لأن السيد المبرمج لا يفهم إلا بالأكواد.

وهذا الكود وظيفته يلغي كل الزيادات ويجعل كل فقرة محاطة بـ <p>

ثم بعد ذلك يكمل المبرمج وظيفته في تخزين المقال وهذا ليس موضوعنا.

ومن طرف المتصفح : يكون هذا الكود :

function goPage(tagid, no) {
	no = no || 1;  // إعادة ضبط رقم الصفحة الحالية
	var max  = 8;	// عدد الفقرات في كل صفحة
	var tplNext = ''; // قالب لزر الصفحة التالية
	var tplPrev = ''; // قالب لزر الصفحة السابقة
	var tplLast = ''; // قالب لزر الصفحة الأخيرة
	var tplFirst= ''; // قالب لزر الصفحة الأولى
	var tplCurrent='<li class="current">'+no+'</li>'; // قالب إظهار رقم الصفحة الحالية
	var rows = $(tagid+' p'); // مصفوقة لكل الفقرات في المقال كامل
	var count = rows.size(); // عدد الفقرات في المقال كامل
	var end = no * max; // رقم الفقرة الأخيرة في الصفحة الحالية
	var star = end - (max+1); // رقم الفقرة الأولى في الصفحة الحالية مع إظهار آخر فقرة في الصفحة السابقة
	var total = Math.ceil(count/max); // عدد الصفحات لكامل المقال

	if(total>1) {

		rows.hide(); // إخفاء جميع الفقرات
		rows.each(function(i){  // i : هو رقم الفقرة الحالية في الحلقة
			if(i>=star && i<=end) $(this).show(); // إظهار الفقرات التابقة للصفحة المطلوبة
		});
		$('ul.pager').remove(); //  حذف القسم المتحكم في التنقّل بين الصفحات، حتى يتم إضافته من جديد
		var next = (no<total)? no+1 : 0; //  إعادة ضبط رقم الصفحة التالية
		var prev = (no>1)? no-1 : 0; // إعادة ضبط رقم الصفحة السابقة
		if(no>1) tplFirst = '<li class="first"><a href="'+tagid+'" onclick="goPage(\''+tagid+'\');" title="اذهب إلى الصفحة الأولى">الأولى</a></li>';
		if(no<total) tplLast = '<li class="last"><a href="'+tagid+'" onclick="goPage(\''+tagid+'\','+total+');" title="اذهب إلى الصفحة الأخيرة">الأخيرة</a></li>';
		if(next>0) tplNext = '<li class="next"><a href="'+tagid+'" onclick="goPage(\''+tagid+'\','+next+');" title="اذهب إلى الصفحة التالية">التالية</a></li>';
		if(prev>0)  tplPrev = '<li class="previous"><a href="'+tagid+'" onclick="goPage(\''+tagid+'\','+prev+');" title="اذهب إلى الصفحة السابقة">السابقة</a></li>';

		$('<ul class="pager">'+tplLast+tplNext+tplCurrent+tplPrev+tplFirst+'</ul>').appendTo(tagid);
	}
}

في المرفقات مثال، عسى الله أن ينفعنا بما نقول وما نعمل

والله ولي التوفيق

article.rar