2007년 6월 8일 금요일

jScrollPane

jScrollPane

jScrollPane

jScrollPane is a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style. You can easily control the apperance of the custom scrollbars using simple CSS.

jScrollPane is crossbrowser, working on all browsers that support jquery and it also degrades gracefully. If a user's browser doesn't support jQuery or has JavaScript turned off then they will see the browsers default scrollbars. If the mouse wheel plugin is included in the page then the scroll panes will respond to mouse wheel events as well.

jScrollPane is built on top of the awesome jQuery library and utilises the dimensions plugin and (optionally) the mouse wheel plugin.

Usage

Just include the following files in the head of your page:

Like so:


Then you can use any query selector to select the elements you would like to apply jScrollPane and then initialise it. The following code runs when the document is ready and finds any element with a class of "scroll-pane" and then calls jScrollPane on them.


You can pass some optional parameters to the jScrollPane function. These take the form of an object with the following attributes:

  • scrollbarWidth [int] - the width of the created scrollbar in pixels (defaults to 10)
  • scrollbarMargin [int] - the margin to leave to the left of the scrollbar in pixels (defaults to 5)
  • wheelSpeed [int] - controls how fast the mouse wheel makes the content scroll in pixels (defaults to 18)
  • showArrows [boolean] - controls whether to display arrows for the user to scroll with (defaults to false)
  • arrowSize [int] - the height of the arrow buttons if showArrows=true (calculated from CSS if not provided)
  • animateTo [boolean] - whether to animate when calling scrollTo and scrollBy (defaults to false)
  • dragMinHeight [int] - the minimum height to allow the drag bar to be (defaults to 0)
  • dragMaxHeight [int] - the maximum height to allow the drag bar to be (defaults to 99999!)

Downloads

You can download this plugin in a number of ways. Easiest is the zip file which contains all the files used in this example page. Alternatively you can download the indivdual files from the links above. jScrollPane.js is also available in the jQuery svn repository.

Examples

There are now a number of examples of using jScrollPane - check the links directly below or the example below that...

댓글 없음: