`
fbchen
  • 浏览: 4764 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

使用Lungo.js支持HTML5实现类似微博的“拖拽刷新”功能

LungoHTML5 
阅读更多

       最近要在手机端的HTML5里面实现一个类似新浪微博的“Pull & Refresh”的功能，时间紧迫，一时找不到比较好用的框架，发现Lungo还不错，于是试用了一下，发现还不错，轻量小巧。

       Lungo很多函数与JQuery差不多，比如mix()、isOwnProperty()、toType()，另外因为我使用BootStrap，很多功能与Lungo重复，因此Lungo的很多组件我用不上，没有细致的研究。不过，最坑爹的是，我要用的Pull & Refresh它只支持从顶部下拉刷新，不支持从底部往上刷新！

       好吧！暂时找不到其它框架，那就自己动手修改一下吧皱眉

 

       由于Lungo的css与Bootstrap的css冲突了，没有全部引用Lungo的css，并且自己加了不少样式，所以单独出来，只包含Pull & Refresh的部分，代码如下：

/* Pull & Refresh */
body>section.show {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-box-ordinal-group: 2;
    -o-box-ordinal-group: 2;
    box-ordinal-group: 2;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    position: relative;
}

body>aside.show>article.active.pull,
body>section.show>article.active.pull,
body>aside.hide>article.active.pull,
body>section.hide>article.active.pull,
body>aside.hiding>article.active.pull,
body>section.hiding>article.active.pull
    {
    -webkit-transition-property: transform;
    -moz-transition-property: transform;
    -ms-transition-property: transform;
    -o-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 500ms;
    -moz-transition-duration: 500ms;
    -ms-transition-duration: 500ms;
    -o-transition-duration: 500ms;
    transition-duration: 500ms
}

section.show>[data-control="pull"]>.loading {
    position: relative;
    width: 25px;
    color: #ff8612;
    font-size: 12px;
    line-height: 1; /* 1倍行距，否则不能居边对齐 */
}

section.hide>[data-control="pull"] {
    display: none
}

section.show>[data-control="pull"] {
    position: absolute;
    z-index: -1;
    top: 0;
    line-height: 60px;
    width: 100%;
    height: 80px;
    padding: 10px 0;
    text-align: center;
}

section.show>[data-control="pull"]>.icon {
    display: inline-block;
    width: 25px;
    color: #ff8612;
    font-size: 12px;
    line-height: 1;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

section.show>[data-control="pull"]>.loading {
    display: none;
    left: 0%
}

section.show>[data-control="pull"]>.msg {
    position: relative;
    color: #ff8612;
    font-size: 12px;
    font-weight: normal;
    line-height: 1; /* 1倍行距，否则不能居边对齐 */
    display: inline-block;
}

section.show>[data-control="pull"].rotate>.icon {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

section.show>[data-control="pull"].refresh>.icon {
    display: none
}

section.show>[data-control="pull"].refresh>.loading {
    display: inline-block
}

section.show>[data-control="pull"].pulling-down {
    top: 0;
    bottom: auto;
}
section.show>[data-control="pull"].pulling-up {
    top: auto;
    bottom: 0;
}

section.show>[data-control="pull"].pulling-down .pullup.icon {
    display: none;
}
section.show>[data-control="pull"].pulling-up .pulldown.icon {
    display: none;
}

section.show>[data-control="pull"].pulling-down>.icon,
 section.show>[data-control="pull"].pulling-down>.loading,
 section.show>[data-control="pull"].pulling-down>.msg {
    vertical-align: top;
}

section.show>[data-control="pull"].pulling-up>.icon,
 section.show>[data-control="pull"].pulling-up>.loading,
 section.show>[data-control="pull"].pulling-up>.msg {
    vertical-align: bottom;
}

/* Pull & Refresh end */

 

    然后，重新实现了Pull组件，要用的话可以将如下代码替换Lungo.js中与Pull相关的那部分，JavaScript代码如下：

/**
 * Creates a instance of Pull & Refresh Element。<br>
 * 增加功能：在原来的Pull Down & Refresh的基础上，支持Pull Up & Refresh。
 * 
 * @namespace Lungo.Element
 * @class Pull
 * @version 1.0
 * 
 * @author Ignacio Olalde <ina@tapquo.com> || @piniphone
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 * @author fbchen <fbchen@fourbin.com>
 */
(function() {
    // 修改loading的样式
    Lungo.Attributes['loading'] = {
        selector : "*",
        html : '<span class="loading {{value}}"></span>'
    };
    Lungo.Attributes['pull'] = {
        selector : "*",
        html : '<div data-control="pull" data-icon="pulldown {{value}}" data-loading="fa fa-spinner fa-spin"><span class="msg"></span></div>'
    };
    
    Lungo.Element.Pull = function(element_selector, config_data) {
        var ANIMATION_TIME, CONFIG_BASE, CONTAINER, CURRENT_DISTANCE, ELEMENT,
            MAX_HEIGHT, REFRESHING, REFRESHING_HEIGHT, PULLING_DOWN,
            hide, _blockGestures, _getTouchY, _handlePullEnd, _handlePulling, _moveElementTo,
            _refreshStart, _setContainerLoading, _setContainerOnPulling, _setContainerTitle,
            UP = void 0,
            DOWN = void 0,
            isOwnProp = Lungo.Core.isOwnProperty,
            pullUpIcon;
        REFRESHING_HEIGHT = 68;
        MAX_HEIGHT = 80;
        ANIMATION_TIME = 300;
        CURRENT_DISTANCE = 0;
        PULLING_DOWN = true;
        REFRESHING = false;
        ELEMENT = $$(element_selector);
        CONTAINER = ELEMENT.siblings("div[data-control=\"pull\"]");
        CONFIG_BASE = {
            onPull : "Pull down to refresh",
            onRelease : "Release to...",
            onRefresh : "Loading...",
            callback : void 0
        };
        
        // 分出pull down、pull up的配置，为了向后兼容，默认都是pull down
        UP = Lungo.Core.mix(CONFIG_BASE, config_data['up']);
        DOWN = Lungo.Core.mix(CONFIG_BASE, config_data['down']);
        if (!isOwnProp(config_data, 'up') && !isOwnProp(config_data, 'down')) {
            DOWN = Lungo.Core.mix(CONFIG_BASE, config_data);
        }
        
        // 注入data-pullup图标
        pullUpIcon = UP.icon || ELEMENT.parent().data('pullup');
        if (pullUpIcon) {
            CONTAINER.prepend('<span class="pullup icon ' + pullUpIcon + '"></span>');
        }
        
        hide = function() {
            _moveElementTo(0, true);
            setTimeout((function() {
                        REFRESHING = false;
                        CONTAINER.attr("class", "");
                        return ELEMENT[0].removeEventListener("touchmove",
                                _blockGestures, true);
                    }), ANIMATION_TIME);
            return CURRENT_DISTANCE = 0;
        };
        _moveElementTo = function(posY, animate) {
            var newPos;
            newPos = Math.abs(posY) > MAX_HEIGHT ? (posY < 0 ? -1 * MAX_HEIGHT : MAX_HEIGHT) : posY;
            if (animate) {
                ELEMENT.addClass("pull");
            } else {
                ELEMENT.removeClass("pull");
            }
            ELEMENT.style("-webkit-transform", "translate(0, " + newPos + "px)");
            if (animate) {
                return setTimeout((function() {
                            return ELEMENT.removeClass("pull");
                        }), ANIMATION_TIME);
            }
        };
        _refreshStart = function(event) {
            REFRESHING = true;
            ELEMENT[0].addEventListener("touchmove", _blockGestures, true);
            _setContainerTitle(_getConf().onRefresh);
            _setContainerLoading(true);
            _moveElementTo(PULLING_DOWN ? REFRESHING_HEIGHT : -1 * REFRESHING_HEIGHT, true);
            if (_getConf().callback) {
                return _getConf().callback.apply(this);
            }
        };
        _setContainerTitle = function(title) {
            return CONTAINER.find(".msg").html(title);
        };
        _setContainerLoading = function(op) {
            _setContainerPosition();
            if (op) {
                return CONTAINER.addClass("refresh");
            } else {
                return CONTAINER.removeClass("refresh");
            }
        };
        _setContainerOnPulling = function(op) {
            _setContainerPosition();
            if (op) {
                return CONTAINER.addClass("rotate");
            } else {
                return CONTAINER.removeClass("rotate");
            }
        };
        _setContainerPosition = function() {
            if (PULLING_DOWN) {
                CONTAINER.removeClass("pulling-up").addClass("pulling-down");
            } else {
                CONTAINER.removeClass("pulling-down").addClass("pulling-up");
            }
        }
        _getConf = function() {
            return PULLING_DOWN ? DOWN : UP;
        };
        _blockGestures = function(touchEvent) {
            return touchEvent.preventDefault();
        };
        _handlePulling = function(event) {
            _moveElementTo(PULLING_DOWN ? CURRENT_DISTANCE : -1 * CURRENT_DISTANCE, false);
            _setContainerLoading(false);
            if (CURRENT_DISTANCE > REFRESHING_HEIGHT) {
                _setContainerTitle(_getConf().onRelease);
                return _setContainerOnPulling(true);
            } else {
                _setContainerTitle(_getConf().onPull);
                return _setContainerOnPulling(false);
            }
        };
        _handlePullEnd = function(event) {
            if (CURRENT_DISTANCE > REFRESHING_HEIGHT) {
                _refreshStart();
            } else {
                hide();
            }
            return this;
        };
        _getTouchY = function(event) {
            if ($$.isMobile()) {
                return event.touches[0].pageY;
            } else {
                return event.pageY;
            }
        };
        (function() {
            var INI_Y, STARTED, dt;
            STARTED = false;
            INI_Y = 0;
            return ELEMENT.bind("touchstart", function(event) {
                        if (ELEMENT[0].scrollTop <= 1) {
                            STARTED = true;
                            INI_Y = _getTouchY(event);
                        }
                        return true;
                    }).bind("touchmove", function(event) {
                        var current_y;
                        if (!REFRESHING && STARTED) {
                            current_y = _getTouchY(event);
                            dt = current_y - INI_Y;
                            PULLING_DOWN = dt > 0;
                            CURRENT_DISTANCE = Math.abs(dt);
                            _handlePulling(event);
                            if (event.cancelable !== false) {
                                event.preventDefault();
                            }
                        }
                        return true;
                    }).bind("touchend", function() {
                        if (STARTED) {
                            _handlePullEnd();
                        }
                        STARTED = false;
                        return true;
                    });
        })();
        return {
            hide : hide
        };
    };

}).call(this);

 

     最后是HTML测试页面，模拟手机端的“拖拽”功能，可以用Chrome打开，用浏览器自带的“开发者工具”，切换到Device模式调试。HTML页面如下：

    

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pull &amp; Refresh</title>

    <!-- Bootstrap -->
    <link type="text/css" rel="stylesheet" href="./js/bootstrap3.2/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="./css/font-awesome-4.2.0/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="./css/zyb/app.css">
    <style type="text/css">
    .article {
        background-color: beige;
    }
    h1 {
        background-color: azure;
        margin-bottom: 0;
        margin-top: 100px;
    }
    </style>
</head>
<body>
<h1>测试下拉刷新功能</h1>


<!-- 内容列表 -->
<section id="articleList" data-transition="slide" data-pull="fa fa-long-arrow-down" data-pullup="fa fa-long-arrow-up">
    <article class="article">
        <div title="下拉文章内容刷新">
            文章内容<br>
            文章内容<br>
            文章内容<br>
            文章内容<br>
        </div>
    </article>
</section>

<script type="text/javascript" src="./js/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./js/bootstrap3.2/js/bootstrap.min.js"></script>
<!-- 支持 Pull & Refresh -->
<script type="text/javascript" src="./js/quojs-2.3.6/quo.js"></script>
<script type="text/javascript" src="./js/lungo-2.2.1/lungo-1.js"></script>
<script>
$(function(){
    
    Lungo.init({});
    var pull_example = new Lungo.Element.Pull('#articleList article', {
        down: {
        	onPull: '下拉刷新',      // Text on pulling
            onRelease: '释放更新',   // Text on releasing
            onRefresh: '加载中...',  // Text on refreshing
            callback: function() { // Action on refresh
                //alert('Pull & Refresh completed!');
                setTimeout(function() {
                    pull_example.hide();
                }, 3000);
            }
        },
        up: {
            onPull: '上推刷新',      // Text on pulling
            onRelease: '释放更新',   // Text on releasing
            onRefresh: '加载中...',  // Text on refreshing
            callback: function() { // Action on refresh
                //alert('Pull & Refresh completed!');
                setTimeout(function() {
                    pull_example.hide();
                }, 3000);
            }
        }
    });
    
});
</script>
</body>
</html>

 

    效果如下：

    


 


 

 

 

 

 

 

  • 大小: 26.5 KB
  • 大小: 24.3 KB
  • 大小: 42.4 KB
分享到：
什么是脏读、不可重复读、幻读(转)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    一个移动开发框架Lungo.js

    该源码Lungo.js是一款非常不错的移动开发框架，Lungo.js不但可以为开发者创建基于iOS、Android、Blackberry以及FirefoxOS平台的应用程序等，而且还可以支持开放的web标准，另外还拥有强大的JS API等，目前有新出不同...

    Node.js-lungo-cli从命令行控制Lungo应用程序

    总结来说，`lungo-cli`是Node.js和Lungo框架开发中的强大工具，它简化了项目的创建、调试和部署流程，让开发者能够更加专注于应用的功能实现，而不是繁琐的构建过程。通过熟练掌握`lungo-cli`的使用，可以更高效地...

    11个有用的移动网页开发App和HTML5框架.pdf

    4. Sencha Touch：Sencha Touch是最早支持HTML5、CSS和JavaScript的框架之一，提供音频/视频、本地存储、圆角、渐变背景和阴影等功能，以实现接近原生应用的用户体验。 5. Baker：专为iPad和iPhone设计的HTML5...

    11个有用的移动网页开发App和HTML5框架.docx

    4. Sencha Touch：作为第一个支持HTML5、CSS和JavaScript的框架，Sencha Touch提供音频/视频、本地存储、圆角、渐变背景和阴影等特性，为开发者构建类似本地应用体验的WebApp提供了可能。 5. Baker：专为iPad和...

    html5 特效

    "package-lungo-2.2.1"可能是某个HTML5框架或库的版本号， Lungo.js 或者类似的项目，它可能提供了许多预设的HTML5特效和组件，简化了开发者的工作。Lungo可能包括响应式设计、触摸事件支持、页面过渡动画、以及对...

    恒盛新锐android前端开发工程师面试经验.docx

    它支持HTML5、CSS3和JavaScript等开放Web标准，不仅限于手机应用，还能应用于电视和桌面设备。Lungo的强项在于提供强大的JavaScript API，允许开发者完全控制WebAPP应用，提供了多种开发WebAPP的方式。 2. ...

    Lungo for Mac 1.6.0 TNT版

    macOS屏幕防休眠的实用小工具。TNT版已crake大家都知的。...Lungo for Mac版能让你的电脑一直保持工作的状态，即使看电影不是全屏、看食谱、阅读长篇文字而不滚动，这些情况下都不会再出现休眠情况。

    酷炫的爆栈网源码.zip

    Lungo [GitHub] 工具 在线工具 QUnit [GitHub] Jasmine [GitHub] Mocha [GitHub] Selenium [GitHub] WebDriverIO [GitHub] Protractor ...

    JURA优瑞E6&E60&E600英文说明书.pdf

    【JURA 优瑞E6&E60&E600英文说明书.pdf】是优瑞品牌咖啡机的用户手册，主要涵盖了设备的安装、使用、维护等关键知识点。这份说明书适用于E6、E60和E600型号的咖啡机，旨在帮助用户正确操作和保养这些设备。 1. **...

    隆重：适用于Go的MongoDB兼容嵌入式数据库和工具包

    Lungo尝试通过重新实现Go中要在客户端使用的数据处理机制来满足这一需求。 这使开发人员可以在减轻服务器负担的应用程序中对数据进行预处理或后处理。 例如，应用程序可以利用此功能来缓存文档并在内存中快速查询...

    和雀巢咖啡盆相关数据集

    ·8月23日-添加布宜诺斯艾利斯和维也纳LUNGO吊舱，并重新运行我的分类笔记本。 ·8月1日-添加斯德哥尔摩和东京LUNGO吊舱，并重新运行我的分类笔记本。 ·7月25日-添加开普敦Lungo豆英，并重新运行我的分类笔记本。 ...

    在几分钟内将用户可自定义的全局键盘快捷键添加到您的macOS应用-Swift开发

    此软件包可让您在几分钟内将对用户可自定义的全局键盘快捷键添加到macOS应用程序的支持。 它与沙盒完全兼容，并且与Mac App Store兼容。 并由Dato，Jiffy，Plash和Lungo用于生产。 该软件包仍处于早期阶段。 我很...

    vCardIn:基本FirefoxOS应用程序导入器，用于从vCard文件中获取联系人

    vCardIn Firefox MarketPlace： ： Peak Geeksphone上的屏幕截图 基本FirefoxOS应用程序导入器，用于从vCard文件中获取联系人 这个项目才刚刚开始。...Lungo-为想要设计，构建和共享跨设备应用程序的开发人员提供

Magicbox
Global site tag (gtag.js) - Google Analytics