แบ่งปันองค์ประกอบเพจจาวาสคริปต์ที่เขียนด้วยตัวเอง

ส่วนประกอบเพจจิ้งง่าย ๆ ที่เขียนด้วยตัวเองฟังก์ชั่นหลักและการใช้งานทั้งหมดอยู่ใน JS เพิ่ม DIV เพียงเพื่อวางหน้าเพื่อสร้างเพจและให้ ID ของคอนเทนเนอร์

โครงสร้าง HTML มีดังนี้:

การคัดลอกรหัสมีดังนี้:

<ul id = "pagediv">

</ul>

class = "pagination" ให้สไตล์การแบ่งหน้า

ID = "PAGEDIV" ใช้เพื่อวางการแบ่งแยก JS ที่สร้างขึ้น

โครงสร้าง CSS มีดังนี้:

การคัดลอกรหัสมีดังนี้:

. -pagination {

ระยะขอบด้านบน: 10px;

มาร์จิ้น-ก้น: 10px;

แสดง: Inline-Block;

Padding-Left: 0;

มาร์จิ้น: 20px 0;

แนวชายแดน: 4px;

-

.pagination> li {

แสดง: อินไลน์;

-

.pagination> li: เด็กคนแรก> a {

ขอบซ้าย: 0;

ชายแดนด้านซ้าย-ซ้าย-Radius: 4px;

ชายแดนด้านล่างซ้าย-ไรเดอัส: 4px;

-

.pagination> li> a {

ตำแหน่ง: ญาติ;

ลอย: ซ้าย;

Padding: 6px 12px;

ขอบซ้าย: -1px;

ความสูงของสาย: 1.42857143;

สี: #337ab7;

การตกแต่งข้อความ: ไม่มี;

พื้นหลังสี: #FFF;

ชายแดน: 1px Solid #DDD;

เคอร์เซอร์: ตัวชี้;

-

.pagination> li> a.navcur {

ความเป็นมา: #CCCCCCCC;

สี: #ffffff;

-

ต่อไปนี้คือโครงสร้าง JS โปรดดู jQuery

การคัดลอกรหัสมีดังนี้:

-

* @pagecontentId การแสดงผลองค์ประกอบ div ของหน้า

* @curpage หน้าเริ่มต้นปัจจุบัน

* @totalcount จำนวนรวม

* @pagerows จำนวนการแสดงต่อหน้า

* @Callback ฟังก์ชันการโทรกลับที่แสดงข้อมูล

-

ฟังก์ชั่น pagelist (pageContentId, ตัวเลือก) {

this.pageContentId = document.getElementById (pageContentId);

this.curpage = ตัวเลือก. curpage;

this.totalcount = ตัวเลือก. totalcount;

this.pagerows = ตัวเลือก. pagerows;

this.callback = opption.callback;

this.pagesize = math.ceil (this.totalcount/this.pagerows);

-

pagelist.prototype = {

init: function () {

this.renderbtn ();

-

FIRSTPAGE: function () {

var _self = this;

_self._firstPage = document.createElement ("li");

_self._firstpagea = document.createElement ("A");

_self._firstpagea.innerhtml = "โฮมเพจ";

_self._firstpage.appendchild (_self._firstpagea);

this.pagecontentid.appendchild (_self._firstpage);

_self._firstpage.onclick = function () {

_self.gotopage (1);

-

-

LastPage: function () {

var _self = this;

_self._lastpage = document.createElement ("li");

_self._lastpagea = document.createElement ("A");

_self._lastpagea.innerhtml = "หน้าสุดท้าย";

_self._lastpage.appendchild (_self._lastpagea);

this.pagecontentid.appendchild (_self._lastpage);

_self._lastpage.onclick = function () {

_self.gotopage (_self.pagesize);

-

-

Putpage: function () {

var _self = this;

_self._prew = document.createelement ("li");

_self._prewa = document.createelement ("a");

_self._prewa.innerhtml = "<<";

_self._prew.appendchild (_self._prewa);

this.pagecontentid.appendchild (_self._prew);

_self._prew.onclick = function () {

if (_self.curpage> 1) {

_self.curpage--;

-

_Self.Callback.CALL (นี่, this.curpage);

_self.init ();

console.log (_self.curpage);

-

-

NextPage: function () {

var _self = this;

_self._next = document.createElement ("li");

_self._nexta = document.createElement ("A");

_self._nexta.innerhtml = ">>";

_self._next.appendchild (_self._nexta);

this.pagecontentid.appendchild (_self._next);

_self._next.onclick = function () {

if (_self.curpage <_self.pagesize) {

_self.curpage ++;

-

_Self.Callback.CALL (นี่, this.curpage);

_self.init ();

console.log (_self.curpage);

-

-

pagenum: function () {

var _self = this;

if (this.pagesize <= 10) {

สำหรับ (var i = 1, len = this.pagesize; i <= len; i ++) {

_self._num = document.createelement ("li");

_self._numa = document.createElement ("A");

_self._numa.innerhtml = i;

_self._num.appendchild (_self._numa);

this.pagecontentid.appendchild (_self._num);

_self._num.onclick = function () {

var curpage = $ (this) .text ();

_self.gotopage (curpage);

-

-

-

อื่น{

if (_self.curpage <= 10) {

สำหรับ (var i = 1; i <= 10; i ++) {

_self._num = document.createelement ("li");

_self._numa = document.createElement ("A");

_self._numa.innerhtml = i;

_self._num.appendchild (_self._numa);

this.pagecontentid.appendchild (_self._num);

_self._num.onclick = function () {

var curpage = $ (this) .text ();

_self.gotopage (curpage);

-

-

-

อื่นถ้า (_self.curpage> 10 && _ self.curpage <= this.pagesize) {

if (this.pagesize <math.ceil (_self.curpage/10)*10) {

สำหรับ (var i = math.floor (_self.curpage/10)*10+1; i <= this.pagesize; i ++) {

if (_self.curpage> this.pagesize)

กลับ;

_self._num = document.createelement ("li");

_self._numa = document.createElement ("A");

_self._numa.innerhtml = i;

_self._num.appendchild (_self._numa);

this.pagecontentid.appendchild (_self._num);

_self._num.onclick = function () {

var curpage = $ (this) .text ();

_self.gotopage (curpage);

-

-

}อื่น{

if (math.ceil (_self.curpage/10)*10 == _ self.curpage) {

สำหรับ (var i = _self.curpage-9; i <= _ self.curpage; i ++) {

_self._num = document.createelement ("li");

_self._numa = document.createElement ("A");

_self._numa.innerhtml = i;

_self._num.appendchild (_self._numa);

this.pagecontentid.appendchild (_self._num);

_self._num.onclick = function () {

var curpage = $ (this) .text ();

_self.gotopage (curpage);

-

-

}อื่น{

สำหรับ (var i = math.floor (_self.curpage/10)*10+1; i <= math.ceil (_self.curpage/10)*10; i ++) {

_self._num = document.createelement ("li");

_self._numa = document.createElement ("A");

_self._numa.innerhtml = i;

_self._num.appendchild (_self._numa);

this.pagecontentid.appendchild (_self._num);

_self._num.onclick = function () {

var curpage = $ (this) .text ();

_self.gotopage (curpage);

-

-

-

-

-

-

$ (". pagination li") แต่ละ (ฟังก์ชั่น () {

if ($ (นี่) [0] .innerText == _ self.curpage) {

$ (". pagination li"). เด็ก ๆ ("a"). RemoveClass ("navcur");

$ (นี่) ..children ("a"). addclass ("navcur");

-

-

-

getOpage: ฟังก์ชั่น (curpage) {

this.curpage = curpage;

this.callback.call (นี่, this.curpage);

this.init ();

console.log (this.curpage);

-

renderbtn: function () {

$ (". pagination"). html ("");

this.firstpage ();

this.prewpage ();

this.pagenum ();

this.nextpage ();

this.lastpage ();

-

-

$ (function () {

var pager = new pagelist ("pagediv", {

Curpage: 1,

TotalCount: 26,

Pagerows: 1,

การโทรกลับ: callbackfuc

-

Pager.init ();

-

ฟังก์ชั่น callbackfuc (curpage) {

-

ภาพประกอบ:

หน้านี้ขึ้นอยู่กับ 10 หน้า เมื่อต่ำกว่า 10 หน้าหน้าทั้งหมดจะปรากฏขึ้น เมื่อมากกว่า 10 หน้าหน้าจะหันไปแสดงหน้าที่เหลือ

วิธีการโทร:

การคัดลอกรหัสมีดังนี้:

$ (function () {

var pager = new pagelist ("pagediv", {

Curpage: 1,

TotalCount: 26,

Pagerows: 1,

การโทรกลับ: callbackfuc

-

Pager.init ();

-

ด้านบนเป็นรหัสหลักของส่วนประกอบเพจนี้ ฉันหวังว่าคุณจะชอบมัน