บทความนี้อธิบายถึงการใช้งานเครื่องมือการปนเปื้อน JS แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
JS Code Part:
คัดลอกรหัสดังนี้:/**
* การแบ่งหน้า JS
-
หน้า var;
(การทำงาน(){
var page = {เวอร์ชัน: "1.0", ผู้แต่ง: "liuxingmi"};
var showpage = 9;
page.navigation = function (divid, TotalRecord, TotalPage, CurrentPage, func) {
var nav = '<ul class =/"pagination/" title =/"รายการการแบ่งหน้า/">';
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) {
เริ่ม - = (สิ้นสุด - TotalPage);
-
ถ้า (เริ่ม <= 0) {
เริ่ม = 1;
-
if (currentPage <showpage && end <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 = page;
-
ส่วน CSS:
คัดลอกรหัสดังต่อไปนี้:/*สไตล์หน้าเริ่มต้น*/
. -pagination {
ล้น: ซ่อน;
มาร์จิ้น: 0 0 0 25px;
Padding: 10px 10px 6px 150px;
ชายแดนด้านบน: 1px Solid #C8C8C8;
_zoom: 1;
TEXT-ALIGN: CENTER;
-
. -pagination *{
แสดง: อินไลน์;
ลอย: ซ้าย;
มาร์จิ้น: 0;
Padding: 0;
ขนาดตัวอักษร: 12px;
-
. -pagination ฉัน {
ลอย: ไม่มี;
Padding-Right: 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;
Text-Indent: -9999EM;
ชายแดนด้านบน: 8px Solid #FFF;
ขอบด้านล่าง: 8px Solid #FFF;
-
.Pagination li li a {
มาร์จิ้น: 0 1px;
Padding: 0 4px;
ชายแดน: 3px double #ffff;
+สีชายแดน: #eee;
ความเป็นมา: #eee;
สี:#06F;
การตกแต่งข้อความ: ไม่มี;
-
.Pagination li li a: โฮเวอร์ {
ความเป็นมา:#F60;
สีชายแดน: #FFFF;
+สีชายแดน:#F60;
สี: #FFFF;
-
li.firstpage {
ขอบซ้าย: 40px;
ชายแดนซ้าย: 3px Solid #06F;
-
.FirstPage A, .PreviousPage A {
ชายแดนขวา: 12px Solid #06F;
-
.FirstPage A: Hover, .PreviousPage A: Hover {
สีสัน-ขวาสี: #f60;
-
.NextPage a, .lastpage a {
ชายแดนซ้าย: 12px Solid #06F;
-
.NextPage A: Hover, .lastpage A: Hover {
ชายแดนซ้ายสี:#F60;
-
.PAGINATION LI.LASTPAGE {
ชายแดนขวา: 3px Solid #06F;
-
.pagination li li li.currentstate a {
ตำแหน่ง: ญาติ;
มาร์จิ้น: -1px 3px;
Padding: 1px 4px;
ชายแดน: 3px double #ffff;
+สีชายแดน:#F60;
ความเป็นมา:#F60;
สี: #FFFF;
-
. -pagination li.currentstate, .currentstate a, .currentstate a: hover {
สีชายแดน: #FFFF #CCC;
เคอร์เซอร์: ค่าเริ่มต้น;
-
/*สไตล์การปนเปื้อนสิ้นสุดลง*/
วิธีการโทร:
การคัดลอกรหัสมีดังนี้: page.navigation ("pagenav", 100, 10, 1, "xxxlist");
<div id = "pagenav"> </div>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน