构建基于Javascript的移动CMS——加入滑动
在和几个有兴趣做移动CMS的小伙伴讨论了一番之后,我们认为当前比較重要的便是统一一下RESTful API。然而近期持续断网中,又遭遇了一次停电,暂停了对API的思考。在周末无聊的时光了看了《人间失格》,又看了会《一个人流浪,不必去远方》。開始思考所谓的技术以外的事情,也许这将是下一篇讨论的话题。
正在我对这个移动CMS的功能一筹莫展的时候。帮小伙伴在做一个图片滑动的时候,便想着将这个功能加进去,非常顺利地找到了一个库。
移动CMS滑动
我们所须要的两个功能非常easy
- 当用户向右滑动的时候。菜单应该展开
- 当用户向左滑动的时候,菜单应该关闭
在官网看到了一个简单的演示样例。然而并非用于这个菜单,等到我完毕之后我才知道:为什么不用于菜单?
找到了这样一个符合功能的库。尽管知道要写这个功能也不难。相比于自己写这个库。还不如用别人维护了一些时候的库来得简单、稳定。
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
构建基于Javascript的移动CMS——加入滑动的更多相关文章
- 构建基于Javascript的移动CMS——生成博客(二).路由
在有了上部分的基础之后.我们就能够生成一个博客的内容--BlogPosts Detail.这样就完毕了我们这个移动CMS的差点儿基本的功能了,有了上节想必对于我们来说要获取一个文章已经不是一件难的事情 ...
- 构建基于Javascript的移动web CMS——模板
在上一篇<构建基于Javascript的移动CMS--Hello,World>讲述了墨颀 CMS的大概组成,并进行了一个简单的演示样例,即Hello,World.这一次,我们将把CMS简单 ...
- 构建基于Javascript的移动web CMS——Hello,World
在一篇构建基于Javascript的移动web CMS入门--简单介绍中简单的介绍了关于墨颀CMS的一些原理,其极框架组成.于是開始接着应该说明一下这个CMS是怎样一步步搭建起来. RequireJS ...
- 构建基于Javascript的移动web CMS入门——简单介绍
看到项目上的移动框架,网上寻找了一下,发现原来这些一開始都有. 于是,找了个演示样例開始构建一个移动平台的CMS--墨颀 CMS,方便项目深入理解的同一时候.也能够自己维护一个CMS系统. 构建框架 ...
- 构建基于Javascript的移动web CMS——加入jQuery插件
当看到墨颀 CMS的菜单,变成一个工具栏的时候.变认为这一切有了意义.于是就继续看看这样一个CMS的边栏是怎么组成的. RequireJS与jQuery 插件演示样例 一个简单的组合示比例如以下所看到 ...
- Pagekit – 现代化技术构建的轻量的 CMS 系统
Pagekit 是一个模块化,轻量的 CMS 系统,基于现代化的技术,如 Symfony 组件和 Doctrine.它提供了一个很好的平台,用于主题和延伸开发.Pagekit 为您提供了工具来创造美丽 ...
- DalekJS – 基于 JavaScript 实现跨浏览器的自动化测试
在 Web 项目中,浏览器兼容以及跨浏览器测试是最重要的也是最费劲的工作.DalekJS 是一个基于 JavaScript(或 Node.js) 的免费和开源的自动化测试接口.它能够同时运行测试一组流 ...
- 使用PowerApps快速构建基于主题的轻业务应用 —— 进阶篇
作者:陈希章 发表于 2017年12月14日 在上一篇 使用PowerApps快速构建基于主题的轻业务应用 -- 入门篇 中,我用了三个实际的例子演示了如何快速开始使用PowerApps构建轻业务应用 ...
- 基于HTML5全屏图文左右滑动切换特效
基于HTML5全屏图文左右滑动切换特效.这是一款基于jQuery+HTML5实现的全屏图文切换特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <main> & ...
随机推荐
- Caffe-python interface 学习|网络训练、部署、測试
继续python接口的学习.剩下还有solver.deploy文件的生成和模型的測试. 网络训练 solver文件生成 事实上我认为用python生成solver并不如直接写个配置文件,它不像net配 ...
- Leaflet--建设移动设备友好的互动地图
Leaflet 是一个为建设移动设备友好的互动地图,而开发的现代的.开源的 JavaScript 库.它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发,尽管代码仅有 33 KB ...
- [NOI2002] Savage 解题报告(扩展欧几里得)
题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1407 Description 克里特岛以野人群居而著称.岛上有排列成环行的M个山洞.这些 ...
- Kali linux2.0里Metasploit的服务类型探测
不多说,直接上干货! 在MSF终端中,可以输入search name:_version命令查看所有可用的服务查点模块 该命令的执行结果如下: root@kali:~# msfconsole ..... ...
- Linux 玩法
php 跑不了,只来404 同一台linux服务器上建两个网站(www.A.com, www.B.com),现在A和B都跑起来了,但只有 A 能跑 php, B只能跑静态 html 文件,不知道哪里设 ...
- PostgreSQL Replication之第二章 理解PostgreSQL的事务日志(2)
2.2 XLOG和复制 在本章中,您已经了解到PostgreSQL的事务日志已经对数据库做了所有的更改.事务日志本身被打包为易用的16MB段. 使用这种更改集来复制数据的想法是不牵强的.事实上,这是在 ...
- <Sicily>Rails
一.题目描述 There is a famous railway station in PopPush City. Country there is incredibly hilly. The sta ...
- Mac上vmware虚拟机Windows10安装JDK8及配置环境
1.jdk8下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.双击下载的jdk进行安装 3.安装成功之 ...
- 设置多行文本框不能拓展大小和span标签边框设置
resize: none;/*设置多行文本框,不能拓展大小*/ #span { display: block; border: 1px solid RGB(169,169,169); /* span标 ...
- 在ubuntu上使用华为的3G无线上网卡 - usb_modeswitch
众所周知,华为或者中兴的无线上网卡是比较好用的,U盘一样的东西,插进电脑的Usb口就能用,但是,这只是针对windows操作系统而言. 对于linux系统,该设备是无法自动加载驱动的. 因此,需要用到 ...