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

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

移动CMS滑动

我们所须要的两个功能非常easy

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

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

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

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
};
});

便能够实现我们须要的

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

其它

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

CMS效果: 墨颀 CMS

QQ讨论群: 344271543

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

构建基于Javascript的移动CMS——加入滑动的更多相关文章

  1. 构建基于Javascript的移动CMS——生成博客(二).路由

    在有了上部分的基础之后.我们就能够生成一个博客的内容--BlogPosts Detail.这样就完毕了我们这个移动CMS的差点儿基本的功能了,有了上节想必对于我们来说要获取一个文章已经不是一件难的事情 ...

  2. 构建基于Javascript的移动web CMS——模板

    在上一篇<构建基于Javascript的移动CMS--Hello,World>讲述了墨颀 CMS的大概组成,并进行了一个简单的演示样例,即Hello,World.这一次,我们将把CMS简单 ...

  3. 构建基于Javascript的移动web CMS——Hello,World

    在一篇构建基于Javascript的移动web CMS入门--简单介绍中简单的介绍了关于墨颀CMS的一些原理,其极框架组成.于是開始接着应该说明一下这个CMS是怎样一步步搭建起来. RequireJS ...

  4. 构建基于Javascript的移动web CMS入门——简单介绍

    看到项目上的移动框架,网上寻找了一下,发现原来这些一開始都有. 于是,找了个演示样例開始构建一个移动平台的CMS--墨颀 CMS,方便项目深入理解的同一时候.也能够自己维护一个CMS系统. 构建框架 ...

  5. 构建基于Javascript的移动web CMS——加入jQuery插件

    当看到墨颀 CMS的菜单,变成一个工具栏的时候.变认为这一切有了意义.于是就继续看看这样一个CMS的边栏是怎么组成的. RequireJS与jQuery 插件演示样例 一个简单的组合示比例如以下所看到 ...

  6. Pagekit – 现代化技术构建的轻量的 CMS 系统

    Pagekit 是一个模块化,轻量的 CMS 系统,基于现代化的技术,如 Symfony 组件和 Doctrine.它提供了一个很好的平台,用于主题和延伸开发.Pagekit 为您提供了工具来创造美丽 ...

  7. DalekJS – 基于 JavaScript 实现跨浏览器的自动化测试

    在 Web 项目中,浏览器兼容以及跨浏览器测试是最重要的也是最费劲的工作.DalekJS 是一个基于 JavaScript(或 Node.js) 的免费和开源的自动化测试接口.它能够同时运行测试一组流 ...

  8. 使用PowerApps快速构建基于主题的轻业务应用 —— 进阶篇

    作者:陈希章 发表于 2017年12月14日 在上一篇 使用PowerApps快速构建基于主题的轻业务应用 -- 入门篇 中,我用了三个实际的例子演示了如何快速开始使用PowerApps构建轻业务应用 ...

  9. 基于HTML5全屏图文左右滑动切换特效

    基于HTML5全屏图文左右滑动切换特效.这是一款基于jQuery+HTML5实现的全屏图文切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <main> & ...

随机推荐

  1. PhpStorm Live Template加PHP短语法Short Open Tags打造原生模板

    关于Php要不要使用模板一直被大家讨论,支持的说使用模板更简洁,易与前端project师交流.反对的说Php本身就支持内嵌语法,不是必需再用个模板,减少性能. 事实上使用Php的短语法.直接嵌入也不是 ...

  2. 熟悉了下HTTP协议

    HTML是一种用来定义网页的文本,会HTML,就可以编写网页: HTTP是在网络上传输HTML的协议,用于浏览器和服务器的通信.200表示一个成功的响应,后面的OK是说明.失败的响应有404 Not ...

  3. Frame Stacking ZOJ 1083,poj 1128

    Frame Stacking Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 4034   Accepted: 1352 De ...

  4. MetaSploit攻击实例讲解------Metasploit自动化攻击(包括kali linux 2016.2(rolling) 和 BT5)

    不多说,直接上干货! 前期博客 Kali linux 2016.2(Rolling)里Metasploit连接(包括默认和自定义)的PostgreSQL数据库 Kali linux 2016.2(Ro ...

  5. Python的matplotlib库画图不能显示中文问题解决

    有两种解决办法: 一种是在代码里设置为能显示中文的字体,如微软雅黑(msyh.ttf)和黑体(simsun.ttc) 如下在要画图的代码前添加: import matplotlib.pyplot as ...

  6. 24 款必备的 Linux 桌面应用(2016 版)

    作者: Munif Tanjim 译者: LCTT GHLandy | 2016-12-21 08:41   评论: 41 收藏: 13 摘要:Linux 的必备软件有哪些?这将会是一个非常主观的回答 ...

  7. [笔记-图论]Floyd

    用于可带负权的多源最短路 时间复杂度O(n^3) 注意一定不要给Floyd一个带负环的图,不然就没有什么意义了(最短路不存在) 模板 // Floyd // to get minumum distan ...

  8. Linux 部署项目经验总结

    [通用命令]  1.创建文件夹 mkdir -p xxx 2.解压包 tar -zxvf xxxx.tar.gz  3.缩文件 tar zcvf 压缩包名称.tar.gz 要压缩的文件  4.动命令  ...

  9. HTTP状态码以及其含义大全 _IT技术小趣屋

    原文:HTTP状态码以及其含义大全 _IT技术小趣屋 HTTP状态码(英语:HTTP Status Code)是用以表示网页服务器超文本传输协议响应状态的3位数字代码.我们在开发过程中比较常见的状态码 ...

  10. OpenJDK源码研究笔记(七)–Java字节码文件(.class)的结构

    最近在看OpenJDK源码的过程中,顺便看了Java编译器(javac)的源码. 为了理解javac的源码,需要先搞懂Java字节码文件(.class)的结构. 于是,我就认真看了下OpenJDK中J ...