Construct Javascript-based mobile web CMS-add jQuery plug-in
When you see the menu of moji CMS, it becomes a toolbar, and it makes sense. So let's continue to see how the CMS sidebar is composed.
RequireJS and jQuery Plug-In Examples
An example of a simple combination is as follows: add the following content in main. js
requirejs.config( { "shim": { "jquery-cookie" : ["jquery"] }} );
Add
Define (["jquery"], function ($) {// Add function });
In this way, we can add a simple plug-in.
Add jQuery plug-in jQuery Sidr to mojicms
The best jQuery plugin for creating side menus and the easiest way for doing your menu responsive
This is the best and simplest tool to create a responsive sidebar. Therefore, we need to download jQuery. sidr. min. js to the directory, and then modify 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();});
Add jquery. sidr. min to it.
Collaboration between jQuery Sidr and RequireJS
Reference official sample code
$(document).ready(function() { $('#simple-menu').sidr();});
We need to add the above initialization code to app. js initialization,
define([ 'jquery', 'underscore', 'backbone', 'router', 'jquerySidr'], function($, _, Backbone, Router){ var initialize = function(){ $(document).ready(function() { $('#menu').sidr(); }); Router.initialize(); }; return { initialize: initialize };});
In this way, you can see the final effect by opening modemcms.
Related Resources
QQ group: 344271543
Source code Github: https://github.com/gmszone/moqi.mobi