構建基於Javascript的移動web CMS——添加jQuery外掛程式

構建基於Javascript的移動web CMS——添加jQuery外掛程式

當看到墨頎 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