1
根据标题，我只需要分页顶层列表项目 - 不是嵌套列表项目 - 但插件不能正确计算#holder UL的高度了！如何使Sweet Pages插件仅与顶级LIs一起使用？
但是，让我们从头开始，让我们说我有以下的无序列表：
<div id="main">
<ul id="holder">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul><li>Inner List</li></ul></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>这里的，对此，我试图改变的码数13行，以便脚本忽略嵌套列表项的分页：
(function($){
// Creating the sweetPages jQuery plugin:
$.fn.sweetPages = function(opts){
\t
\t // If no options were passed, create an empty opts object
\t if(!opts) opts = {};
\t
\t var resultsPerPage = opts.perPage || 3;
\t
\t // The plugin works best for unordered lists, althugh ols would do just as well:
\t var ul = this;
\t var li = ul.find('>li');
\t
\t li.each(function(){
\t \t // Calculating the height of each li element, and storing it with the data method:
\t \t var el = $(this);
\t \t el.data('height',el.outerHeight(true));
\t });
\t
\t // Calculating the total number of pages:
\t var pagesNumber = Math.ceil(li.length/resultsPerPage);
\t
\t // If the pages are less than two, do nothing:
\t if(pagesNumber<2) return this;
\t // Creating the controls div:
\t var swControls = $('<div class="swControls">');
\t
\t for(var i=0;i<pagesNumber;i++)
\t {
\t \t // Slice a portion of the lis, and wrap it in a swPage div:
\t \t li.slice(i*resultsPerPage,(i+1)*resultsPerPage).wrapAll('<div class="swPage" />');
\t \t
\t \t // Adding a link to the swControls div:
\t \t swControls.append('<a href="" class="swShowPage">'+(i+1)+'</a>');
\t }
\t ul.append(swControls);
\t
\t var maxHeight = 0;
\t var totalWidth = 0;
\t
\t var swPage = ul.find('.swPage');
\t swPage.each(function(){
\t \t
\t \t // Looping through all the newly created pages:
\t \t
\t \t var elem = $(this);
\t \t var tmpHeight = 0;
\t \t elem.find('li').each(function(){tmpHeight+=$(this).data('height');});
\t \t if(tmpHeight>maxHeight)
\t \t \t maxHeight = tmpHeight;
\t \t totalWidth+=elem.outerWidth();
\t \t
\t \t elem.css('float','left').width(ul.width());
\t });
\t
\t swPage.wrapAll('<div class="swSlider" />');
\t
\t // Setting the height of the ul to the height of the tallest page:
\t ul.height(maxHeight);
\t
\t var swSlider = ul.find('.swSlider');
\t swSlider.append('<div class="clear" />').width(totalWidth);
\t var hyperLinks = ul.find('a.swShowPage');
\t
\t hyperLinks.click(function(e){
\t \t
\t \t // If one of the control links is clicked, slide the swSlider div
\t \t // (which contains all the pages) and mark it as active:
\t \t $(this).addClass('active').siblings().removeClass('active');
\t \t
\t \t swSlider.stop().animate({'margin-left':-(parseInt($(this).text())-1)*ul.width()},'slow');
\t \t e.preventDefault();
\t });
\t
\t // Mark the first link as active the first time this code runs:
\t hyperLinks.eq(0).addClass('active');
\t
\t // Center the control div:
\t swControls.css({
\t \t 'left':'50%',
\t \t 'margin-left':-swControls.width()/2
\t });
\t
\t return this;
\t
}})(jQuery);
$(document).ready(function(){
\t /* The following code is executed once the DOM is loaded */
\t
\t // Calling the jQuery plugin and splitting the
\t // #holder UL into pages of 3 LIs each:
\t
\t $('#holder').sweetPages({perPage:3});
\t
\t // The default behaviour of the plugin is to insert the
\t // page links in the ul, but we need them in the main container:
\t var controls = $('.swControls').detach();
\t controls.appendTo('#main');
\t
});正如您所见，here插件返回正确的页数，但不能正确计算最高页面的高度。
你能帮我吗？
在此先感谢！
现在的作品！ ！多谢了朋友！！！ P.S：如何在一英寸的水中淹死，LOL！ XD – Furlan86