JAVASCRIPT   82
jquery pager js
Guest on 17th August 2022 12:33:01 AM


  1. $.fn.pager = function(clas, options) {
  2.        
  3.         var settings = {               
  4.                 navId: 'nav',
  5.                 navClass: 'nav',
  6.                 navAttach: 'append',
  7.                 highlightClass: 'highlight',
  8.                 prevText: '«',
  9.                 nextText: '»',
  10.                 linkText: null,
  11.                 linkWrap: null,
  12.                 height: null
  13.         }
  14.         if(options) $.extend(settings, options);
  15.        
  16.                
  17.         return this.each( function () {
  18.                
  19.                 var me = $(this);
  20.                 var size;
  21.                 var i = 0;             
  22.                 var navid = '#'+settings.navId;
  23.                
  24.                 function init () {
  25.                         size = $(clas, me).not(navid).size();
  26.                         if(settings.height == null) {                  
  27.                                 settings.height = getHighest();
  28.                         }
  29.                         if(size > 1) {
  30.                                 makeNav();
  31.                                 show();
  32.                                 highlight();
  33.                         }                      
  34.                         sizePanel();
  35.                         if(settings.linkWrap != null) {
  36.                                 linkWrap();
  37.                         }
  38.                 }
  39.                 function makeNav () {          
  40.                         var str = '<div id="'+settings.navId+'" class="'+settings.navClass+'">';
  41.                         str += '<a href="#" rel="prev">'+settings.prevText+'</a>';
  42.                         for(var i = 0; i < size; i++) {
  43.                                 var j = i+1;
  44.                                 str += ' &nbsp; | &nbsp; <a href="#" rel="'+j+'">';
  45.                                 str += (settings.linkText == null) ? j : settings.linkText[j-1];                               
  46.                                 str += '</a>';
  47.                         }
  48.                         str += ' &nbsp; | &nbsp; <a href="#" rel="next">'+settings.nextText+'</a>';
  49.                         str += '</div>';
  50.                         switch (settings.navAttach) {          
  51.                                 case 'before':
  52.                                         $(me).before(str);
  53.                                         break;
  54.                                 case 'after':          
  55.                                         $(me).after(str);
  56.                                         break;
  57.                                 case 'prepend':
  58.                                         $(me).prepend(str);
  59.                                         break;
  60.                                 default:
  61.                                         $(me).append(str);
  62.                                         break;
  63.                         }
  64.                 }
  65.                 function show () {
  66.                         $(me).find(clas).not(navid).hide();
  67.                         var show = $(me).find(clas).not(navid).get(i);
  68.                         $(show).show();
  69.                 }              
  70.                 function highlight () {
  71.                         $(me).find(navid).find('a').removeClass(settings.highlightClass);
  72.                         var show = $(me).find(navid).find('a').get(i+1);                       
  73.                         $(show).addClass(settings.highlightClass);
  74.                 }
  75.  
  76.                 function sizePanel () {
  77.                         if($.browser.msie) {
  78.                                 $(me).find(clas).not(navid).css( {
  79.                                         height: settings.height
  80.                                 });    
  81.                         } else {
  82.                                 $(me).find(clas).not(navid).css( {
  83.                                         minHeight: settings.height
  84.                                 });
  85.                         }
  86.                 }
  87.                 function getHighest () {
  88.                         var highest = 0;
  89.                         $(me).find(clas).not(navid).each(function () {
  90.                                
  91.                                 if(this.offsetHeight > highest) {
  92.                                         highest = this.offsetHeight;
  93.                                 }
  94.                         });
  95.                         highest = highest + "px";
  96.                         return highest;
  97.                 }
  98.                 function getNavHeight () {
  99.                         var nav = $(navid).get(0);
  100.                         return nav.offsetHeight;
  101.                 }
  102.                 function linkWrap () {
  103.                         $(me).find(navid).find("a").wrap(settings.linkWrap);
  104.                 }
  105.                 init();
  106.                 $(this).find(navid).find("a").click(function () {
  107.  
  108.                         if($(this).attr('rel') == 'next') {
  109.                                 if(i + 1 < size) {
  110.                                         i = i+1;
  111.                                 }
  112.                         } else if($(this).attr('rel') == 'prev') {
  113.                                 if(i > 0) {    
  114.                                         i = i-1;
  115.                                 }
  116.                         } else {               
  117.                                 var j = $(this).attr('rel');   
  118.                                 i = j-1;               
  119.                         }
  120.                         show();
  121.                         highlight();
  122.                         return false;
  123.                 });
  124.         });    
  125. }
Raw Paste

Login or Register to edit or fork this paste. It's free.