Blog

Blog

PHODAL

构建基于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

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签