構建基於Javascript的移動CMS——添加滑動

構建基於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    };});

  
  

   

  便可以實現我們需要的

• 當使用者向右滑動的時候，菜單應該展開
• 當使用者向左滑動的時候，菜單應該關閉