Kod pelaksanaan Pager JQuery_jquery
Contoh dalam artikel ini berkongsi kod pelaksanaan khusus JQuery's Pager untuk rujukan anda Kandungan khusus adalah seperti berikut
Rendering:
Kod:
kod html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页器</title>
<link href="pager.css" rel="stylesheet"/>
</head>
<body>
<div id="pager"></div>
<script src="pager.js"></script>
<script>
function doChangePage(obj){
//TO DO
}
var pagerBox = document.getElementById('pager');
var pager = new Pager({
index: 1,
total: 15,
parent: pagerBox,
onchange: doChangePage
});
</script>
</body>
</html>
kod css:
.pager-box:after{
display:block;
height:0;
visibility:hidden;
clear:both;
content:'';
}
.pager{
float:left;
position:relative;
left:50%;
font-family:微软雅黑;
}
.pager a,.pager span{
position:relative;
left:-50%;
display:block;
float:left;
margin-left:5px;
border:1px solid #b6bcc1;
padding: 5px 10px;
text-decoration:none;
color:#b6bcc1;
border-radius:3px;
}
.pager span{
border:0;
}
.pager a.js-selected{
background:#b6bcc1;
color:#fff;
cursor:default;
}
.pager a.js-disabled{
background:#f1f1f1;
border-color:#f1f1f1;
cursor:default;
color:#fff;
}kod pager.js
(function(window, undefined){
/**
* 创建元素节点并返回
*/
function create(tagName, className, parent){
var element = document.createElement(tagName);
element.className = className;
parent.appendChild(element);
return element;
}
/**
* 数组消除重复
*/
function clearRepeat(arr){
var obj = {},
result = [];
for(var i = 0, len = arr.length; i < len; i++){
obj[arr[i]] = 1;
}
for(var i in obj){
result.push(i);
}
return result;
}
/**
* 添加类名
*/
function addClassName(element, className){
var aClass = element.className.split(' ');
aClass.push(className);
aClass = clearRepeat(aClass);
element.className = aClass.join(' ');
}
/**
* 删除类名
*/
function delClassName(element, className){
var aClass = element.className.split(' '),
index = aClass.indexOf(className);
if(index > 0) aClass.splice(index, 1);
element.className = aClass.join(' ');
}
/**
* 检查是否含有类名
* @param element
* @param className
* @returns {boolean}
*/
function hasClassName(element, className){
var aClass = element.className.split(' '),
index = aClass.indexOf(className);
if(index > 0) return true;
return false;
}
var Pager = function(obj){
this.__total = obj.total || 1;
this.__index = obj.index || 1;
this.__parent = obj.parent;
this.__onchange = obj.onchange;
//初始化分页器
this.__init(obj);
};
var pro = Pager.prototype;
/**
* 初始化分页器
*/
pro.__init = function(obj){
if(this.__total < this.__index) return;
//存储数字
this.__numbers = [];
//储存省略号
this.__dots = [];
this.__wrapper = create('div', 'pager-box', this.__parent);
this.__body = create('div', 'pager', this.__wrapper);
//存储上一页
this.__preBtn = create('a', 'prev', this.__body);
this.__preBtn.href = 'javascript:void(0);';
this.__preBtn.innerText = (obj.label && obj.label.prev) || '上一页';
//存储数字
if(this.__total < 8){
for(var i = 0; i < this.__total; i++){
var t = create('a', 'number', this.__body);
t.href = 'javascript:void(0);';
t.innerText = i + 1;
this.__numbers.push(t);
}
}else{
for(var i = 0; i < 2; i++){
var t = create('span', 'dots', this.__body);
t.innerText = '...';
this.__dots.push(t);
};
for(var i = 0; i < 7; i++){
var t = create('a', 'number', this.__body);
t.href = 'javascript:void(0);';
this.__numbers.push(t);
}
}
//存储下一页
this.__nextBtn = create('a', 'next', this.__body);
this.__nextBtn.href = 'javascript:void(0);';
this.__nextBtn.innerText = (obj.label && obj.label.next) || '下一页';
//
this._$setIndex(this.__index);
//
this.__body.onclick = this.__doClick.bind(this);
};
pro.__doClick = function(e){
var e = e || window.event,
target = e.target || e.srcElement;
//点击省略号
if(target.tagName.toLowerCase() == 'span') return;
//点击了不能点击的上一页或者下一页
if(hasClassName(target, 'js-disabled')) return;
//点击了当前页
if(hasClassName(target, 'js-selected')) return;
if(target == this.__preBtn){
//点击了上一页
this._$setIndex(this.__index - 1);
}else if(target == this.__nextBtn){
//点击了下一页
this._$setIndex(this.__index + 1);
}else{
//点击了数字
var index = target.innerText;
this._$setIndex(index);
}
};
/**
* 跳转页数
*/
pro._$setIndex = function(index){
index = parseInt(index);
//更新信息
if(index != this.__index){
this.__last = this.__index;
this.__index = index;
}
//处理
delClassName(this.__preBtn, 'js-disabled');
delClassName(this.__nextBtn, 'js-disabled');
if(this.__total < 8){
//总页数小于8的情况
if(this.__last) delClassName(this.__numbers[this.__last - 1], 'js-selected');
addClassName(this.__numbers[this.__index - 1], 'js-selected');
if(this.__index == 1) addClassName(this.__preBtn, 'js-disabled');
if(this.__index == this.__total) addClassName(this.__nextBtn, 'js-disabled');
}else{
this.__dots[0].style.display = 'none';
this.__dots[1].style.display = 'none';
for(var i = 0; i < 7; i++){
delClassName(this.__numbers[i], 'js-selected');
};
if(this.__index < 5){
for(var i = 0; i < 6; i++){
this.__numbers[i].innerText = i + 1;
}
this.__numbers[6].innerText = this.__total;
this.__dots[1].style.display = 'block';
this.__body.insertBefore(this.__dots[1], this.__numbers[6]);
addClassName(this.__numbers[this.__index - 1], 'js-selected');
if(this.__index == 1) addClassName(this.__preBtn, 'js-disabled');
}else if(this.__index > this.__total - 4){
for(var i = 1; i < 7; i++){
this.__numbers[i].innerText = this.__total + i -6;
}
this.__numbers[0].innerText = '1';
this.__dots[0].style.display = 'block';
this.__body.insertBefore(this.__dots[0], this.__numbers[1]);
addClassName(this.__numbers[this.__index + 6 - this.__total], 'js-selected');
if(this.__index == this.__total) addClassName(this.__nextBtn, 'js-disabled');
}else{
this.__numbers[0].innerText = '1';
for(var i = 1; i < 6; i++){
this.__numbers[i].innerText = this.__index - 3 + i;
if(i == 3) addClassName(this.__numbers[i], 'js-selected');
}
this.__numbers[6].innerText = this.__total;
this.__dots[0].style.display = 'block';
this.__body.insertBefore(this.__dots[0], this.__numbers[1]);
this.__dots[1].style.display = 'block';
this.__body.insertBefore(this.__dots[1], this.__numbers[6]);
}
}
if(typeof this.__onchange == 'function'){
this.__onchange({
index: this.__index,
last: this.__last,
total: this.__total
})
}
};
/**
* 得到总页数
*/
pro._$getIndex = function(){
return this.__index;
};
/**
* 得到上一个页数
*/
pro._$getLast = function(){
return this.__last;
};
//变成全局
window.Pager = Pager;
})(window);
Idea utama:
Penomboran dibahagikan kepada 4 situasi berikut:
Kes 1, apabila jumlah < 8, semua nombor halaman dipaparkan.
Kes 2, apabila jumlah >= 8 dan indeks <
Kes 3, apabila jumlah >= 8 dan indeks > jumlah - 4, paparan 1 dan 6 item terakhir.
Kes 4, apabila jumlah >= 8 dan 5 <= indeks <= jumlah - 4, paparan 1 dan halaman terakhir, dan 5 item dalam tengah.
Masukkan objek tetapan apabila membuat seketika kelas Pager:
{
parent: element, //给分页器设置父节点
index: index, //设置当前页
total: total, //设置总页数
onchange: function(){} //页数变化回调函数
}
Apabila kita membuat instantiate Pager, laksanakan pernyataan dalam badan fungsi Pager, mula-mula tetapkan nilai, dan kemudian laksanakan fungsi permulaan:
var Pager = function(obj){
//赋值
this.__total = obj.total || 1;
this.__index = obj.index || 1;
this.__parent = obj.parent;
this.__onchange = obj.onchange;
//初始化分页器
this.__init(obj);
};
Fungsi permulaan ini.__struktur init:
Pager.prototype.__init = function(obj){
(根据上面分析的情况进行处理)
...
this._$setIndex(this.__index); //跳转到初始页
//绑定分页器点击函数
this.__body.onclick = this.__doClick.bind(this);
};
Inisialisasi selesai selepas mengklik, pertimbangan yang sepadan akan dibuat dan ini._$setIndex(index) akan digunakan untuk melompat.
Untuk lebih banyak artikel tentang tutorial penomboran, sila lihat topik berikut:
operasi fungsi paging javascript
operasi fungsi paging jquery
operasi fungsi paging php
Kendalian fungsi paging ASP.NET
Muat turun: kertas
Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1387
52
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery?
Feb 28, 2024 pm 03:12 PM
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Dalam jQuery, kaedah menghantar permintaan PUT adalah serupa dengan menghantar jenis permintaan lain, tetapi anda perlu memberi perhatian kepada beberapa butiran dan tetapan parameter. Permintaan PUT biasanya digunakan untuk mengemas kini sumber, seperti mengemas kini data dalam pangkalan data atau mengemas kini fail pada pelayan. Berikut ialah contoh kod khusus menggunakan kaedah permintaan PUT dalam jQuery. Mula-mula, pastikan anda memasukkan fail perpustakaan jQuery, kemudian anda boleh menghantar permintaan PUT melalui: $.ajax({u
Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery?
Feb 28, 2024 am 08:39 AM
Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery? Dalam pembangunan bahagian hadapan, kita sering menghadapi keperluan untuk memanipulasi atribut ketinggian elemen. Kadangkala, kita mungkin perlu menukar ketinggian unsur secara dinamik, dan kadangkala kita perlu mengalih keluar atribut ketinggian unsur. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mengalih keluar atribut ketinggian elemen dan memberikan contoh kod khusus. Sebelum menggunakan jQuery untuk mengendalikan atribut ketinggian, kita perlu terlebih dahulu memahami atribut ketinggian dalam CSS. Atribut ketinggian digunakan untuk menetapkan ketinggian elemen
Petua jQuery: Cepat ubah suai teks semua teg pada halaman
Feb 28, 2024 pm 09:06 PM
Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: <
Gunakan jQuery untuk mengubah suai kandungan teks semua teg
Feb 28, 2024 pm 05:42 PM
Tajuk: Gunakan jQuery untuk mengubah suai kandungan teks semua teg jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas untuk mengendalikan operasi DOM. Dalam pembangunan web, kita sering menghadapi keperluan untuk mengubah suai kandungan teks tag pautan (tag) pada halaman. Artikel ini akan menerangkan cara menggunakan jQuery untuk mencapai matlamat ini dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman. Tambahkan kod berikut dalam fail HTML:
Cara terbaik untuk melaksanakan penomboran tatasusunan dalam PHP
May 04, 2024 pm 02:39 PM
Terdapat dua cara paling biasa untuk menomborkan tatasusunan PHP: menggunakan fungsi array_slice(): hitung bilangan elemen untuk dilangkau, dan kemudian ekstrak julat elemen yang ditentukan. Gunakan iterator terbina dalam: laksanakan antara muka Iterator, dan kaedah rewind(), key(), current(), next(), dan valid() digunakan untuk melintasi elemen dalam julat yang ditentukan.
Fahami peranan dan senario aplikasi eq dalam jQuery
Feb 28, 2024 pm 01:15 PM
jQuery ialah perpustakaan JavaScript popular yang digunakan secara meluas untuk mengendalikan manipulasi DOM dan pengendalian acara dalam halaman web. Dalam jQuery, kaedah eq() digunakan untuk memilih elemen pada kedudukan indeks tertentu Senario penggunaan dan aplikasi khusus adalah seperti berikut. Dalam jQuery, kaedah eq() memilih elemen pada kedudukan indeks yang ditentukan. Kedudukan indeks mula dikira dari 0, iaitu indeks elemen pertama ialah 0, indeks elemen kedua ialah 1, dan seterusnya. Sintaks kaedah eq() adalah seperti berikut: $("s
Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu?
Feb 29, 2024 am 09:03 AM
Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Apabila menggunakan jQuery untuk mengendalikan elemen DOM, anda sering menghadapi situasi di mana anda perlu menentukan sama ada sesuatu elemen mempunyai atribut tertentu. Dalam kes ini, kita boleh melaksanakan fungsi ini dengan mudah dengan bantuan kaedah yang disediakan oleh jQuery. Berikut akan memperkenalkan dua kaedah yang biasa digunakan untuk menentukan sama ada elemen jQuery mempunyai atribut khusus, dan melampirkan contoh kod tertentu. Kaedah 1: Gunakan kaedah attr() dan operator jenis // untuk menentukan sama ada elemen mempunyai atribut tertentu
Pengenalan kepada cara menambah baris baharu pada jadual menggunakan jQuery
Feb 29, 2024 am 08:12 AM
jQuery ialah perpustakaan JavaScript yang popular digunakan secara meluas dalam pembangunan web. Semasa pembangunan web, selalunya perlu menambah baris baharu secara dinamik pada jadual melalui JavaScript. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menambah baris baharu pada jadual dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman HTML. Pustaka jQuery boleh diperkenalkan dalam teg melalui kod berikut:
