欢迎来到 jackNEss'窝窝
I like simple mind

全屏滚动控件 fullslide

2015年08月14日

fullslide_polo

本控件适用于各种手机滑动翻页专题,虽然说网上已经有同类控件,而且比较成熟。但个人认为这还是属于比较值得自己造的轮子。也顺手练练 MVVM模式。

github地址:https://github.com/jackness1208/fullslide

要求html 结构

...
<body>
    <div class="full-body" id="box">
        <div class="full-cnt"><!-- 屏幕1内容 --></div>
        <div class="full-cnt"><!-- 屏幕2内容 --></div>
        <div class="full-cnt"><!-- 屏幕3内容 --></div>
    </div>
    ...
</body>

使用方法

var ctrl = fullslide('#box', {
        currentClass: 'full-cnt-cur',
        ready: function(){
            this.className += ' full-body-ready';

            var loadingElm = document.getElementById('loading');
            loadingElm.className += ' full-loading-hide';
        },
        onerror: function(){
            alert('sorry, 你的浏览器并不适合人类使用');
        },
        onchange: function(index){
            alert('is slide to ' + index + ' page!');
        }
    });

fullslide(target, option) 参数说明

参数 类型 说明
target {object|string} 需要进行全屏滚动的对象
option {object} 参数设置

参数 类型 说明
currentClass {String} 设置切换屏幕时选中的样式,
默认为 current
onchange(index) {function} 设置切换屏幕时触发的函数; index – 选中的序号, this 指向 当前选中的屏幕标签
onerror(msg) {function} 设置组件出错时回调的函数; msg – 错误信息
ready() {function} 设置组件初始化后回调的函数
transition {Int} 设置组件动画的时间间隔, 单位是 ms;默认为 500ms

fullslide(target, option) 返回属性说明

参数 类型 说明
current {Int} 获取 or 设置当前选中的屏幕序号
target {object} 组件初始化的目标对象
items {Array} 组件的内的屏幕集合
isSupport {boolean} 当前 浏览器是否支持 本组件

例子

http://www.jackness.org/lab/2015/fullslide/examples/demo.html
http://www.jackness.org/lab/2015/fullslide/examples/demo2.html
http://www.jackness.org/lab/2015/fullslide/examples/demo3.html

分类javascript
标签
阅读 139
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS