大家好,又见面了,我是全栈君。
当看到墨颀 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
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/115673.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...