JQuery分页插件定位问题
JQuery Pagination Plugin Positioning Issue
我在一个web应用程序上使用jquery ui 1.10.4来分页并在网页上显示从数组列表中选择的项目数量。问题是列表的大小发生了变化，而分页按钮却没有随之移动。尽管列表(在最后一页，列表中只剩下几个项目可以查看)缩小了，但它们仍然固定在页面底部的位置。当我在网站上使用我的开发人员工具时，我发现如果我删除了绝对位置设置，分页按钮就会像它们应该的那样随着列表大小移动，所以我尝试用其他设置覆盖代码中的位置，如以下…
http://www.w3schools.com/cssref/pr_class_position.asp但是这不起作用。我试着进入jquery文件本身改变css设置，其中绝对定位设置，但文件是巨大的，我不确定哪一部分我需要改变到底。即使我找到了正确的位置，我也不确定要做什么改变才能让它起作用。我能把它删除吗，这样它的行为就像我用开发人员工具删除它时一样?我是这个东西的新手，所以我没有线索!
这是我的html代码，我实际上使用分页，注意绝对位置设置。我故意把这个留在这里，让你们看看。我可以在这里改变什么，使它的位置随着页面上列表的大小而变化，而不是停留在一个地方?
</table>
</form>
<div id="pager" class="pager" position="absolute">
<form>
<img src="includes/images/first.png" class="first"/>
<img src="includes/images/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="includes/images/next.png" class="next"/>
<img src="includes/images/last.png" class="last"/>
<select class="pagesize">
<option value="10">10 per page</option>
<option value="25">25 per page</option>
<option value="50">50 per page</option>
</select>
</form>
</div>
这是我使用的jquery文件分页，我不确定在哪里改变绝对设置，如果这是必要的。
;(function($){
/*******************************************************************************************/
// jquery.pajinate.js - version 0.4
// A jQuery plugin for paginating through any number of DOM elements
//
// Copyright (c) 2010, Wes Nolte (http://wesnolte.com)
// Licensed under the MIT License (MIT-LICENSE.txt)
// http://www.opensource.org/licenses/mit-license.php
// Created: 2010-04-16 | Updated: 2010-04-26
//
/*******************************************************************************************/
$.fn.pajinate = function(options){
// Set some state information
var current_page = 'current_page';
var items_per_page = 'items_per_page';
var meta;
// Setup default option values
var defaults = {
item_container_id : '.content',
items_per_page : 10,
nav_panel_id : '.page_navigation',
nav_info_id : '.info_text',
num_page_links_to_display : 20,
start_page : 0,
wrap_around : false,
nav_label_first : 'First',
nav_label_prev : 'Prev',
nav_label_next : 'Next',
nav_label_last : 'Last',
nav_order : ["first", "prev", "num", "next", "last"],
nav_label_info : 'Showing {0}-{1} of {2} results',
show_first_last: true,
abort_on_small_lists: false,
jquery_ui: false,
jquery_ui_active: "ui-state-highlight",
jquery_ui_default: "ui-state-default",
jquery_ui_disabled: "ui-state-disabled"
};
var options = $.extend(defaults,options);
var $item_container;
var $page_container;
var $items;
var $nav_panels;
var total_page_no_links;
var jquery_ui_default_class = options.jquery_ui ? options.jquery_ui_default : '';
var jquery_ui_active_class = options.jquery_ui ? options.jquery_ui_active : '';
var jquery_ui_disabled_class = options.jquery_ui ? options.jquery_ui_disabled : '';
return this.each(function(){
$page_container = $(this);
$item_container = $(this).find(options.item_container_id);
$items = $page_container.find(options.item_container_id).children();
if (options.abort_on_small_lists && options.items_per_page >= $items.size())
return $page_container;
meta = $page_container;
// Initialize meta data
meta.data(current_page,0);
meta.data(items_per_page, options.items_per_page);
// Get the total number of items
var total_items = $item_container.children().size();
// Calculate the number of pages needed
var number_of_pages = Math.ceil(total_items/options.items_per_page);
// Construct the nav bar
var more = '<span class="ellipse more">...</span>';
var less = '<span class="ellipse less">...</span>';
var first = !options.show_first_last ? '' : '<a class="first_link '+ jquery_ui_default_class +'" href="">'+ options.nav_label_first +'</a>';
var last = !options.show_first_last ? '' : '<a class="last_link '+ jquery_ui_default_class +'" href="">'+ options.nav_label_last +'</a>';
var navigation_html = "";
for(var i = 0; i < options.nav_order.length; i++) {
switch (options.nav_order[i]) {
case "first":
navigation_html += first;
break;
case "last":
navigation_html += last;
break;
case "next":
navigation_html += '<a class="next_link '+ jquery_ui_default_class +'" href="">'+ options.nav_label_next +'</a>';
break;
case "prev":
navigation_html += '<a class="previous_link '+ jquery_ui_default_class +'" href="">'+ options.nav_label_prev +'</a>';
break;
case "num":
navigation_html += less;
var current_link = 0;
while(number_of_pages > current_link){
navigation_html += '<a class="page_link '+ jquery_ui_default_class +'" href="" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
current_link++;
}
navigation_html += more;
break;
default:
break;
}
}
// And add it to the appropriate area of the DOM
$nav_panels = $page_container.find(options.nav_panel_id);
$nav_panels.html(navigation_html).each(function(){
$(this).find('.page_link:first').addClass('first');
$(this).find('.page_link:last').addClass('last');
});
// Hide the more/less indicators
$nav_panels.children('.ellipse').hide();
// Set the active page link styling
$nav_panels.find('.previous_link').next().next().addClass('active_page '+ jquery_ui_active_class);
/* Setup Page Display */
// And hide all pages
$items.hide();
// Show the first page
$items.slice(0, meta.data(items_per_page)).show();
/* Setup Nav Menu Display */
// Page number slices
total_page_no_links = $page_container.children(options.nav_panel_id+':first').children('.page_link').size();
options.num_page_links_to_display = Math.min(options.num_page_links_to_display,total_page_no_links);
$nav_panels.children('.page_link').hide(); // Hide all the page links
// And only show the number we should be seeing
$nav_panels.each(function(){
$(this).children('.page_link').slice(0, options.num_page_links_to_display).show();
});
/* Bind the actions to their respective links */
// Event handler for 'First' link
$page_container.find('.first_link').click(function(e){
e.preventDefault();
movePageNumbersRight($(this),0);
gotopage(0);
});
// Event handler for 'Last' link
$page_container.find('.last_link').click(function(e){
e.preventDefault();
var lastPage = total_page_no_links - 1;
movePageNumbersLeft($(this),lastPage);
gotopage(lastPage);
});
// Event handler for 'Prev' link
$page_container.find('.previous_link').click(function(e){
e.preventDefault();
showPrevPage($(this));
});
// Event handler for 'Next' link
$page_container.find('.next_link').click(function(e){
e.preventDefault();
showNextPage($(this));
});
// Event handler for each 'Page' link
$page_container.find('.page_link').click(function(e){
e.preventDefault();
gotopage($(this).attr('longdesc'));
});
// Goto the required page
gotopage(parseInt(options.start_page));
toggleMoreLess();
if(!options.wrap_around)
tagNextPrev();
});
function showPrevPage(e){
new_page = parseInt(meta.data(current_page)) - 1;
// Check that we aren't on a boundary link
if($(e).siblings('.active_page').prev('.page_link').length==true){
movePageNumbersRight(e,new_page);
gotopage(new_page);
}else if(options.wrap_around){
gotopage(total_page_no_links-1);
}
};
function showNextPage(e){
new_page = parseInt(meta.data(current_page)) + 1;
// Check that we aren't on a boundary link
if($(e).siblings('.active_page').next('.page_link').length==true){
movePageNumbersLeft(e,new_page);
gotopage(new_page);
} else if (options.wrap_around) {
gotopage(0);
}
};
function gotopage(page_num){
var ipp = parseInt(meta.data(items_per_page));
var isLastPage = false;
// Find the start of the next slice
start_from = page_num * ipp;
// Find the end of the next slice
end_on = start_from + ipp;
// Hide the current page
var items = $items.hide().slice(start_from, end_on);
items.show();
// Reassign the active class
$page_container.find(options.nav_panel_id).children('.page_link[longdesc=' + page_num +']').addClass('active_page '+ jquery_ui_active_class)
.siblings('.active_page')
.removeClass('active_page ' + jquery_ui_active_class);
// Set the current page meta data
meta.data(current_page,page_num);
$page_container.find(options.nav_info_id).html(options.nav_label_info.replace("{0}",start_from+1).
replace("{1}",start_from + items.length).replace("{2}",$items.length));
// Hide the more and/or less indicators
toggleMoreLess();
// Add a class to the next or prev links if there are no more pages next or previous to the active page
tagNextPrev();
};
// Methods to shift the diplayed index of page numbers to the left or right
function movePageNumbersLeft(e, new_p){
var new_page = new_p;
var $current_active_link = $(e).siblings('.active_page');
if($current_active_link.siblings('.page_link[longdesc=' + new_page +']').css('display') == 'none'){
$nav_panels.each(function(){
$(this).children('.page_link')
.hide() // Hide all the page links
.slice(parseInt(new_page - options.num_page_links_to_display + 1) , new_page + 1)
.show();
});
}
}
function movePageNumbersRight(e, new_p){
var new_page = new_p;
var $current_active_link = $(e).siblings('.active_page');
if($current_active_link.siblings('.page_link[longdesc=' + new_page +']').css('display') == 'none'){
$nav_panels.each(function(){
$(this).children('.page_link')
.hide() // Hide all the page links
.slice( new_page , new_page + parseInt(options.num_page_links_to_display))
.show();
});
}
}
// Show or remove the ellipses that indicate that more page numbers exist in the page index than are currently shown
function toggleMoreLess(){
if(!$nav_panels.children('.page_link:visible').hasClass('last')){
$nav_panels.children('.more').show();
}else {
$nav_panels.children('.more').hide();
}
if(!$nav_panels.children('.page_link:visible').hasClass('first')){
$nav_panels.children('.less').show();
}else {
$nav_panels.children('.less').hide();
}
}
/* Add the style class ".no_more" to the first/prev and last/next links to allow custom styling */
function tagNextPrev() {
if($nav_panels.children('.last').hasClass('active_page')){
$nav_panels.children('.next_link').add('.last_link').addClass('no_more ' + jquery_ui_disabled_class);
} else {
$nav_panels.children('.next_link').add('.last_link').removeClass('no_more ' + jquery_ui_disabled_class);
}
if($nav_panels.children('.first').hasClass('active_page')){
$nav_panels.children('.previous_link').add('.first_link').addClass('no_more ' + jquery_ui_disabled_class);
} else {
$nav_panels.children('.previous_link').add('.first_link').removeClass('no_more ' + jquery_ui_disabled_class);
}
}
};
})(jQuery);
我不认为这是一个JS设置-至少，在你的JS代码中没有提到"pager"。这里有一些解决方案，分别尝试一下，看看是否有一个适合你。
1)原始的css修复(把它尽可能低，你可以在css输出):
#pager.pager { position: relative !important; }
2a) jQuery强制样式(尽可能晚的JS输出:
$(document).ready(function($){
//force element with ID & class of pager to relative pos.
$("#pager.pager").attr("style","position:relative !important;");
});
b) jQuery移除可能导致abs. position的属性
$(document).ready(function($){
//remove position attribute from element with id and class of pager
$("#pager.pager").removeAttr("position");
});
3)检查HTML元素是否有position=absolute作为属性
- 如果没有，这是一个JS问题，因为该属性是动态应用的。
- 如果是，请删除。
注意你的原始html有一个position ATTRIBUTE为"absolute"。这意味着可能有未列出的代码正在查找该属性。
一般来说，似乎这里接受的做法是完整的代码示例或JS箱。您可能需要挖掘更多的代码-这里有缺失的部分。
相关文章：
- 背景定位下拉菜单问题
- Javascript函数不工作.脚本定位问题
- Zebra DatePicker定位问题
- Jquery.家长定位问题
- 剑道ui工具提示在网格中的定位问题
- 在Handontable中评论定位问题
- Highcharts数据FF和IE中的标签定位问题
- JavaScript 自动完成自制定位问题
- 缺少 iframe ie8.相对定位不能解决问题
- 幻灯片JS高度和按钮定位问题
- 使用此 javascript 在 IE7 中收到“对象不支持此属性或方法”错误，以及选项卡未正确定位的问题
- 元素的绝对定位问题
- 角度光标定位问题
- Chardin.js绝对定位的z指数问题
- 绝对定位导航箭头问题
- 在我的网页上定位 Canvas HTML5 游戏时遇到问题
- 在定位选择器(或其他东西）时遇到问题
- Translate3d per JavaScript， jQuery的定位问题
- 关于使用类名定位第一个上一个最近元素的问题
- 拖放保存定位问题
