构建基于Javascript的移动web CMS添加jQuery插件

[[116614]]

当看到墨颀 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便可以看到***的效果。