Scroller
这个插件允许你创建一个可滚动区域。我们使用的JavaScript滚轮，除非该设备支持 - WebKit的溢出卷轴：触摸。它有许多修复Android版<3和iOS原生的滚动。
创建：
$(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 containerverticalScroll
(bool) 允许vertical scrollinghorizontalScroll
(bool) 允许horizontal scrollinguseJsScroll
(bool) 是否允许 JavaScript scrollerlockBounce
(bool) Prevent the rubber band effectautoEnable
(bool) 自动启用滚动条refresh
(bool) 上拉刷新infinite
(bool) 启用无限滚动initScrollProgress
(bool) Dispatch progress on touch movevScrollCSS
(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 eventscrollToItem(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 eventsscrollstart
Scrolling started scroll
Scrolling progress scrollend
Scrolling stopped //pull
to refreshrefresh-trigger
Pull to refresh scroll startedrefresh-release
Event when pull to refresh is has happenedrefresh-cancel
User cancelled pull to refresh by scrollingrefresh-finish
Pull to refresh has finished and hidden//infinite
scrollinfinite-scroll
User scrolled to the bottom of the contentinfinite-scroll-end
User finished scrolling |
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;} |
在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 |
下面是如何结合事件和执行下拉刷新的例子
|
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");}); |
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
原文地址：http://blog.csdn.net/vincentblog/article/details/38042907
