摘要：
最近在做一个基于adminLte框架的项目，在我将require引进项目之后，框架中的adminlte.js中搞的左侧边栏就不起作用了。刚开始以为是各位不符合requireJs的书写格式，随后将adminLTe。js的源码修改为define（）的格式，然而当然还是没有效果。define(['jquery'],function(){if(typeofjQuery==='undefined'){thrownewError('AdminLTErequiresjQuery')}}这是开头，源码里都是自执行函数，一共8个函数，分别是其中的Tree函数是负责左侧导航栏下拉与收回的。data){varoptions=$.extend$this.data}})}varold=$.fn.tree$.fn.tree=Plugin$.fn.tree.Constructor=Tree//NoConflictMode//================$.fn.tree.noConflict=function(){$.fn.tree=oldreturnthis}//TreeDataAPI//=============$.each}关键问题在于TreeDataAPI这个地方下边是源代码$.on在这里windowload函数并没有执行。
最近在 做一个基于 adminLte 框架的项目，在我将 require 引进项目之后，框架中的 adminlte.js 中搞的左侧边栏 就不起作用了。
刚开始以为是 各位不符合 requireJs 的书写格式，随后将 adminLTe。js 的 源码 修改为 define（） 的格式，然而 当然还是没有效果。
define(['jquery'],function() { if (typeof jQuery === 'undefined') { throw new Error('AdminLTE requires jQuery') } }
这是 开头，源码里都是自执行函数，一共8个函数，分别是其中的Tree 函数 是 负责 左侧 导航栏 下拉与收回的。
+ functionTree($) { 'use strict' var DataKey = 'lte.tree' var Default ={ animationSpeed: 500, accordion: true, followLink: false, trigger: '.treeview a' } var Selector ={ tree: '.tree', treeview: '.treeview', treeviewMenu: '.treeview-menu', open: '.menu-open, .active', li: 'li', data: '[data-widget="tree"]', active: '.active' } var ClassName ={ open: 'menu-open', tree: 'tree' } var Event ={ collapsed: 'collapsed.tree', expanded: 'expanded.tree' } //Tree Class Definition //===================== var Tree = function(element, options) { this.element =element this.options =options $(this.element).addClass(ClassName.tree) $(Selector.treeview + Selector.active, this.element).addClass(ClassName.open) this._setUpListeners() } Tree.prototype.toggle = function(link, event) { var treeviewMenu =link.next(Selector.treeviewMenu) var parentLi =link.parent(); var isOpen =parentLi.hasClass(ClassName.open) if (!parentLi.is(Selector.treeview)) { return } if (!this.options.followLink || link.attr('href') === '#') { event.preventDefault() } if(isOpen) { this.collapse(treeviewMenu, parentLi) } else{ this.expand(treeviewMenu, parentLi) } } Tree.prototype.expand = function(tree, parent) { var expandedEvent =$.Event(Event.expanded) if (this.options.accordion) { var openMenuLi =parent.siblings(Selector.open) var openTree =openMenuLi.children(Selector.treeviewMenu) this.collapse(openTree, openMenuLi) } parent.addClass(ClassName.open) tree.slideDown(this.options.animationSpeed, function() { $(this.element).trigger(expandedEvent) }.bind(this)) } Tree.prototype.collapse = function(tree, parentLi) { var collapsedEvent =$.Event(Event.collapsed) tree.find(Selector.open).removeClass(ClassName.open) parentLi.removeClass(ClassName.open) tree.slideUp(this.options.animationSpeed, function() { tree.find(Selector.open + ' > ' +Selector.treeview).slideUp() $(this.element).trigger(collapsedEvent) }.bind(this)) } //Private Tree.prototype._setUpListeners = function() { var that = this $(this.element).on('click', this.options.trigger, function(event) { that.toggle($(this), event) }) } //Plugin Definition //================= functionPlugin(option) { return this.each(function() { var $this = $(this) var data = $this.data(DataKey) if (!data) { var options = $.extend({}, Default, $this.data(), typeof option == 'object' &&option) $this.data(DataKey, new Tree($this, options)) } }) } var old =$.fn.tree $.fn.tree =Plugin $.fn.tree.Constructor =Tree //No Conflict Mode //================ $.fn.tree.noConflict = function() { $.fn.tree =old return this } //Tree Data API //============= $(Selector.data).each(function() { Plugin.call($(this)); }) }(jQuery)
关键问题在于
Tree Data API 这个地方
下边是源代码
$(window).on('load',function() {
$(Selector.data).each(function() {
Plugin.call($(this));
})
})在这里 window load 函数并没有执行。
在 函数内打印 也没有执行。我将 外层的 load 的函数删掉了。然后。。。。 问题就解决了。
//Tree Data API //============= $(Selector.data).each(function() { Plugin.call($(this)); })
我现在还不知道 为什么 load 函数为什么没有执行，可能 是因为 我之前引入了 domReady 函数的缘故吧。
既然解决了，就将 函数整体装进一个 匿名函数中 return，然后在 启动文件中引用就行了。
define([ 'domReady!', 'require', 'angular', 'angular-route', 'jquery', 'bootstrap', 'jquerydataTables', 'datatables.net', 'app', 'routes', 'controller' ],function(doc,require,angular) { angular.bootstrap(doc,['myapp']); require(['adminlte'],function(adminlte) { 在这里引用之后直接执行。因为函数里都是自执行函数。 console.log(adminlte) adminlte(); }) })
adminlte.js 中一共8个函数 ，出问题的原因基本都可以确定为 window.onload 没有执行。