大家好，又见面了，我是全栈君。
当看到墨颀 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
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/115673.html原文链接：https://javaforall.net
