[英]jQuery pagination + Twitter Bootstrap
我正在尝试修改Jquery分页( 基于此Jquery分页教程 - 演示 )以使用令人敬畏的twitter引导程序。
Twitter Bootstrap的标准分页设置如下所示,因此这是分页输出结构的目标。
<div class="pagination">
<ul>
<li class="prev disabled"><a href="#">← Previous</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="next"><a href="#">Next →</a></li>
</ul>
</div>
到目前为止,我可以通过更改html输出结构来实现它,但由于我将输出从<a>
更改为<li>
标记,因此活动突出显示无法正常工作。
prev
按钮 <li>
next
按钮 prev
按钮,使其再次工作 这是标准的jQuery.pagination库,我已经修改它以使用twitter bootstrap。
创建div -
<div id="myPager" class="pagination"></div>
然后
$('#myPager').pagination(100,{callback:function(page,component){
console.info(page);
}})
这是图书馆的代码。
jQuery.fn.pagination = function(maxentries, opts){
opts = jQuery.extend({
items_per_page:10,
num_display_entries:10,
current_page:0,
num_edge_entries:0,
link_to:"javascript:void(0)",
first_text:"First",
last_text:"Last",
prev_text:"Prev",
next_text:"Next",
ellipse_text:"...",
prev_show_always:true,
next_show_always:true,
callback:function(){return false;}
},opts||{});
return this.each(function() {
/**
* Calculate the maximum number of pages
*/
function numPages() {
return Math.ceil(maxentries/opts.items_per_page);
}
/**
* Calculate start and end point of pagination links depending on
* current_page and num_display_entries.
* @return {Array}
*/
function getInterval() {
var ne_half = Math.ceil(opts.num_display_entries/2);
var np = numPages();
var upper_limit = np-opts.num_display_entries;
var start = current_page>ne_half?Math.max(Math.min(current_page-ne_half, upper_limit), 0):0;
var end = current_page>ne_half?Math.min(current_page+ne_half, np):Math.min(opts.num_display_entries, np);
return [start,end];
}
/**
* This is the event handling function for the pagination links.
* @param {int} page_id The new page number
*/
function pageSelected(page_id, evt){
current_page = page_id;
drawLinks();
var continuePropagation = opts.callback(page_id, panel);
if (!continuePropagation) {
if (evt.stopPropagation) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
}
return continuePropagation;
}
/**
* This function inserts the pagination links into the container element
*/
function drawLinks() {
panel.empty();
var list = jQuery("<ul></ul>");
panel.append(list);
var interval = getInterval();
var np = numPages();
// This helper function returns a handler function that calls pageSelected with the right page_id
var getClickHandler = function(page_id) {
return function(evt){ return pageSelected(page_id,evt); }
}
// Helper function for generating a single link (or a span tag if it's the current page)
var appendItem = function(page_id, appendopts){
page_id = page_id<0?0:(page_id<np?page_id:np-1); // Normalize page id to sane value
appendopts = jQuery.extend({text:page_id+1, classes:""}, appendopts||{});
if(page_id == current_page){
var clazz = appendopts.side ? 'disabled' : 'active';
var lstItem = jQuery("<li class='"+clazz+"'><a>"+(appendopts.text)+"</a></li>")
}
else
{
var a = jQuery("<a>"+(appendopts.text)+"</a>")
.attr('href', opts.link_to.replace(/__id__/,page_id));;
var lstItem = jQuery("<li></li>")
.bind("click", getClickHandler(page_id));
lstItem.append(a);
}
if(appendopts.classes){lstItem.addClass(appendopts.classes);}
list.append(lstItem);
}
// Generate "Previous"-Link
if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){
appendItem(0, { text: opts.first_text, side: true });
appendItem(current_page-1,{text:opts.prev_text, side:true});
}
// Generate starting points
if (interval[0] > 0 && opts.num_edge_entries > 0)
{
var end = Math.min(opts.num_edge_entries, interval[0]);
for(var i=0; i<end; i++) {
appendItem(i);
}
if(opts.num_edge_entries < interval[0] && opts.ellipse_text)
{
jQuery("<li class='disabled'>"+opts.ellipse_text+"</li>").appendTo(list);
}
}
// Generate interval links
for(var i=interval[0]; i<interval[1]; i++) {
appendItem(i);
}
// Generate ending points
if (interval[1] < np && opts.num_edge_entries > 0)
{
if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)
{
jQuery("<li class='disabled'>"+opts.ellipse_text+"</li>").appendTo(list);
}
var begin = Math.max(np-opts.num_edge_entries, interval[1]);
for(var i=begin; i<np; i++) {
appendItem(i);
}
}
// Generate "Next"-Link
if(opts.next_text && (current_page < np-1 || opts.next_show_always)){
appendItem(current_page+1,{text:opts.next_text, side:true});
appendItem(np - 1, { text: opts.last_text, side: true });
}
}
// Extract current_page from options
var current_page = opts.current_page;
// Create a sane value for maxentries and items_per_page
maxentries = (!maxentries || maxentries < 0)?1:maxentries;
opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;
// Store DOM element for easy access from all inner functions
var panel = jQuery(this);
// Attach control functions to the DOM element
this.selectPage = function(page_id){ pageSelected(page_id);}
this.prevPage = function(){
if (current_page > 0) {
pageSelected(current_page - 1);
return true;
}
else {
return false;
}
}
this.nextPage = function(){
if(current_page < numPages()-1) {
pageSelected(current_page+1);
return true;
}
else {
return false;
}
}
// When all initialisation is done, draw the links
drawLinks();
// call callback function
//opts.callback(current_page, this);
});
}
将ID动态分配给#page_navigation
下的所有<li>
,并根据ID添加或删除active
类。
<script type="text/javascript">
$(document).ready(function(){
//how much items per page to show
var show_per_page = 5;
//getting the amount of elements inside content div
var number_of_items = $('#content').children().size();
//calculate the number of pages we are going to have
var number_of_pages = Math.ceil(number_of_items/show_per_page);
//set the value of our hidden input fields
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
var navigation_html = '<ul>';
navigation_html += '<li class="previous_link">';
navigation_html += '<a href="javascript:previous();">← Previous</a>';
navigation_html += '</li>';
var current_link = 0;
while(number_of_pages > current_link){
navigation_html += '<li class="page_link" id="id' + current_link +'">';
navigation_html += '<a href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
current_link++;
navigation_html += '</li>';
}
navigation_html += '<li>';
navigation_html += '<a class="next_link" href="javascript:next();">Next →</a>';
navigation_html += '</li>';
navigation_html += '</ul>';
$('#page_navigation').html(navigation_html);
//add active class to the first page link
$('#page_navigation .page_link:first').addClass('active');
//hide all the elements inside content div
$('#content').children().css('display', 'none');
//and show the first n (show_per_page) elements
$('#content').children().slice(0, show_per_page).css('display', 'block');
});
function previous(){
new_page = parseInt($('#current_page').val()) - 1;
//if there is an item before the current active link run the function
if($('.active').prev('.page_link').length==true){
go_to_page(new_page);
}
}
function next(){
new_page = parseInt($('#current_page').val()) + 1;
//if there is an item after the current active link run the function
if($('.active').next('.page_link').length==true){
go_to_page(new_page);
}
}
function go_to_page(page_num){
//get the number of items shown per page
var show_per_page = parseInt($('#show_per_page').val());
//get the element number where to start the slice from
start_from = page_num * show_per_page;
//get the element number where to end the slice
end_on = start_from + show_per_page;
activate_id = page_num;
var get_box = document.getElementById("id"+page_num);
//hide all children elements of content div, get specific items and show them
$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
/*get the page link that has longdesc attribute of the current page and add active class to it
and remove that class from previously active page link*/
$("#page_navigation").find('li.active').removeClass("active");
$(get_box).addClass("active");
//update the current page input field
$('#current_page').val(page_num);
}
</script>
要禁用prev按钮,在第一页上时只需使用:
<li class="disabled"><a href="#">Previous</a></li>
要在更改页面时更改活动li,只需将活动类放到显示页面的li中。
要在最后一页上禁用下一个按钮,只需使用前一个按钮,如:
<li class="disabled"><a href="#">Next</a></li>
我完全忘了这篇文章
但是我设法使用以下代码:
// Based on http://stackoverflow.com/questions/1262919/jquery-active-class-assignment and http://stackoverflow.com/questions/2037501/javascript-add-class-when-link-is-clicked
$(function() {
$('ul.nav li:first').addClass('active').show(); //Activate first tab
$('li a').click(function(e) {
//e.preventDefault();
var $this = $(this);
$this.closest('ul').children('li').removeClass('active');
$this.parent().addClass('active');
//Remove active from dropdown li
$('.dropdown').removeClass('active');
// Activate Home when clicked on the logo
$('.thelogo').click(function()
{
$('.nav li').removeClass('active');
$('.home').addClass('active');
});
});
});
主动突出显示由twitter的scrollspy javascript插件完成。 该插件在该页面中找到div id的引用,并在滚动它们时自动突出显示菜单项。 您还可以跳转到所需的部分,因为<a>
标记的href
属性指向同一页面上的引用。
几件事:
"#"
,它只是页面的顶部。 将它们更改为您想要的此页面上的html id属性。 "#"
符号,只需将href
指向绝对或相对URI即可。 <a>
的<li>
标签用于twitter引导程序包的顶部菜单的css格式。 如果您对突出显示有其他疑问,请查看scrollspy源,因为它非常容易阅读。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.