我的bootstrap按钮组出现问题。
现在我在引导程序js之前调用了jquery ui js,按钮gorup工作正常。但是,如果我保留此结构,则jquery ui对话框按钮不起作用,特别是由于js代码冲突而无法显示关闭按钮。
如果我切换顺序然后jquery ui对话框关闭按钮显示,但由于两个js库之间的冲突,引导程序的按钮组全部搞砸了。
我尝试过使用bootstraps解决方案:
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
然后在调用$(“。btn”)。bootstrapBtn()并在每次单击组中的新按钮时测试按钮组时出现错误:
cannot call methods on button prior to initialization; attempted to call method 'toggle'
我做了大量的研究,仍然无法提出解决方案。
这是我的代码:
<div id="chartSelector" class="row" style="margin-left:auto;margin-right:auto;width:170px;display:none;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input class="barChart" data-target="barChart" type="radio" name="options" id="bar" checked> Bar
</label>
<label class="btn btn-default">
<input class="pieChart" data-target="pie-section" type="radio" name="options" id="pie"> Pie
</label>
<label class="btn btn-default">
<input class="columnChart" data-target="columnChart" type="radio" name="options" id="column"> Column
</label>
</div>
<div class="bar-section k-content">
<div class="chart" id="barChart"></div>
</div>
<div class="container-fluid pie-section k-content">
<div class="row chart" id="pie-section"></div>
</div>
<div class="column-section k-content">
<div class="chart" id="columnChart"></div>
</div>
我的JS处理按钮:
$('.btn').button();
$('input[type=radio]').on('change', function () {
var target = "#" + $(this).data("target");
$(".chart").not(target).hide();
$(target).show();
kendo.resize($(".k-content"));
});
PS:使用Jquery UI版本1.11.1和Jquery版本1.11.1
答案 0 :(得分:12)
如果你只是谷歌那个错误信息,你会看到it's a jQuery UI error message,所以你代码中的$.fn.button
指的是jQuery UI Button插件,不是Bootstrap Button插件。
您需要在加载Bootstrap之后但在加载jQuery UI之前放置noConflict
,例如:
<script src="/foo/jquery.min.js"></script>
<script src="/foo/bootstrap.min.js></script>
<script>
$.fn.bootstrapBtn = $.fn.button.noConflict();
</script>
<script src="/foo/jquery.ui.js"></script>
然后,您需要在代码的其余部分使用$(...).bootstrapBtn(...)
代替$(...).button(...)
。
答案 1 :(得分:2)
如果您正在使用gulp或Grunt来构建资产(例如使用main-bower-files),则选项将不包括整个jQueryUI。只需拿走你需要的部件,然后跳过按钮和工具提示。根据我的经验,这两者是冲突最多的。
例如,将以下部分放在bower.json中:
"overrides":
"jqueryui": {
"main": [
"ui/core.js",
"ui/widget.js",
"ui/mouse.js",
"ui/datepicker.js",
"ui/draggable.js",
"ui/droppable.js",
"ui/resizable.js",
"ui/selectable.js"
]
}
使用所需的部件也是一种很好的做法,可以在加载时完全消除页面大小并完全避免冲突问题。希望这也适用于您的情况。
编辑修复错误
答案 2 :(得分:0)
我知道这是一个旧帖子,但我遇到了同样的问题。我有 Bootstrap 3.0.3 并将其升级到版本 >=3.4.1 解决了这个问题。
$('.btn').button();
$('input[type=radio]').on('change', function() {
var target = "#" + $(this).data("target");
$(".chart").not(target).hide();
$(target).show();
kendo.resize($(".k-content"));
});
<div id="chartSelector" class="row" style="margin-left:auto;margin-right:auto;width:170px;display:non;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input class="barChart" data-target="barChart" type="radio" name="options" id="bar" checked> Bar
</label>
<label class="btn btn-default">
<input class="pieChart" data-target="pie-section" type="radio" name="options" id="pie"> Pie
</label>
<label class="btn btn-default">
<input class="columnChart" data-target="columnChart" type="radio" name="options" id="column"> Column
</label>
</div>
<div class="bar-section k-content">
<div class="chart" id="barChart"></div>
</div>
<div class="container-fluid pie-section k-content">
<div class="row chart" id="pie-section"></div>
</div>
<div class="column-section k-content">
<div class="chart" id="columnChart"></div>
</div>
</div>