app-framework（2+）--Scroller

Scroller

这个插件允许你创建一个可滚动区域。我们使用的JavaScript滚轮，除非该设备支持 - WebKit的溢出卷轴：触摸。它有许多修复Android版<3和iOS原生的滚动。

创建：

$(selector).scroller({})//create
$(selector).scroller()//get the scroller object

属性：

Attributes

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) 水平滚动条

方法：

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)  

事件：

<span style="font-family: Arial; font-size: 14px; line-height: 26px;">Events must be registered on the scroller using $.bind()</span>

//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

<span style="font-family: Arial; font-size: 14px; line-height: 26px;">Below is an example used by App Framework's iOS7 theme to customize the look and feel of the popup</span>

.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:

<div>
 id="scroll"style='width:100%;height:200;'></div>

JS:

varmyScroller=$("#scroll").scroller({

   verticalScroll:true,

   horizontalScroll:false,

   autoEnable:true

})

调用方法：

myScroller.addPullToRefresh();

从缓存获得滚动条：

varmyScroller=$("#scroll").scroller();//no parameters

Pull to refresh

myScroller.addPullToRefresh();

 
//User is dragging the page down exposing the pull to refresh message.

$.bind(myScroller,"refresh-trigger",function()
 {

    console.log("Refresh trigger");

});

 

//Herewe 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()
 {

    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()
 <span style="white-space:pre">	</span>{

        console.log("hiding manually refresh");

        that.hideRefresh();

    <span style="white-space:pre">	</span>},
 <span style="white-space:pre">	</span>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

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("
<span style="white-space:pre">	</span><div
 <span style="white-space:pre">	</span>id="infinite"
 <span style="white-space:pre">	</span>style="border:2px
 <span style="white-space:pre">	</span>solid black;margin-top:10px;width:100%;height:20px">Fetching
 <span style="white-space:pre">	</span>content...</div>
<span style="white-space:pre">	</span>");

    //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()
 <span style="white-space:pre">	</span>{

        //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()
 <span style="white-space:pre">	</span>{

            $(self.el).find("#infinite").remove();

            //We must call clearInfinite() when we are done to reset internal variables;
            self.clearInfinite();

            $(self.el).append("

<span style="white-space:pre">		</span><div>This
 <span style="white-space:pre">		</span>was loaded via inifinite scroll<br>More Content</div>
<span style="white-space:pre">	</span>    ");

            self.scrollToBottom();

        },
 3000);

    });

});