当看到墨颀 CMS的菜单,变成一个工具栏的时候。变认为这一切有了意义。于是就继续看看这样一个CMS的边栏是怎么组成的。

RequireJS与jQuery 插件演示样例

一个简单的组合示比例如以下所看到的,在main.js中加入以下的内容

requirejs.config( {
"shim": {
"jquery-cookie" : ["jquery"]
}
} );

接着在另外的文件里加入

define(["jquery"],
function($){
//加入函数
});

这样我们就能够完毕一个简单的插件的加入。

墨颀CMS加入jQuery插件

jQuery Sidr

The best jQuery plugin for creating side menus and the easiest way for doing your menu responsive

这是一个创建响应式側边栏的最好的也是最简单的工具,于是我们须要下载jQuery.sidr.min.js到文件夹中,接着改动一下main.js:

require.config({
baseUrl: 'lib/',
paths: {
'text': 'text',
jquery: 'jquery-2.1.1.min',
async: 'require/async',
json: 'require/json',
mdown: 'require/mdown',
router: '../router',
templates: '../templates',
jquerySidr: 'jquery.sidr.min',
markdownConverter : 'require/Markdown.Converter'
},
shim: {
jquerySidr:["jquery"],
underscore: {
exports: '_'
}
}
}); require(['../app'], function(App){
App.initialize();
});

加入jquery.sidr.min到里面。

jQuery Sidr与RequireJS协作

引用官方的演示样例代码

$(document).ready(function() {
$('#simple-menu').sidr();
});

我们须要将上面的初始化代码加入到app.js的初始化中,

define([
'jquery',
'underscore',
'backbone',
'router',
'jquerySidr'
], function($, _, Backbone, Router){ var initialize = function(){
$(document).ready(function() {
$('#menu').sidr();
});
Router.initialize();
}; return {
initialize: initialize
};
});

这样打开墨颀 CMS便能够看到最后的效果。

相关资源

QQ讨论群: 344271543

源代码 Github: https://github.com/gmszone/moqi.mobi

构建基于Javascript的移动web CMS——加入jQuery插件的更多相关文章

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

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

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

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

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

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

  4. javaScript学习总结(二)——jQuery插件的开发

    概要 jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定 ...

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

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

  6. 构建基于Javascript的移动CMS——加入滑动

    在和几个有兴趣做移动CMS的小伙伴讨论了一番之后,我们认为当前比較重要的便是统一一下RESTful API.然而近期持续断网中,又遭遇了一次停电,暂停了对API的思考.在周末无聊的时光了看了<人 ...

  7. JavaScript 一个进行枚举选择的jquery插件(仿easyui风格)

    某次做项目要实现一个功能: 按星期选择一个连续的时间范围 比如:周一到周五,周六到周日 或 周六到周三 聪明的朋友马上想出办法:用两个选项为周一到周日的下拉列表实现,对 那样可以,但是我觉得不够友好, ...

  8. 7 款基于 JavaScript/AJAX 的文件上传插件

    本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1.  jQuer ...

  9. 10个精选的颜色选择器Javascript脚本及其jQuery插件

     Color picker即颜色选择器使我们在web开发中可能经常用到的组件,今天我们特意精选了10个超酷的颜色选择器实现,其中包括了javascript脚本 实现及其传说中的jQuery插件实现 ...

随机推荐

  1. (转载)小课堂UI-Star Diamond Tutorial

  2. [转]JavaScript函数和数组总结

    转自:http://www.uml.org.cn/AJAX/201307264.asp 写的不错,对我有很多帮助,最近准备全面的学习研究一下ES5,先转载一下这篇文章. JavaScript函数 1. ...

  3. phpMemcache消息队列类

    <?php /** * Memcache 消息队列类 */ class QMC { const PREFIX = 'ASDFASDFFWQKE'; /** * 初始化 mc * @staticv ...

  4. 如何把powerpoint幻灯片大小改为标准或宽屏教程【图文】

    不知道大家还记得早期powerpoint版本,幻灯片的形状是较方(4:3),随着科技的发展,很多电视.视频都在用宽屏,powerpoint自然也是如此,现在默认的幻灯片大小是宽屏 (16:9),怎么把 ...

  5. Java基础学习第一天

    ================每日必读==================== 写代码: 1.明确需求.我需要实现什么需求? 2.分析思路.我需要怎么实现需求? 3.确定步骤.我的每一部分思路需要使 ...

  6. IOS--UIDatePicker 时间选择器 的使用方法详细

    IOS--UIDatePicker 时间选择器 的使用方法详细 // 主要有下面四种类型:   // 日期显示. // 日期和时间显示. // 时间显示. // 倒计时选择       // UIDa ...

  7. poj 1066 Treasure Hunt

    http://poj.org/problem?id=1066 #include <cstdio> #include <cstring> #include <cmath&g ...

  8. 树形dp-CF-337D. Book of Evil

    题目链接: http://codeforces.com/problemset/problem/337/D 题目大意: 给一棵树,m个点,一个距离d,求有多少个点A,使得A到所有的m个点距离都不超过d. ...

  9. BZOJ1596: [Usaco2008 Jan]电话网络

    1596: [Usaco2008 Jan]电话网络 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 513  Solved: 232[Submit][S ...

  10. 【转】Android进阶2之Activity之间数据交流(onActivityResult的用法)----不错

    原文网址:http://blog.csdn.net/sjf0115/article/details/7387467 主要功能: 在一个主界面(主Activity)上能连接往许多不同子功能模块(子Act ...