构建基于Javascript的移动CMS——添加滑动
来源:互联网 发布:java怎么传值 编辑:程序博客网 时间:2024/06/05 20:25
在和几个有兴趣做移动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效果: 墨颀 CMS
QQ讨论群: 344271543
项目: https://github.com/gmszone/moqi.mobi
0 0
- 构建基于Javascript的移动CMS——添加滑动
- 构建基于Javascript的移动web CMS——添加jQuery插件
- 构建基于Javascript的移动web CMS——模板
- 构建基于Javascript的移动web CMS入门——简介
- 构建基于Javascript的移动web CMS——Hello,World
- 构建基于Javascript的移动web CMS——整合Django
- 构建基于Javascript的移动web CMS——加载JSON文件
- 构建基于Javascript的移动CMS——生成博客(一)
- 构建基于Javascript的移动CMS——生成博客(二).路由
- 构建基于Javascript的移动CMS——生成博客(三).重构
- 基于Drupal的CMS构建
- 基于ListView的滑动删除、添加、修改
- 基于net的cms
- 基于ArcGIS构建安全的移动端App
- 基于Laravel开发的CMS
- 移动的上下左右滑动
- 基于Express React AntD和MongoDB构建一个CMS系统
- 基于反向代理的Web缓存加速——可缓存的CMS系统设计
- select判断选中,以及组装对象数据
- 为嘛子要慎用mysql的enum字段?(来自向东的原创博客)
- EXTjs 简单的表单学习
- 同步、异步
- acm一家人
- 构建基于Javascript的移动CMS——添加滑动
- Java线程(篇外篇):阻塞队列BlockingQueue
- Android中 AsyncTask的使用
- Android Input框架中的KeyBoardLayout(KeyMapper) Joystick修改
- JSF入门知识大全
- Android加载图片导致内存溢出(Out of Memory异常)
- ORM利器:NHibernate(二)使用CodeSmith快速生成映射文件和映射类
- 浅析read()函数(man 2)返回值
- Java线程(一):线程安全与不安全