jQuery，Bootstrap 3.0和requirejs.无法使用引导程序的功能 [英] jquery, bootstrap 3.0, and requirejs. can't use bootstrap's functions
问题描述
我已经查看了与该问题相关的所有信息(确定...第一个Google页面点击)，但是解决方案无效.
I've looked at all the info (ok.. first google page hits) related to this issue but the solutions didn't work.
我的config.js如下所示:
my config.js looks like below:
var config = {
paths : {
jquery : "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",
// "jquery" : "momsplanner/backgrid/assets/js/jquery",
"underscore" : "momsplanner/underscore/underscore",
"text" : "momsplanner/requirejs_text/text",
// "backbone" : "momsplanner/backbone",
"Backbone" : "momsplanner/backgird/assets/js/backbone",
"Backgrid" : "momsplanner/backgrid/lib/backgrid",
"bootstrap" : "momsplanner/bootstrap/dist/js/bootstrap"
// "bootstrap" : "//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap"
// 'jquery.bootstrap' : "momsplanner/backgrid/assets/js/bootstrap"
},
// A lot of dependencies don't support AMD loaders. Here is an example shim
// configuration to remedy that.
shim : {
"underscore": {
exports: '_'
},
"Backbone" : {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
"Backgrid" : {
deps: ['jquery', 'underscore', 'backbone'],
exports: 'Backgrid'
},
'bootstrap' : {
deps: ["jquery"]
}
}
};
if (typeof exports === 'object') {
// If this file is loaded from node, export the config variable.
module.exports = config;
} else if (typeof define === 'function' && define.amd) {
// If this file is being loaded in the browser, load the config
define([], function() {
requirejs.config(config);
});
}
我正在加载如下所示的模块
And I'm loading a module like following
require( [
'momsplanner/js/custom_bootstrap'
], function(custom_bootstrap) {
$(document).ready(function() {
custom_bootstrap.setNavbarActive();
custom_bootstrap.gotoTab();
});
});
custom_bootstrap看起来像:
custom_bootstrap looks like:
define([
"jquery",
"bootstrap"
], function($) {
.. omitting some functions..
// http://stackoverflow.com/questions/7862233/twitter-bootstrap-tabs-go-to-specific-tab-on-page-reload
function gotoTab() {
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
var $selector = $('.nav-tabs a[href='+hash.replace(prefix,"")+']');
console.log($selector.html());
$selector.tab('show'); // ERROR HERE!!!! <------------------------
}
// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
}
return {
setNavbarActive: setNavbarActive,
gotoTab: gotoTab
};
我在$ selector.tab('show')收到错误消息，并显示错误消息:
I get error message at the $selector.tab('show') with error message:
Uncaught TypeError: Object [object Object] has no method 'tab'
如何解决此错误?
推荐答案
我也遇到了问题，最后我解决了，只需更改引导程序版本即可.
I also has the problem, and finally I solve it just change my bootstrap version.
首先，我使用bootstrap3.1.1，它定义了这样的插件.
First I use bootstrap3.1.1, it define plugins like this.
(function (o_o) {
typeof define === 'function' && define.amd ? define(['jquery'], o_o) :
typeof exports === 'object' ? o_o(require('jquery')) : o_o(this.jQuery)
})(function($) { ... });
然后我更改为bootstrap3.2.0，它定义了这样的插件.
Then I change to bootstrap3.2.0, it define plugins like this.
+function ($) { ... }(jQuery)
第一个，在定义插件时，无法将插件安装到全局$，因此当 使用该插件，就会发生错误:Uncaught TypeError:undefined不是一个函数.
The first one, when it defines a plugin, it can't mount the plugin to the global $, so when use the plugin, the error occurs: Uncaught TypeError: undefined is not a function.
第二个效果很好，因为jQuery是一个全局变量.
The second works fine, because jQuery is a global variable.
这篇关于jQuery，Bootstrap 3.0和requirejs.无法使用引导程序的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
