app-framework学习--Scroller

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 forthe 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
varmyScroller=$("#scroll").scroller({
   verticalScroll:true,
   horizontalScroll:false,
   autoEnable:true
})

调用方法

1
myScroller.addPullToRefresh();

从缓存中获取滚动条

1
varmyScroller=$("#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.
varhideClose;
$.bind(myScroller,"refresh-release",function() {
    varthat = 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);
    returnfalse;//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() {
    varself = 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

欢迎加入学习交流群：333492644

posted @ 2014-07-22 15:53  木尘-MCDNF  阅读(181)  评论(0)  编辑  收藏  举报