Home

pupunzi edited this page Mar 14, 2011 · 10 revisions
Clone this wiki locally

jquery.mb.scrollable

mb.scrollable

This is a jQuery component to build a scrollable content interface for your webpages.

go to Demo page
go to blog page

Dependencies:

  • none

JS call:


      $("#myScroll").mbScrollable({
        width:700,
        elementsInPage:1,
        elementMargin:2,
        shadow:"#999 2px 2px 2px",
        height:"auto",
        controls:"#controls",
        slideTimer:600,
        autoscroll:true,
        scrollTimer:4000
      });

HTML constructor:


  <div id="myScroll">
    <div class="scrollEl" style="background-color:#9999ff">1</div>
    <div class="scrollEl" style="background-color:#cc9900">2</div>
    <div class="scrollEl" style="background-color:#660066">3</div>
    <div class="scrollEl" style="background-color:#009966">4</div>
    <div class="scrollEl" style="background-color:#6600ff">5</div>
    <div class="scrollEl" style="background-color:#9999ff">6</div>
    <div class="scrollEl" style="background-color:#33cc00">7</div>
    <div class="scrollEl" style="background-color:#cc00cc">8</div>
    <div class="scrollEl" style="background-color:#009999">9</div>
  </div>

  <div id="controls">
    <div class="first">first</div><div class="prev">prev</div>
    <div class="next">next</div><div class="last">last</div>
    <div class="pageIndex"></div>
    <div class="start">start</div><div class="stop">stop</div>
  </div>

Parameters:

  • width:“700”, (int) the width of the visible area
  • elementsInPage:3, (int) how many elements should be visible on each slide
  • elementMargin:2, (int) the space between each element
  • shadow:“#999 2px 2px 2px”, (string or “false”) the css style for the shadow of each element (doesn’t work in IE)
  • height: “auto”, (int or “auto”) the height of each element in the scroller
  • controls: “#controls”, (sring) the ID of the controls element
  • slideTimer: 600, (int) the time in milliseconds for the transition effect
  • autoscroll: true, (boolean) if it has to start scrolling once initialized or not
  • scrollTimer: 4000, (int) the time in milliseconds each screen should stop
  • nextCallback: function(){}, (function) a callback function on next event
  • prevCallback: function(){}, (function) a callback function on prev event
    from v. 1.7.0:
  • loadCallback: function(){}, (function) a callback function on load component event
  • changePageCallback: function(){}, (function) a callback function on change event

Once you give the width of the visible area, the plugin define the with for the single element according with the elementsInPage and the elementMargin parameter;
if the autoscroll parameter is set to true the scrollable stops scrolling once you rollover each element and starts again once you rollout;
The controll tool can be configured as you whant; the complete controller is composed by:
first | prev | pageIndex | next | last | start | stop.

Methods:

  • $.fn.goToPage(int): go to a specific idx.
  • $.fn.get(0).idx(): get the actual idx.
  • $.fn.mbNextPage(): go to next page.
  • $.fn.mbPrevPage(): go to previous page.
  • $.fn.mbFirstPage(): go to first page.
  • $.fn.mbLastPage(): go to last page.
  • $.fn.mbLastPage(): go to last page.