تصف هذه المقالة استخدام أداة ترقيم JS. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
جزء رمز JS:
انسخ الرمز كما يلي:/**
* ترقيم الصفحات
*/
صفحة فار ؛
(وظيفة(){
var page = {الإصدار: "1.0" ، المؤلف: "liuxingmi"} ؛
var showpage = 9 ؛
page.navigation = دالة (Divid ، TotalRecord ، TotalPage ، CurrentPage ، Func) {
var nav = '<ul class =/"pagination/" title =/"list legination/">' ؛
NAV += '<li> سجلات إجمالي: <i id = "TotalRecord">' +TotalRecord +'</i> </li>' ؛
Nav + = '<li> إجمالي عدد الصفحات: <i id = "totalPage">' + TotalPage + '</i> </li>' ؛
Nav + = '<li> الصفحة الحالية: <b id = "pagenum">' + currentpage + '</b> </li>' ؛
if (currentpage == 1) {
nav += '<li> <a href = "javaScript: void (0) ؛" id = "firstpage"> home </a> </li> '؛
nav += '<li> <a href = "javaScript: void (0) ؛" id = "frontpage"> الصفحة السابقة </a> </li> '؛
} آخر {
nav + = '<li> <a href = "javaScript:' + func + '(1) ؛" id = "firstpage"> home </a> </li> '؛
nav + = '<li> <a href = "javaScript:' + func + '(' + (CurrentPage -1) + ') ؛" id = "frontpage"> الصفحة السابقة </a> </li> '؛
}
nav += '<li id = "num"> <ol>' ؛
var start = currentpage - math.floor (showpage/2) ؛
var end = currentpage + math.floor (showpage/2) ؛
if (end> totalpage) {
START - = (END - TotalPage) ؛
}
إذا (ابدأ <= 0) {
ابدأ = 1 ؛
}
if (currentpage <showpage && end <showpage) {
نهاية = عرض ؛
}
if (end> totalpage) {
نهاية = TotalPage ؛
}
لـ (var i = start ؛ i <= end ؛ i ++) {
if (i == currentpage) {
nav + = '<li> <a href = "javaScript:' + func + '(' + i + ') ؛">' + i + '</a> </li>' ؛
} آخر {
nav + = '<li> <a href = "javaScript:' + func + '(' + i + ') ؛">' + i + '</a> </li>' ؛
}
}
nav += '</ol> </li>' ؛
if (currentpage == totalpage) {
nav += '<li> <a href = "javaScript: void (0) ؛" id = "nextpage"> الصفحة الأخيرة </a> </li> '؛
nav += '<li> <a href = "javaScript: void (0) ؛" id = "lastpage"> الصفحة الأخيرة </a> </i> '؛
} آخر {
nav + = '<li> <a href = "javaScript:' + func + '(' + (CurrentPage + 1) + ') ؛" id = "nextpage"> الصفحة الأخيرة </a> </li> '؛
Nav + = '<li> <a href = "javaScript:' + func + '(' + TotalPage + ') ؛" id = "lastpage"> الصفحة الأخيرة </a> </i> '؛
}
Nav += '</ul>' ؛
$ ("#" + divid) .html (nav) ؛
} ؛
this.page = صفحة ؛
}) () ؛
جزء CSS:
انسخ الرمز كما يلي:/*يبدأ نمط الصفحة*/
.pagination {
الفائض: مخفي.
الهامش: 0 0 0 25px ؛
Padding: 10px 10px 6px 150px ؛
أعلى الحدود: 1 بكسل Solid #C8C8C8 ؛
_zoom: 1 ؛
محاذاة النص: المركز ؛
}
.pagination *{
العرض: مضمّن ؛
تعويم: اليسار.
الهامش: 0 ؛
الحشو: 0 ؛
حجم الخط: 12 بكسل ؛
}
.pagination أنا {
تعويم: لا شيء ؛
حشو اليمين: 1px ؛
}
.CurrentPage B {
تعويم: لا شيء ؛
اللون:#F00 ؛
}
.pagination li {
على غرار القائمة: لا شيء ؛
الهامش: 0 5px ؛
}
.pagination li li {
الموقف: قريب
الهامش: -2px 0 0 ؛
Font-Family: Arial ، Helvetica ، Sans-Serif
}
.firstPage a ، .previouspage a ، .nextpage a ، .lastpage a {
الفائض: مخفي.
الارتفاع: 0 ؛
استولى النص: -9999EM ؛
أعلى الحدود: 8px الصلبة #FFF ؛
Border-Bottom: 8px Solid #FFF ؛
}
.pagination li li a {
الهامش: 0 1px ؛
الحشو: 0 4px ؛
الحدود: 3 بكسل مزدوج #ffff ؛
+لون الحدود: #EEE ؛
الخلفية: #EEE ؛
اللون:#06F ؛
تدمير النص: لا شيء ؛
}
.pagination li li a: hover {
الخلفية:#f60 ؛
بلون الحدود: #ffff ؛
+لون الحدود:#f60 ؛
اللون: #ffff ؛
}
li.firstpage {
الهامش اليساري: 40 بكسل ؛
الحدود اليسرى: 3px الصلبة #06F ؛
}
.firstPage a ، .previouspage a {
اليمين الحدودي: 12 بكسل Solid #06F ؛
}
.firstPage A: hover ، .previouspage a: hover {
اللون اليمين الحدودي: #f60 ؛
}
.nextpage a ، .lastpage a {
الحدود اليسرى: 12px الصلبة #06F ؛
}
.nextpage a: hover ، .lastpage a: hover {
بلون الحدود اليسرى:#f60 ؛
}
.pagination li.lastpage {
اليمين الحدودي: 3px Solid #06f ؛
}
.pagination li li li.currentstate a {
الموقف: قريب
الهامش: -1px 3px ؛
الحشو: 1px 4px ؛
الحدود: 3 بكسل مزدوج #ffff ؛
+لون الحدود:#f60 ؛
الخلفية:#f60 ؛
اللون: #ffff ؛
}
.pagination li.currentstate ، .currentState A ، .CurrentState A: Hover {
اللون الحدود: #ffff #ccc ؛
المؤشر: الافتراضي ؛
}
/*ينتهي نمط ترقيم الصفحات*/
طريقة الاتصال:
نسخة الكود كما يلي: page.navigation ("Pagenav" ، 100 ، 10 ، 1 ، "xxxlist") ؛
<div id = "pagenav"> </viv>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.