构建基于Javascript的移动CMS——加入滑动
2017-06-17 11:02
477 查看
在和几个有兴趣做移动CMS的小伙伴讨论了一番之后,我们认为当前比較重要的便是统一一下RESTful API。然而近期持续断网中,又遭遇了一次停电,暂停了对API的思考。在周末无聊的时光了看了《人间失格》,又看了会《一个人流浪,不必去远方》。開始思考所谓的技术以外的事情,也许这将是下一篇讨论的话题。
正在我对这个移动CMS的功能一筹莫展的时候。帮小伙伴在做一个图片滑动的时候,便想着将这个功能加进去,非常顺利地找到了一个库。
当用户向右滑动的时候。菜单应该展开
当用户向左滑动的时候,菜单应该关闭
在官网看到了一个简单的演示样例。然而并非用于这个菜单,等到我完毕之后我才知道:为什么不用于菜单?
找到了这样一个符合功能的库。尽管知道要写这个功能也不难。相比于自己写这个库。还不如用别人维护了一些时候的库来得简单、稳定。
(注:上面的代码中临时去掉了一部分无关本文的,为了简单描写叙述。)
接着,加入以下的代码加入到app.js的初始化方法中
就变成了我们须要的代码。。
便能够实现我们须要的
当用户向右滑动的时候,菜单应该展开
当用户向左滑动的时候,菜单应该关闭
CMS效果: 墨颀 CMS
QQ讨论群: 344271543
项目: https://github.com/gmszone/moqi.mobi
正在我对这个移动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
项目: https://github.com/gmszone/moqi.mobi
相关文章推荐
- 构建基于Javascript的移动CMS——添加滑动
- 构建基于Javascript的移动web CMS——加入jQuery插件
- 构建基于Javascript的移动web CMS——添加jQuery插件
- 构建基于Javascript的移动CMS——生成博客(三).重构
- 构建基于Javascript的移动web CMS——整合Django
- 构建基于Javascript的移动CMS——生成博客(一)
- 构建基于Javascript的移动web CMS——模板
- 构建基于Javascript的移动web CMS——Hello,World
- 构建基于Javascript的移动CMS——生成博客(二).路由
- 构建基于Javascript的移动CMS——生成博客(二).路由
- 构建基于Javascript的移动web CMS——Hello,World
- 构建基于Javascript的移动web CMS——加载JSON文件
- 构建基于Javascript的移动web CMS——模板
- 构建基于Javascript的移动web CMS入门——简介
- 构建基于MVC+Observer模式的、艺术性的移动开发框架(KJAVA版)(二)
- 构建基于MVC+Observer模式的、艺术性的移动开发框架(KJAVA版)(一)
- 构建基于MVC+Observer模式的、艺术性的移动开发框架(KJAVA版)(一)
- 构建基于MVC+Observer模式的、艺术性的移动开发框架(KJAVA版)(一)
- 构建基于MVC+Observer模式的、艺术性的移动开发框架(KJAVA版)(二)
- 构建基于MVC+Observer模式的、艺术性的移动开发框架(KJAVA版)(二)