milardovich

Pajinate editado para usar anclajes de links

Mar 8th, 2012
162
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. ;(function($){
  2. /*******************************************************************************************/    
  3. // jquery.pajinate.js - version 0.4
  4. // A jQuery plugin for paginating through any number of DOM elements
  5. //
  6. // Copyright (c) 2010, Wes Nolte (http://wesnolte.com)
  7. // Licensed under the MIT License (MIT-LICENSE.txt)
  8. // http://www.opensource.org/licenses/mit-license.php
  9. // Created: 2010-04-16 | Updated: 2010-04-26
  10. //
  11. /*******************************************************************************************/
  12.  
  13.     $.fn.pajinate = function(options){
  14.         // Set some state information
  15.         var current_page = 'current_page';
  16.         var items_per_page = 'items_per_page';
  17.        
  18.         var meta;
  19.    
  20.         // Setup default option values
  21.         var defaults = {
  22.             item_container_id : '.content',
  23.             items_per_page : 10,           
  24.             nav_panel_id : '.page_navigation',
  25.             nav_info_id : '.info_text',
  26.             num_page_links_to_display : 20,        
  27.             start_page : 0,
  28.             wrap_around : false,
  29.             nav_label_first : 'First',
  30.             nav_label_prev : 'Prev',
  31.             nav_label_next : 'Next',
  32.             nav_label_last : 'Last',
  33.             nav_order : ["first", "prev", "num", "next", "last"],
  34.             nav_label_info : 'Showing {0}-{1} of {2} results',
  35.             show_first_last: true,
  36.             abort_on_small_lists: false,
  37.             jquery_ui: false,
  38.             jquery_ui_active: "ui-state-highlight",
  39.             jquery_ui_default: "ui-state-default",
  40.             jquery_ui_disabled: "ui-state-disabled"
  41.         };
  42.         var options = $.extend(defaults,options);
  43.         var $item_container;
  44.         var $page_container;
  45.         var $items;
  46.         var $nav_panels;
  47.         var total_page_no_links;
  48.         var jquery_ui_default_class = options.jquery_ui ? options.jquery_ui_default : '';
  49.         var jquery_ui_active_class = options.jquery_ui ? options.jquery_ui_active : '';
  50.         var jquery_ui_disabled_class = options.jquery_ui ? options.jquery_ui_disabled : '';
  51.    
  52.         return this.each(function(){
  53.             $page_container = $(this);
  54.             $item_container = $(this).find(options.item_container_id);
  55.             $items = $page_container.find(options.item_container_id).children();
  56.            
  57.             if (options.abort_on_small_lists && options.items_per_page >= $items.size())
  58.                 return $page_container;
  59.                
  60.             meta = $page_container;
  61.            
  62.             // Initialize meta data
  63.             meta.data(current_page,0);
  64.             meta.data(items_per_page, options.items_per_page);
  65.                    
  66.             // Get the total number of items
  67.             var total_items = $item_container.children().size();
  68.            
  69.             // Calculate the number of pages needed
  70.             var number_of_pages = Math.ceil(total_items/options.items_per_page);
  71.            
  72.             // Construct the nav bar
  73.             var more = '<span class="ellipse more">...</span>';
  74.             var less = '<span class="ellipse less">...</span>';
  75.             var first = !options.show_first_last ? '' : '<a class="first_link '+ jquery_ui_default_class +'" href="">'+ options.nav_label_first +'</a>';
  76.             var last = !options.show_first_last ? '' : '<a class="last_link '+ jquery_ui_default_class +'" href="">'+ options.nav_label_last +'</a>';
  77.            
  78.             var navigation_html = "";
  79.            
  80.             for(var i = 0; i < options.nav_order.length; i++) {
  81.                 switch (options.nav_order[i]) {
  82.                 case "first":
  83.                     navigation_html += first;
  84.                     break;
  85.                 case "last":
  86.                     navigation_html += last;
  87.                     break;
  88.                 case "next":
  89.                     navigation_html += '<a class="next_link '+ jquery_ui_default_class +'" href="">'+ options.nav_label_next +'</a>';
  90.                     break;
  91.                 case "prev":
  92.                     navigation_html += '<a class="previous_link '+ jquery_ui_default_class +'" href="">'+ options.nav_label_prev +'</a>';
  93.                     break;
  94.                 case "num":
  95.                     navigation_html += less;
  96.                     var current_link = 0;
  97.                     while(number_of_pages > current_link){
  98.                         navigation_html += '<a class="page_link '+ jquery_ui_default_class +'" href="" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
  99.                         current_link++;
  100.                     }
  101.                     navigation_html += more;
  102.                     break;
  103.                 default:
  104.                     break;
  105.                 }
  106.                    
  107.             }
  108.            
  109.             // And add it to the appropriate area of the DOM   
  110.             $nav_panels = $page_container.find(options.nav_panel_id);          
  111.             $nav_panels.html(navigation_html).each(function(){
  112.            
  113.                 $(this).find('.page_link:first').addClass('first');
  114.                 $(this).find('.page_link:last').addClass('last');
  115.                
  116.             });
  117.            
  118.             // Hide the more/less indicators
  119.             $nav_panels.children('.ellipse').hide();
  120.            
  121.             // Set the active page link styling
  122.             $nav_panels.find('.previous_link').next().next().addClass('active_page '+ jquery_ui_active_class);
  123.            
  124.             /* Setup Page Display */
  125.             // And hide all pages
  126.             $items.hide();
  127.             // Show the first page         
  128.             $items.slice(0, meta.data(items_per_page)).show();
  129.  
  130.             /* Setup Nav Menu Display */
  131.             // Page number slices
  132.            
  133.             total_page_no_links = $page_container.children(options.nav_panel_id+':first').children('.page_link').size();
  134.             options.num_page_links_to_display = Math.min(options.num_page_links_to_display,total_page_no_links);
  135.  
  136.             $nav_panels.children('.page_link').hide(); // Hide all the page links
  137.            
  138.             // And only show the number we should be seeing
  139.             $nav_panels.each(function(){
  140.                 $(this).children('.page_link').slice(0, options.num_page_links_to_display).show();         
  141.             });
  142.            
  143.             /* Bind the actions to their respective links */
  144.              
  145.             // Event handler for 'First' link
  146.             $page_container.find('.first_link').click(function(e){
  147.                 e.preventDefault();
  148.                
  149.                 movePageNumbersRight($(this),0);
  150.                 gotopage(0);
  151.                 window.location.hash = '#anclaje';             
  152.             });        
  153.            
  154.             // Event handler for 'Last' link
  155.             $page_container.find('.last_link').click(function(e){
  156.                 e.preventDefault();
  157.                 var lastPage = total_page_no_links - 1;
  158.                 movePageNumbersLeft($(this),lastPage);
  159.                 gotopage(lastPage);
  160.                 window.location.hash = '#anclaje';             
  161.             });        
  162.            
  163.             // Event handler for 'Prev' link
  164.             $page_container.find('.previous_link').click(function(e){
  165.                 e.preventDefault();
  166.                 showPrevPage($(this));
  167.                 window.location.hash = '#anclaje';
  168.             });
  169.            
  170.            
  171.             // Event handler for 'Next' link
  172.             $page_container.find('.next_link').click(function(e){
  173.                 e.preventDefault();            
  174.                 showNextPage($(this));
  175.                 window.location.hash = '#anclaje';
  176.             });
  177.            
  178.             // Event handler for each 'Page' link
  179.             $page_container.find('.page_link').click(function(e){
  180.                 e.preventDefault();
  181.                 gotopage($(this).attr('longdesc'));
  182.                 window.location.hash = '#anclaje';
  183.             });        
  184.            
  185.             // Goto the required page
  186.             gotopage(parseInt(options.start_page));
  187.             toggleMoreLess();
  188.             if(!options.wrap_around)
  189.                 tagNextPrev();
  190.         });
  191.        
  192.         function showPrevPage(e){
  193.             new_page = parseInt(meta.data(current_page)) - 1;                      
  194.            
  195.             // Check that we aren't on a boundary link
  196.             if($(e).siblings('.active_page').prev('.page_link').length==true){
  197.                 movePageNumbersRight(e,new_page);
  198.                 gotopage(new_page);
  199.             }else if(options.wrap_around){
  200.                 gotopage(total_page_no_links-1);  
  201.             }
  202.  
  203.                
  204.         };
  205.            
  206.         function showNextPage(e){
  207.             new_page = parseInt(meta.data(current_page)) + 1;
  208.            
  209.             // Check that we aren't on a boundary link
  210.             if($(e).siblings('.active_page').next('.page_link').length==true){     
  211.                 movePageNumbersLeft(e,new_page);
  212.                 gotopage(new_page);
  213.             } else if (options.wrap_around) {
  214.                 gotopage(0);
  215.             }
  216.  
  217.                
  218.         };
  219.            
  220.         function gotopage(page_num){
  221.            
  222.             var ipp = parseInt(meta.data(items_per_page));
  223.            
  224.             var isLastPage = false;
  225.            
  226.             // Find the start of the next slice
  227.             start_from = page_num * ipp;
  228.            
  229.             // Find the end of the next slice
  230.             end_on = start_from + ipp;
  231.             // Hide the current page   
  232.             var items = $items.hide().slice(start_from, end_on);
  233.            
  234.             items.show();
  235.            
  236.             // Reassign the active class
  237.             $page_container.find(options.nav_panel_id).children('.page_link[longdesc=' + page_num +']').addClass('active_page '+ jquery_ui_active_class)
  238.                                                      .siblings('.active_page')
  239.                                                      .removeClass('active_page ' + jquery_ui_active_class);                                      
  240.            
  241.             // Set the current page meta data                          
  242.             meta.data(current_page,page_num);
  243.            
  244.             $page_container.find(options.nav_info_id).html(options.nav_label_info.replace("{0}",start_from+1).
  245.                     replace("{1}",start_from + items.length).replace("{2}",$items.length));
  246.            
  247.             // Hide the more and/or less indicators
  248.             toggleMoreLess();
  249.            
  250.             // Add a class to the next or prev links if there are no more pages next or previous to the active page
  251.             tagNextPrev();
  252.  
  253.         }; 
  254.        
  255.         // Methods to shift the diplayed index of page numbers to the left or right
  256.         function movePageNumbersLeft(e, new_p){
  257.             var new_page = new_p;
  258.            
  259.             var $current_active_link = $(e).siblings('.active_page');
  260.        
  261.             if($current_active_link.siblings('.page_link[longdesc=' + new_page +']').css('display') == 'none'){
  262.                
  263.                 $nav_panels.each(function(){
  264.                             $(this).children('.page_link')
  265.                                 .hide() // Hide all the page links
  266.                                 .slice(parseInt(new_page - options.num_page_links_to_display + 1) , new_page + 1)
  267.                                 .show();       
  268.                             });
  269.             }
  270.  
  271.            
  272.         }
  273.        
  274.         function movePageNumbersRight(e, new_p){
  275.             var new_page = new_p;
  276.            
  277.             var $current_active_link = $(e).siblings('.active_page');
  278.            
  279.             if($current_active_link.siblings('.page_link[longdesc=' + new_page +']').css('display') == 'none'){
  280.                                                
  281.                 $nav_panels.each(function(){
  282.                             $(this).children('.page_link')
  283.                                 .hide() // Hide all the page links
  284.                                 .slice( new_page , new_page + parseInt(options.num_page_links_to_display))
  285.                                 .show();
  286.                             });
  287.             }
  288.  
  289.         }
  290.        
  291.         // Show or remove the ellipses that indicate that more page numbers exist in the page index than are currently shown
  292.         function toggleMoreLess(){
  293.                                                      
  294.             if(!$nav_panels.children('.page_link:visible').hasClass('last')){                  
  295.                 $nav_panels.children('.more').show();
  296.             }else {
  297.                 $nav_panels.children('.more').hide();
  298.             }
  299.            
  300.             if(!$nav_panels.children('.page_link:visible').hasClass('first')){
  301.                 $nav_panels.children('.less').show();
  302.             }else {
  303.                 $nav_panels.children('.less').hide();
  304.             }          
  305.         }
  306.        
  307.         /* Add the style class ".no_more" to the first/prev and last/next links to allow custom styling */
  308.         function tagNextPrev() {
  309.             if($nav_panels.children('.last').hasClass('active_page')){
  310.                 $nav_panels.children('.next_link').add('.last_link').addClass('no_more ' + jquery_ui_disabled_class);
  311.             } else {
  312.                 $nav_panels.children('.next_link').add('.last_link').removeClass('no_more ' + jquery_ui_disabled_class);
  313.             }
  314.            
  315.             if($nav_panels.children('.first').hasClass('active_page')){
  316.                 $nav_panels.children('.previous_link').add('.first_link').addClass('no_more ' + jquery_ui_disabled_class);
  317.             } else {
  318.                 $nav_panels.children('.previous_link').add('.first_link').removeClass('no_more ' + jquery_ui_disabled_class);
  319.             }
  320.         }
  321.        
  322.     };
  323.    
  324. })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment