Blog

Blog

PHODAL

构建基于Javascript的移动CMS——添加滑动

在和几个有兴趣做移动CMS的小伙伴讨论了一番之后,我们觉得当前比较重要的便是统一一下RESTful API。然而最近持续断网中,又遭遇了一次停电,暂停了对API的思考。在周末无聊的时光了看了《人间失格》,又看了会《一个人流浪,不必去远方》。开始思考所谓的技术以外的事情,或许这将是下一篇讨论的话题。

正在我对这个移动CMS的功能一筹莫展的时候,帮小伙伴在做一个图片滑动的时候,便想着将这个功能加进去,很顺利地找到了一个库。

移动CMS滑动

我们所需要的两个功能很简单

  • 当用户向右滑动的时候,菜单应该展开
  • 当用户向左滑动的时候,菜单应该关闭

在官网看到了一个简单的示例,然而并不是用于这个菜单,等到我完成之后我才知道:为什么不用于菜单?

找到了这样一个符合功能的库,虽然知道要写这个功能也不难。相比于自己写这个库,还不如用别人维护了一些时候的库来得简单、稳定。

jQuery Plugin to obtain touch gestures from iPhone, iPod Touch and iPad, should also work with Android mobile phones (not tested yet!)

然而,它并不会其他一些设备上工作。

添加jQuery Touchwipe

添加到requirejs的配置中:

require.config({
    baseUrl: 'lib/',
    paths: {
        jquery: 'jquery-2.1.1.min',
        router: '../router',
        touchwipe: 'jquery.touchwipe.min'
    },
    shim: {
        touchwipe: ["jquery"],
        underscore: {
            exports: '_'
        }
    }
});

require(['../app'], function(App){
    App.initialize();
});

(注:上面的代码中暂时去掉了一部分无关本文的,为了简单描述。)

接着,添加下面的代码添加到app.js的初始化方法中

    $(window).touchwipe({
        wipeLeft: function() {
            $.sidr('close');
        },
        wipeRight: function() {
            $.sidr('open');
        },
        preventDefaultEvents: false
    });

就变成了我们需要的代码。。

define([
    'jquery',
    'underscore',
    'backbone',
    'router',
    'jquerySidr',
    'touchwipe'
], function($, _, Backbone, Router){

    var initialize = function(){
        $(window).touchwipe({
            wipeLeft: function() {
                $.sidr('close');
            },
            wipeRight: function() {
                $.sidr('open');
            },
            preventDefaultEvents: false
        });
        $(document).ready(function() {
            $('#sidr').show();
            $('#menu').sidr();
            $("#sidr li a" ).bind('touchstart click', function() {
                if(null != Backbone.history.fragment){
                    _.each($("#sidr li"),function(li){
                        $(li).removeClass()
                    });

                    $('a[href$="#/'+Backbone.history.fragment+'"]').parent().addClass("active");
                    $.sidr('close');
                    window.scrollTo(0,0);
                }
            });
        });
        Router.initialize();
    };

    return {
        initialize: initialize
    };
});

便可以实现我们需要的

  • 当用户向右滑动的时候,菜单应该展开
  • 当用户向左滑动的时候,菜单应该关闭

其他

然而在Windows Phone的IE浏览器中,左滑动和右滑动分别是前进和后退。

CMS效果: 墨颀 CMS

QQ讨论群: 344271543

项目: https://github.com/gmszone/moqi.mobi

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签