1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jScrollPane - API documentation</title>
<!-- styles specific to demo site -->
<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- scripts specific to this demo site -->
<script type="text/javascript" src="script/demo.js"></script>
</head>
<body>
<div id="top-nav">
<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html#examples">Examples</a></li>
<li><a href="index.html#themes">Themes</a></li>
<li><a href="index.html#usage">How to use</a></li>
<li><a href="faqs.html">FAQs</a></li>
<li><a href="known_issues.html">Known issues</a></li>
<li><a href="index.html#support">Support</a></li>
<li><a href="index.html#download">Download</a></li>
</ul>
</div>
<div id="container">
<h1>jScrollPane - API documentation</h1>
<p>
This page shows how you can use the jScrollPane API (in addition to the <a href="settings.html">
settings object</a> and the <a href="events.html">events</a> which are dispatched) to update your
jScrollPane after it's has been initially created.
</p>
<p>
To get a reference to the API for a particular scrollpane you will need to access the 'jsp' variable in
the <em>data</em> of the element you applied jScrollPane to. e.g.
</p>
<pre>var element = $('#my-element').jScrollPane({/* ...settings... */});
var api = element.data('jsp');</pre>
<p>
Once you have a reference to the API you can call any of the following methods on it:
</p>
<h2 id="reinitialise">reinitialise(s)</h2>
<p>
Reinitialises the scroll pane (if it's internal dimensions have changed since the last time it
was initialised). The settings object which is passed in will override any settings from the
previous time it was initialised - if you don't pass any settings then the ones from the previous
initialisation will be used.
</p>
<h2 id="scrollToElement">scrollToElement(ele, stickToTop, animate)</h2>
<p>
Scrolls the specified element (a jQuery object, DOM node or jQuery selector string) into view so
that it can be seen within the viewport. If stickToTop is true then the element will appear at
the top of the viewport, if it is false then the viewport will scroll as little as possible to
show the element. You can also specify if you want animation to occur. If you don't provide this
argument then the animateScroll value from the settings object is used instead.
</p>
<h2 id="scrollTo">scrollTo(destX, destY, animate)</h2>
<p>
Scrolls the pane so that the specified co-ordinates within the content are at the top left
of the viewport. animate is optional and if not passed then the value of animateScroll from
the settings object this jScrollPane was initialised with is used.
</p>
<h2 id="scrollToX">scrollToX(destX, animate)</h2>
<p>
Scrolls the pane so that the specified co-ordinate within the content is at the left of the
viewport. animate is optional and if not passed then the value of animateScroll from the settings
object this jScrollPane was initialised with is used.
</p>
<h2 id="scrollToY">scrollToY(destY, animate)</h2>
<p>
Scrolls the pane so that the specified co-ordinate within the content is at the top of the
viewport. animate is optional and if not passed then the value of animateScroll from the settings
object this jScrollPane was initialised with is used.
</p>
<h2 id="scrollToPercentX">scrollToPercentX(destPercentX, animate)</h2>
<p>
Scrolls the pane to the specified percentage of its maximum horizontal scroll position. animate
is optional and if not passed then the value of animateScroll from the settings object this
jScrollPane was initialised with is used.
</p>
<h2 id="scrollToPercentY">scrollToPercentY(destPercentY, animate)</h2>
<p>
Scrolls the pane to the specified percentage of its maximum vertical scroll position. animate
is optional and if not passed then the value of animateScroll from the settings object this
jScrollPane was initialised with is used.
</p>
<h2 id="scrollBy">scrollBy(deltaX, deltaY, animate)</h2>
<p>
Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
the value of animateScroll from the settings object this jScrollPane was initialised with is used.
</p>
<h2 id="scrollByX">scrollByX(deltaX, animate)</h2>
<p>
Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
the value of animateScroll from the settings object this jScrollPane was initialised with is used.
</p>
<h2 id="scrollByY">scrollByY(deltaY, animate)</h2>
<p>
Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
the value of animateScroll from the settings object this jScrollPane was initialised with is used.
</p>
<h2 id="positionDragX">positionDragX(x, animate)</h2>
<p>
Positions the horizontal drag at the specified x position (and updates the viewport to reflect
this). animate is optional and if not passed then the value of animateScroll from the settings
object this jScrollPane was initialised with is used.
</p>
<h2 id="positionDragY">positionDragY(y, animate)</h2>
<p>
Positions the vertical drag at the specified y position (and updates the viewport to reflect
this). animate is optional and if not passed then the value of animateScroll from the settings
object this jScrollPane was initialised with is used.
</p>
<h2 id="animate">animate(ele, prop, value, stepCallback, completeCallback)</h2>
<p>
This method is called when jScrollPane is trying to animate to a new position. You can override
it if you want to provide advanced animation functionality. It is passed the following arguments:
</p>
<ul class="link-list">
<li><strong>ele</strong> - the element whose position is being animated</li>
<li><strong>prop</strong> - the property that is being animated</li>
<li><strong>value</strong> - the value it's being animated to</li>
<li><strong>stepCallback</strong> - a function that you must execute each time you update the value of the property</li>
<li><strong>completeCallback</strong> - a function that will be executed after the animation had finished</li>
</ul>
<p>
You can use the default implementation (see <a href="script/jquery.jscrollpane.js">sourcecode</a>) as a
starting point for your own implementation.
</p>
<h2 id="getContentPositionX">getContentPositionX()</h2>
<p>
Returns the current x position of the viewport with regards to the content pane.
</p>
<h2 id="getContentPositionY">getContentPositionY()</h2>
<p>
Returns the current y position of the viewport with regards to the content pane.
</p>
<h2 id="getContentWidth">getContentWidth()</h2>
<p>
Returns the width of the content within the scroll pane.
</p>
<h2 id="getContentHeight">getContentHeight()</h2>
<p>
Returns the height of the content within the scroll pane.
</p>
<h2 id="getIsScrollableH">getIsScrollableH()</h2>
<p>
Returns whether or not this scrollpane has a horizontal scrollbar.
</p>
<h2 id="getPercentScrolledX">getPercentScrolledX()</h2>
<p>
Returns the horizontal position of the viewport within the pane content.
</p>
<h2 id="getPercentScrolledY">getPercentScrolledY()</h2>
<p>
Returns the vertical position of the viewport within the pane content.
</p>
<h2 id="getIsScrollableV">getIsScrollableV()</h2>
<p>
Returns whether or not this scrollpane has a vertical scrollbar.
</p>
<h2 id="getContentPane">getContentPane()</h2>
<p>
Gets a reference to the content pane. It is important that you use this method if you want to
edit the content of your jScrollPane as if you access the element directly then you may have some
problems (as your original element has had additional elements for the scrollbars etc added into
it).
</p>
<h2 id="scrollToBottom">scrollToBottom(animate)</h2>
<p>
Scrolls this jScrollPane down as far as it can currently scroll. If animate isn't passed then the
animateScroll value from settings is used instead.
</p>
<h2 id="hijackInternalLinks">hijackInternalLinks()</h2>
<p>
Hijacks the links on the page which link to content inside the scrollpane. If you have changed
the content of your page (e.g. via AJAX) and want to make sure any new anchor links to the
contents of your scroll pane will work then call this function.
</p>
<h2 id="destroy">destroy()</h2>
<p>
Destroys the jScrollPane on the instance matching this API object and restores the browser's
default behaviour. <a href="destroy.html">Example</a>.
</p>
</div>
</body>
</html>
|
