T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
1st May

Javascript – scrolling – jQuery.scrollTo – jQuery.SerialScroll

Potreboval sem Javascript skripto, ki omogoča da večje število podatkov spravimo v navidezne strani (page list) (paging - paginator) med katerimi se lahko nato premikamo brez, da bi osvežili spletno stran ali uporabili AJAX.

Odločil sem se za uporabo jQuery dodatka (plugina) SerialScroll, ki za svoje delovanje potrebuje jQuery.scrollTo dodatek. Je enostaven za implementirat, sama funkcionalnost je impresivna, ugaja pa mi tudi veliko število opcijskih nastavitev, ki mi omogočajo lažje prirejanje dodatka za potrebe projekta.

Namestitev:
Najprej odpakirajte vse datoteke (jquery, serialScroll, scrollTo) ter nato dodajte sledeče vrstice v head sekcijo:

HTML:
  1. <script language="javascript" type="text/javascript" src="/js/jquery.js"></script>
  2. <script language="javascript" type="text/javascript" src="/js/jquery.serialScroll.js"></script>
  3. <script language="javascript" type="text/javascript" src="/js/jquery.scrollTo-min.js"></script>

Dodajte sledečo javascript funkcijo, ki je nekakšen wrapper za ustvarjanje scrolling funkcionalnosti za določeno vsebino:

JAVASCRIPT:
  1. function createSerialScroller(objectID, targetID, scrollerItems, prevSelector, nextSelector) {
  2.     jQuery(function($){
  3.         $('#'+objectID).serialScroll({
  4.             target: '#'+targetID,
  5.             items: scrollerItems, //selector to the items ( relative to the matched elements, '#sections' in this case )
  6.             prev: prevSelector,//selector to the 'prev' button (absolute!, meaning it's relative to the document)
  7.             next: nextSelector,//selector to the 'next' button (absolute too)
  8.             queue:false,//we scroll on both axes, scroll both at the same time.
  9.             event:'click',//on which event to react (click is the default, you probably won't need to specify it)
  10.             duration:700,//length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
  11.             force:true, //force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
  12.             cycle:false,//cycle endlessly ( constant velocity, true is the default )
  13.             lazy:false//(default) if true, the plugin looks for the items on each event(allows AJAX or JS content, or reordering)
  14.         });
  15.     });
  16. }

Nato pa s pravimi parametri pokličite zgoraj napisano funkcijo, ki vam bo kreirala scrolling funkcionalnost za podane HTML objekte:

JAVASCRIPT:
  1. <script language="javascript" type="text/javascript">
  2.     $(document).ready(function(){
  3.         createSerialScroller('screen', 'sections', 'li', 'img.prev', 'img.next');
  4.     });
  5. </script>

Več informacij glede inštalacije, vsekakor pa si oglejte tudi primer delovanja.

Dodatne informacije:

Delodajalec: Pangea.si

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. Javascript koledar – izbira datuma – jQuery date picker
  2. Javascript – fade efekt – jQuery – fadeIn – fadeOut – setTimeout – removeChild
  3. jQuery – traversing – dodatki – javascript frameworks
  4. jQuery each snippet
  5. Stalno osveževanje del spletne vsebine – ajax jquery.get – javascript setinterval
  6. Javascript – delci uporabne kode
  7. Tablesorter – jQuery plugin Tablesorter 2.0 – šumniki – nepravilno sortiranje šumnikov čšž – javascript sortiranje tabel
  8. Select – dropdown – width – internet explorer
  9. Textarea defaultValute – Javascript string replace – uidatepicker onClose
  10. Javascript – avtomatsko osveževanje strani – refresh page – reload page

3x komentirano na “Javascript – scrolling – jQuery.scrollTo – jQuery.SerialScroll”

  1. Javascript - fade efekt - jQuery - fadeIn - fadeOut - setTimeout - removeChild | .: TRSplet - internetne storitve .: je napisal:

    [...] scrolling funkcionalnosti, kjer sem z malo truda dobil superiorno funkcionalnost s pomočjo jQuery-a [...]

  2. Pubi je napisal:

    Pozdrav,

    mogoče veš, kako bi lahko temu plugino določil height:auto? Da ko klikaš po pagingu, se avtomatsko zunanji container širi glede na vsebino?

  3. Roky je napisal:

    Potem ne bi bil več pager amapak bi blo isto kot nek scroler?

Dodaj komentar