logo

INTERNETNE STORITVE

- IZDELAVA SPLETNIH STRANI - OBLIKOVANJE - PROGRAMIRANJE DODATKOV

« Wordpress 2.5.1 - posodobitev
Postati registrator domen? »

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:

PLAIN TEXT
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:

PLAIN TEXT
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:

PLAIN TEXT
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

Roky || Četrtek, maj 1st, 2008 ob 7:16 popoldne || Splet, Splet (Javascript, Ajax) || RSS 2.0 | Dodaj komentar || Trackback

1 komentar na “Javascript - scrolling - jQuery.scrollTo - jQuery.SerialScroll”

  1. Javascript - fade efekt - jQuery - fadeIn - fadeOut - setTimeout - removeChild | .: TRSplet - internetne storitve .: je napisal:
    maj 5th, 2008 ob 11:16 dopoldne

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

Dodaj komentar