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]



[/html]

Dodajte sledečo javascript funkcijo, ki je nekakšen wrapper za ustvarjanje scrolling funkcionalnosti za določeno vsebino:
[javascript]
function createSerialScroller(objectID, targetID, scrollerItems, prevSelector, nextSelector) {
jQuery(function($){
$(‘#’+objectID).serialScroll({
target: ‘#’+targetID,
items: scrollerItems, //selector to the items ( relative to the matched elements, ‘#sections’ in this case )
prev: prevSelector,//selector to the ‘prev’ button (absolute!, meaning it’s relative to the document)
next: nextSelector,//selector to the ‘next’ button (absolute too)
queue:false,//we scroll on both axes, scroll both at the same time.
event:’click’,//on which event to react (click is the default, you probably won’t need to specify it)
duration:700,//length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
force:true, //force a scroll to the element specified by ‘start’ (some browsers don’t reset on refreshes)
cycle:false,//cycle endlessly ( constant velocity, true is the default )
lazy:false//(default) if true, the plugin looks for the items on each event(allows AJAX or JS content, or reordering)
});
});
}
[/javascript]

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

[/javascript]

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

Dodatne informacije:

Delodajalec: Pangea.si


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

You must be logged in to post a comment.