构建基于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效果: 墨颀 CMSQQ讨论群: 344271543项目: https://github.com/gmszone/moqi.mobi