当看到墨颀 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