构建基于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)


相关推荐

  • VM虚拟机桥接模式无法联网解决办法

    VM虚拟机桥接模式无法联网解决办法1.背景介绍:桥接模式—-使虚拟机客户机可以和主机在同一网段,这样,和主机同局域网内的其他主机就也可以ping到虚拟机了;因此,虚拟机设置为桥接模式,且设为静态IP,这样以后就可以方便的使用虚拟机了;2.问题描述:桥接模式之前是好用的,但是主机有一天突然宕机了,重启之后,打开虚拟机,发现主机和虚拟机客户机相互之间ping不通;测试:a.将虚拟机IP获取方式改为自

  • Kubernetes基础一[通俗易懂]

    Kubernetes基础一[通俗易懂]一、K8S的架构介绍1.1Docker原理:依赖于镜像,容器之间隔离使用cgroup+namespace实现隔离的;1.2K8S的架构介绍了解K8S之前需要掌握DockerKubernetes设计之初就是为了管理,调度容器技术;是google开发的一套开源的容器化编排技术;业界还有其他公司的容器编排技术例如Docker-compose,Docker-swarm,Mesos,目前k8s使用最广泛。Kubernetes则采用了Pod和Label这样的概念把容器组合成一个个的互相存在依赖关系

  • 2015-11-01 HTML, CSS, JavaScript, DOM

    2015-11-01 HTML, CSS, JavaScript, DOM

  • JS 暂时性死区「建议收藏」

    JS 暂时性死区「建议收藏」JS暂时性死区ES6暂时性死区引用ES6暂时性死区只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。vartmp=123;if(true){tmp=’abc’;//ReferenceErrorlettmp;}上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后…

  • MySQL 中NULL和空值的区别?

    做一个积极的人编码、改bug、提升自己我有一个乐园,面向编程,春暖花开!01 小木的故事作为后台开发,在日常工作中如果要接触Mysql数据库,那么不可避免会遇到Mysql中的NULL和空值。那你知道它们有什么区别吗?学不动了,也不想知道它们有什么区别。大兄弟,不行啊,要面试!前些天我的好朋友小木去应聘工作,他面试完回来和我聊天回味了一道他的面试题。面试官:你有用过MyS…

  • MyBatis入门学习(一)

    MyBatis入门学习(一)

    2021年12月10日

发表回复

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

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