在和几个有兴趣做移动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. Caffe-python interface 学习|网络训练、部署、測试

    继续python接口的学习.剩下还有solver.deploy文件的生成和模型的測试. 网络训练 solver文件生成 事实上我认为用python生成solver并不如直接写个配置文件,它不像net配 ...

  2. Leaflet--建设移动设备友好的互动地图

    Leaflet 是一个为建设移动设备友好的互动地图,而开发的现代的.开源的 JavaScript 库.它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发,尽管代码仅有 33 KB ...

  3. [NOI2002] Savage 解题报告(扩展欧几里得)

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1407 Description 克里特岛以野人群居而著称.岛上有排列成环行的M个山洞.这些 ...

  4. Kali linux2.0里Metasploit的服务类型探测

    不多说,直接上干货! 在MSF终端中,可以输入search name:_version命令查看所有可用的服务查点模块 该命令的执行结果如下: root@kali:~# msfconsole ..... ...

  5. Linux 玩法

    php 跑不了,只来404 同一台linux服务器上建两个网站(www.A.com, www.B.com),现在A和B都跑起来了,但只有 A 能跑 php, B只能跑静态 html 文件,不知道哪里设 ...

  6. PostgreSQL Replication之第二章 理解PostgreSQL的事务日志(2)

    2.2 XLOG和复制 在本章中,您已经了解到PostgreSQL的事务日志已经对数据库做了所有的更改.事务日志本身被打包为易用的16MB段. 使用这种更改集来复制数据的想法是不牵强的.事实上,这是在 ...

  7. <Sicily>Rails

    一.题目描述 There is a famous railway station in PopPush City. Country there is incredibly hilly. The sta ...

  8. Mac上vmware虚拟机Windows10安装JDK8及配置环境

    1.jdk8下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.双击下载的jdk进行安装 3.安装成功之 ...

  9. 设置多行文本框不能拓展大小和span标签边框设置

    resize: none;/*设置多行文本框,不能拓展大小*/ #span { display: block; border: 1px solid RGB(169,169,169); /* span标 ...

  10. 在ubuntu上使用华为的3G无线上网卡 - usb_modeswitch

    众所周知,华为或者中兴的无线上网卡是比较好用的,U盘一样的东西,插进电脑的Usb口就能用,但是,这只是针对windows操作系统而言. 对于linux系统,该设备是无法自动加载驱动的. 因此,需要用到 ...