当看到墨颀 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. CSS3 @font-face详细用法(转)

      @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体就不用再为只能使用Web安全字体烦恼了! ...

  2. 创建DBLink语句

    --linkName DBLink名 --username 用户名 --password 密码 --tns TNS配置字符串 create database link &linkName co ...

  3. Swift - 18 - 数组的基础操作

    //: Playground - noun: a place where people can play import UIKit var str = "Hello, playground& ...

  4. PHP MySQL 创建数据库

    PHP MySQL 创建数据库 数据库存有一个或多个表. 你需要 CREATE 权限来创建或删除 MySQL 数据库. 使用 MySQLi 和 PDO 创建 MySQL 数据库 CREATE DATA ...

  5. 【USACO 2.4.2】穿越栅栏

    [描述] 农夫John在外面的田野上搭建了一个巨大的用栅栏围成的迷宫.幸运的是,他在迷宫的边界上留出了两段栅栏作为迷宫的出口.更幸运的是,他所建造的迷宫是一个“完美的”迷宫:即你能从迷宫中的任意一点找 ...

  6. Delphi 串口通信(1)

    利用 Delphi实现串口通信的常用的方法有 3种: 一是利用控件,如 MSCOMM控件和 SPCOMM控件: 二是使用 API函数: 三是调用其他串口通信程序.其中利用 API编写串口通信程序较为复 ...

  7. 完数c实现

    完数,顾名思义,就是一个数如果恰好等于它的因子之和.例如6=1+2+3.编写找出1000以内的所有完数 #include <stdio.h> #include <stdlib.h&g ...

  8. 疯狂学习java web3(javaScript)

    js之前有看过,只不过是在C++代码中通过UI引擎调用js进行画图,当时就为语法问题痛苦了半天,结果现在java web了,更是处处是js,再次陷入痛苦中. js实际例子: <!DOCTYPE ...

  9. java 获取页面中的 a 标签 的 href 实例

    Pattern p = Pattern.compile("<a\\s+href\\s*=\\s*(\"|\')?(.*?)[\"|\'|>]", P ...

  10. 在动态引用DLL-A中,当参数是个实体,而实体的属性在另一个DLL-B中。。我们需要得到A这个实体并将其赋值,并将赋值的实体传人DLL-A的方法中。

    string strPath = HttpContext.Current.Server.MapPath("/开放式DLL"); DirectoryInfo df = new Dir ...