[英]Using bootstrap-slider with jQuery UI
我想在jQuery UI中使用bootrap-slider 。 我在加載Bootstrap CSS和jQuery后遵循文檔並加載了插件代碼。
但是,滑塊未初始化 - <input>
保持原樣,我在瀏覽器控制台中看不到任何錯誤。
以下是代碼:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" media="all" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="./slider/bootstrap-slider.css" media="all" />
<script src="./slider/bootstrap-slider.js"></script>
</head>
<body>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
<script type="text/javascript">
// With JQuery
$('#ex1').slider({
formatter: function(value) {
return 'Current value: ' + value;
}
});
</script>
</body>
你能告訴我有什么問題嗎?
問題是jQuery UI還有一個使用slider()
方法初始化的滑塊小部件 ,因此存在命名空間沖突。
如果您想單獨使用引導滑塊,則可以從下載頁面下載自定義jQuery ui而不使用滑塊小部件。
或者如果要同時使用兩者,請初始化引導滑塊,如:
$('#ex1').bootstrapSlider({
formatter: function(value) {
return 'Current value: ' + value;
}
});
這是因為,根據以下代碼:
if($) { // line number 1192
var namespace = $.fn.slider ? 'bootstrapSlider' : 'slider';
$.bridget(namespace, Slider);
}
作者正在檢查命名空間中是否存在另一個名為slider的插件,如果它存在,滑塊將被賦予名稱bootstrapSlider
$('#ex1').bootstrapSlider({ formatter: function(value) { return 'Current value: ' + value; } });
#ex1Slider .slider-selection { background: #BABABA; }
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://raw.githack.com/seiyria/bootstrap-slider/master/css/bootstrap-slider.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script src="https://raw.githack.com/seiyria/bootstrap-slider/master/js/bootstrap-slider.js"></script> <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" />
重新排列腳本文件並刪除jquery-ui.min.js使其工作。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" media="all" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./slider/bootstrap-slider.css" media="all" />
<script src="./slider/bootstrap-slider.js"></script>
</head>
<body>
<input id="ex1" data-slider-id='ex1Slider' data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
<script type="text/javascript">
// With JQuery
$('#ex1').slider({
formatter: function(value) {
return 'Current value: ' + value;
}
});
</script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style type="text/css">
#ex1Slider .slider-selection {
background: #BABABA;
}
</style>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.