构建基于Javascript的移动web CMS——加入jQuery插件
构建基于Javascript的移动web CMS——加入jQuery插件
全栈程序员站长
发布于 2022-07-10 10:38:10
发布于 2022-07-10 10:38:10
大家好，又见面了，我是全栈君。
当看到墨颀 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便能够看到最后的效果。
相关资源
源代码 Github: https://github.com/gmszone/moqi.mobi
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/115673.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年2月1，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录