Scroller
这个插件允许你创建一个可滚动区域。我们使用的JavaScript滚轮，除非该设备支持 - WebKit的溢出卷轴：触摸。它有许多修复Android版<3和iOS原生的滚动。
创建：
2
$(selector).scroller({})
//create
$(selector).scroller()
//get
the scroller object
属性：
Attributes
|
1
2
3
4
5
6
7
8
9
10
11
|
scrollbars
(bool) ID of DOM elemenet for
the popup container
verticalScroll
(bool) 允许vertical scrolling
horizontalScroll
(bool) 允许horizontal scrolling
useJsScroll
(bool) 是否允许 JavaScript scroller
lockBounce
(bool) Prevent the rubber band effect
autoEnable
(bool) 自动启用滚动条
refresh
(bool) 上拉刷新
infinite
(bool) 启用无限滚动
initScrollProgress
(bool) Dispatch progress on touch move
vScrollCSS
(string) 垂直滚动条hScrollCSS
(string) 水平滚动条
|
方法
|
1
2
3
4
5
6
7
8
9
10
11
|
enable()
启用滚动条
disable()
禁用滚动条
scrollToBottom(time)
滚动到内容的底部
scrollToTop(time)
滚动到内容顶部
scrollTo(obj,time)
to X / Y 坐标
scrollBy(obj,time)
by X / Y 坐标
addPullToRefresh()
启用下拉刷新的滚动条setRefreshContent(string)
设置了下拉刷新内容的文字
addInfinite()
addInfinite事件
clearInfinite()
Clear inifinite-scroll-end event
scrollToItem(DOMNode,time)
滚动到屏幕上的特定元素
|
事件
Events must be registered on the scroller using $.bind()
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//scroller
object events
scrollstart
Scrolling started
scroll
Scrolling progress
scrollend
Scrolling stopped
//pull
to refresh
refresh-trigger
Pull to refresh scroll started
refresh-release
Event when pull to refresh is has happened
refresh-cancel
User cancelled pull to refresh by scrolling
refresh-finish
Pull to refresh has finished and hidden
//infinite
scroll
infinite-scroll
User scrolled to the bottom of the content
infinite-scroll-end
User finished scrolling
|
CSS/Customize
Below is an example used by App Framework‘s iOS7 theme to customize the look and feel of the popup
|
1
2
3
4
5
6
7
8
9
|
.scrollBar
{
position:
absolute ;
width:
5px !important;
height:
20px !important;
border-radius:
2px !important;
border:
1px solid black !important;
background:
red !important;
opacity:
0 !important;
}
|
Examples
在HTML 中添加
|
1
|
||div
id="scroll"
style=‘width:100%;height:200;‘></div>
|
js中创建
|
1
2
3
4
5
|
var
myScroller=$("#scroll").scroller({
verticalScroll:true,
horizontalScroll:false,
autoEnable:true
})
|
调用方法
|
1
|
myScroller.addPullToRefresh();
|
从缓存中获取滚动条
|
1
|
var
myScroller=$("#scroll").scroller();
//no
parameters
|
Pull to refresh
下面是如何结合事件和执行下拉刷新的例子
|
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
|
myScroller.addPullToRefresh();
//User
is dragging the page down exposing the pull to refresh message.
$.bind(myScroller,
"refresh-trigger",
function
() {
console.log("Refresh
trigger");
});
//Here
we listen for the user to pull the page down and then let go to start the pull to refresh callbacks.
var
hideClose;
$.bind(myScroller,
"refresh-release",
function
() {
var
that = this;
console.log("Refresh
release");
clearTimeout(hideClose);
//For
the demo, we set a timeout of 5 seconds to show how to hide it asynchronously
hideClose
= setTimeout(function
() {
console.log("hiding
manually refresh");
that.hideRefresh();
},
5000);
return
false;
//tells
it to not auto-cancel the refresh
});
//This
event is triggered when the user has scrolled past and the pull to refresh block is no longer available
$.bind(myScroller,
"refresh-cancel",
function
() {
clearTimeout(hideClose);
console.log("cancelled");
});
|
infinite scrolling
The following shows how to implement infinite scrolling.
|
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
|
myScroller.addInfinite();
//Bind
the infinite scroll event
$.bind(myScroller,
"infinite-scroll",
function
() {
var
self = this;
console.log("infinite
triggered");
//Append
text at the bottom
$(this.el).append("
<div
id="infinite"
style="border:2px
solid black;margin-top:10px;width:100%;height:20px">Fetching
content...</div>
");
//Register
for the infinite-scroll-end - this is so we do not get it multiple times, or a false report while infinite-scroll is being triggered;
$.bind(myScroller,
"infinite-scroll-end",
function
() {
//unbind
the event since we are handling it
$.unbind(myScroller,
"infinite-scroll-end");
self.scrollToBottom();
//Example
to show how it could work asynchronously
setTimeout(function
() {
$(self.el).find("#infinite").remove();
//We
must call clearInfinite() when we are done to reset internal variables;
self.clearInfinite();
$(self.el).append("
<div>This
was loaded via inifinite scroll<br>More Content</div>
");
self.scrollToBottom();
},
3000);
});
});
|
官网链接：http://app-framework-software.intel.com/api.php#scroller