构建基于Javascript的移动web CMS添加jQuery插件

移动开发
当看到墨颀 CMS的菜单,变成一个工具栏的时候,变觉得这一切有了意义。于是就继续看看这样一个CMS的边栏是怎么组成的。

[[116614]]

当看到墨颀 CMS的菜单,变成一个工具栏的时候,变觉得这一切有了意义。于是就继续看看这样一个CMS的边栏是怎么组成的。

RequireJS与jQuery 插件示例

一个简单的组合示例如下所示,在main.js中添加下面的内容

  1. requirejs.config( { 
  2.     "shim": { 
  3.         "jquery-cookie"  : ["jquery"
  4.     } 
  5. } ); 

接着在另外的文件中添加

  1. define(["jquery"], 
  2.        function($){ 
  3.            //添加函数 
  4. }); 

这样我们就可以完成一个简单的插件的添加。

墨颀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:

  1. require.config({ 
  2.     baseUrl: 'lib/'
  3.     paths: { 
  4.         'text''text'
  5.         jquery: 'jquery-2.1.1.min'
  6.         async: 'require/async'
  7.         json: 'require/json'
  8.         mdown: 'require/mdown'
  9.         router: '../router'
  10.         templates: '../templates'
  11.         jquerySidr: 'jquery.sidr.min'
  12.         markdownConverter : 'require/Markdown.Converter' 
  13.     }, 
  14.     shim: { 
  15.         jquerySidr:["jquery"], 
  16.         underscore: { 
  17.             exports: '_' 
  18.         } 
  19.     } 
  20. }); 
  21.  
  22. require(['../app'], function(App){ 
  23.     App.initialize(); 
  24. }); 

添加jquery.sidr.min到里面。

jQuery Sidr与RequireJS协作

引用官方的示例代码

  1. $(document).ready(function() { 
  2.   $('#simple-menu').sidr(); 
  3. }); 

我们需要将上面的初始化代码添加到app.js的初始化中,

  1. define([ 
  2.     'jquery'
  3.     'underscore'
  4.     'backbone'
  5.     'router'
  6.     'jquerySidr' 
  7. ], function($, _, Backbone, Router){ 
  8.  
  9.     var initialize = function(){ 
  10.         $(document).ready(function() { 
  11.             $('#menu').sidr(); 
  12.         }); 
  13.         Router.initialize(); 
  14.     }; 
  15.  
  16.     return { 
  17.         initialize: initialize 
  18.     }; 
  19. }); 

这样打开墨颀 CMS便可以看到***的效果。

责任编辑:闫佳明 来源: phodal
相关推荐

2014-07-18 09:59:17

移动webJavascript移动Web

2012-06-04 15:24:56

jQuery

2012-06-15 11:32:19

ibmdw

2012-04-16 09:19:03

jQuery插件

2010-11-26 09:36:41

移动互联网移动Web界面Web站点

2012-10-11 09:09:26

jQueryJSWeb

2012-03-06 16:57:40

jQuery mobijQuery mobiframework

2012-05-14 17:35:28

移动Web

2014-03-25 14:21:18

WebSocket实时

2012-06-04 09:48:04

jQuery

2013-11-28 09:38:04

移动开发jQuery Mobi

2023-06-26 00:01:11

2010-06-13 09:22:37

jQuery

2011-09-05 13:45:25

jQuery MobiSencha Touc移动Web UI框架

2014-03-28 15:36:43

移动WebJavaScript开发框架

2012-03-21 09:36:33

ibmdw

2011-07-08 15:27:03

jQuery Mobi

2011-01-24 08:42:22

2019-07-10 10:51:20

jqueryJavaScript前端

2018-10-15 10:22:51

点赞
收藏

51CTO技术栈公众号