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