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

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

大家好,又见面了,我是全栈君。

当看到墨颀 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账号...

(0)


相关推荐

  • 清明梦超能力者黄YY(idx数组)

    清明梦超能力者黄YY(idx数组)清明梦超能力者黄YYhttps://www.nowcoder.com/acm/contest/206/I题目描述黄YY是一个清明梦超能力者,同时也是一个记忆大师。他能够轻松控制自己在梦中的一切,

  • 卡盟平台_卡盟做淘宝对接好吗

    卡盟平台_卡盟做淘宝对接好吗简介:商城风格,三内页模板,全修复无BUG,一键装修主站,一键对接货源,自定义后台登录背景,前台风格自定义背景等,已集成易接口对接易充值接口,修复BUG等上传好后解压文件修改0.system.conf文件输入自己绑定的域名创建一个数据库systemroot密码改为root这里演示默认,运营的时候自行修改密码导入数据库打开apache的配置把最后一行修改为IncludeOptional/home/vhost/*.conf在计划任务里面添加Shell脚本任务名称随便设置执行周期为1

  • cocos2d-x lua 内存回收

    cocos2d-x lua 内存回收

  • python的学生信息管理系统_学员信息管理系统设计

    python的学生信息管理系统_学员信息管理系统设计一.系统需求使用面向对象编程思想完成学员管理系统的开发,具体如下:系统要求:学员数据存储在文件中系统功能:添加学员、删除学员、修改学员信息、查询学员信息、显示所有学员信息、保存学员信息及退出系统等功能。程序文件如下:程序入口文件:main.py学员文件:student.py管理系统⽂文件:managerSystem.pymain.py#1.导入managerSystem模块frommanagerSystemimport*#2.启动学员管理系统if__name__

  • pve安装docker图形化_怎么安装docker

    pve安装docker图形化_怎么安装docker基本相当于转载,但我光贴图也不行啊,还是把步骤加上去年年底这NUC到手时,就装PVE练手,然而最后做主力挂机的是那会买的个1037U小主机当时就尝试过装LibreELEC,结果是接显示器黑屏不过后来我直接在宿主机上装桌面和Kodi,但是吧那源里的Kodi是17的对于x265是软解。。。怎么装当然是看的值得买上的这个人家是OMV咱这是PVE都是装桌面再装KODI,但是为了保持纯净的PVE所以才想直通…

    2022年10月30日
  • python中的文本操作

    python中的文本操作

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号