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
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<div class="intro">
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <p>This example shows how to create a ScrollView widget with pagination support, using the ScrollViewPaginator plugin.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<div class="example newwindow">
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <a href="scrollview-paging-example.html" target="_blank" class="button">
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai View Example in New Window
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h2>ScrollView with Pagination Support</h2>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>In this example, we'll create a ScrollView instance which has pagination support enabled. This allows the ScrollView to scroll between discrete page boundaries in the content, as opposed to continuous scrolling. Pagination is only supported for horizontal ScrollViews currently.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Modules Used</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>For this example, since we want both pagination and scrollbar indicator support enabled, we use the `scrollview` module as we did for the <a href="scrollview-horiz.html">Horizontal ScrollView</a> example to get the base ScrollView with scrollbar support.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>Additionally we pull down the `scrollview-paginator` module, which provides the `ScrollViewPaginator` plugin:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai// Pull in the scrollview widget, and the paginator plugin
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiYUI().use('scrollview', 'scrollview-paginator', function(Y) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Instantiating The ScrollView Widget</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>As with the <a href="scrollview-horiz.html">Horizontal ScrollView</a> example, we provide the markup for the ScrollView content on the page, as shown below:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<!-- Content with a width which would require scrolling -->
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<div id="scrollview-content" style="" class="yui3-scrollview-loading">
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <li><img src="..."></li>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <li><img src="..."></li>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <li><img src="..."></li>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <li><img src="..."></li>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>And we instantiate the ScrollView instance in the same way, by providing a fixed width for the widget, and constraining flicks to the "x" axis:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai// Constraining the width, instead of the height for horizontal scrolling
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desaivar scrollView = new Y.ScrollView({
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai id: '#scrollview',
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai srcNode: '#scrollview-content',
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai width : 320,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai minDistance:10,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai minVelocity:0.3,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>As we did in the Horizontal ScrollView example, we add CSS which switches the LIs to layout horizontally:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai/* To layout horizontal LIs */
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai#scrollview-content {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai white-space:nowrap;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai#scrollview-content li {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai display:inline-block;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai background-color:#fff;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai/* For IE 6/7 - needs inline block hack (and the background color mentioned above) */
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai#scrollview-content li {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai *display:inline;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>This gives us a ScrollView instance with scrollbar indicator support. However it doesn't have pagination support available yet.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Plugging In Pagination Support</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>To add pagination support to the ScrollView instance, we plug in the `ScrollViewPaginator` plugin, providing the `selector` attribute configuration argument to it. The `selector` tells
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desaithe paginator which list of elements inside the ScrollView content box define page boundaries at which the ScrollView should stop when scrolling. For this example, each LI defines a ScrollView page:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai selector: 'li'
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>The ScrollView now has pagination support activated, and will stop at page boundaries when the user flicks the content, or drags the content past the halfway point of the current page.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Accessing The Paginator Plugin API</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>Similar to the ScrollBar indicator plugin, the ScrollBarPaginator API is now available on the ScrollView instance, on the namespace defined by the plugin, which is `scrollView.pages`.
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiThe `pages` property can be used to manage the page state of the ScrollView, as shown below:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiY.one('#scrollview-next').on('click', Y.bind(scrollView.pages.next, scrollView.pages));
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiY.one('#scrollview-prev').on('click', Y.bind(scrollView.pages.prev, scrollView.pages));
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>The above code calls the plugin's `next()` and `prev()` methods when the respective button is clicked. The <a href="index.html#paginator">ScrollView Paginator</a> documentation provides additional examples of the API available through the `pages` property.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Setting Up A Click Listener On the Content</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>For this example, we also set up a click listener on the images. For touch devices, the click event does not fire when dragging or flicking, so there's no special handling required when setting up a click listener. However to also support mouse based devices, we need to distinguish between a click and drag or flick. In order to do this we set up a check in our click listener, to make sure we only respond to the click if the ScrollView wasn't dragged, by checking the `lastScrolledAmt` property, which is reset whenever a drag/flick gesture ends:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiY.one("#scrollview-content").delegate("click", function(e) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // For mouse based devices, we need to make sure the click isn't fired
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // and the end of a drag/scroll. We use 2 as an arbitrary threshold.
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai if (Math.abs(scrollView.lastScrolledAmt) < 2) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Preventing Native Behavior For Content</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>As with the Horizontal ScrollView example, since we have images which act as drag/flick targets, we need to stop the default image drag/drop behavior in certain browsers (for example gecko and IE), by preventing default on the underlying mousedown event. If we don't prevent default, the image will be natively draggable by default, and interfere with scrolling:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai// Prevent the image from being natively dragged
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desaicontent.delegate("mousedown", function(e) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h2>Complete Example Source</h2>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai{{>scrollview-paging-source}}