0
Ion.rangeSliderをBootstrapタブ内に実装しました。スライダはタブ内にあるように見えますが、実際にはタブのコンテンツパネルの外側に配置されています。Ion.rangeSlider Add/Minusとタブの問題
- だから、3つのタブスターター、値、プロがあります。
- 各タブはそれぞれの範囲スライダが変化し、、の値をクリックします。
- クリックするとスライダの値を1000ずつ増減する+/-ボタンがあります。この+/-ボタンは、範囲スライダボタンをクリックして任意のポイントにドラッグすると正しく動作します。
タブボタンをクリックしたときに、+/-が正しく動作しないという問題があります。問題を複製するには： -
1）次に/増加、その時点から値を減らす必要がある+/-ボタンをクリックして値またはProのボタン
2）をクリックしますが、それはしていません。
解決策をご提供ください。感謝します。
var $keywordSlider = $('#slider-bar'),
$btnMinus = $('#button-minus'),
$btnPlus = $('#button-plus'),
min = 0,
max = 1200000,
from = 85000,
step = 1000;
$keywordSlider.ionRangeSlider({
type: "single",
keyboard: true,
prettify_separator: ",",
min: min,
max: max,
step: step,
from: from,
onFinish: function (data) {
from = data.from;
}
});
$btnMinus.on("click", function() {
updateRange(-1);
});
$btnPlus.on("click", function() {
updateRange(1);
});
var range_instance = $keywordSlider.data("ionRangeSlider");
var updateRange = function (direction) {
from += step * direction;
if (from < min) {
from = min;
} else if (from > max) {
from = max;
}
range_instance.update({
from: from
});
};
$('ul.nav-tabs li#starter-plan a').click(function(data) {
range_instance.update({
from: 85000
});
});
$('ul.nav-tabs li#value-plan a').click(function(data) {
range_instance.update({
from: 525000
});
});
$('ul.nav-tabs li#pro-plan a').click(function(data) {
range_instance.update({
from: 1000000
});
});<div id="membership-plan">
<ul class="nav nav-tabs">
<li id="starter-plan" role="presentation" class="active"><a href="#tab-starter" data-toggle="tab">Starter</a></li>
<li id="value-plan" role="presentation"><a href="#tab-value" data-toggle="tab">Value</a></li>
<li id="pro-plan" role="presentation"><a href="#tab-pro" data-toggle="tab">Pro</a></li>
</ul>
<div id="keyword-slider">
<h2 class="txt-center">Custom</h2>
<h3>Keywords total:</h3>
<input type="text" id="slider-bar" name="example_name" value="" style="width: 64%;" />
<br /><br /><br /><br /><br />
<button id="button-minus">−</button> <button id="button-plus">+</button>
</div> <!-- END KEYWORD SLIDER -->
<div class="tab-content">
<div id="tab-starter" class="tab-pane fade in active">
<div class="plan-details">
<header>
<strong class="price">$23</strong>
<span class="period">PER MONTH</span>
</header>
<span class="para base-xs-buffer">
<b>Data</b><br />
Avg. Monthly Volume<br />
Historical Volume<br />
Competition Score<br />
Recommended Bid ($USD)
</span>
<span class="para">
<b>Support</b><br />
Email only
</span>
<footer>
<button class="btn btn-normal">Sign-up</button>
<button class="btn btn-normal">Contact</button>
</footer>
</div> <!-- END PLAN DETAILS -->
</div> <!-- END TAB STARTER -->
<div id="tab-value" class="tab-pane fade">
<div class="plan-details">
<header>
<strong class="price">$115</strong>
<span class="period">PER MONTH</span>
</header>
<span class="para base-xs-buffer">
<b>Data</b><br />
Avg. Monthly Volume<br />
Historical Volume<br />
Competition Score<br />
Recommended Bid ($USD)
</span>
<span class="para">
<b>Support</b><br />
Email only
</span>
<footer>
<button class="btn btn-normal">Sign-up</button>
<button class="btn btn-normal">Contact</button>
</footer>
</div> <!-- END PLAN DETAILS -->
</div> <!-- END TAB VALUE -->
<div id="tab-pro" class="tab-pane fade">
<div class="plan-details">
<header>
<strong class="price">$185</strong>
<span class="period">PER MONTH</span>
</header>
<span class="para base-xs-buffer">
<b>Data</b><br />
Avg. Monthly Volume<br />
Historical Volume<br />
Competition Score<br />
Recommended Bid ($USD)
</span>
<span class="para">
<b>Support</b><br />
Email only
</span>
<footer>
<button class="btn btn-normal">Sign-up</button>
<button class="btn btn-normal">Contact</button>
</footer>
</div> <!-- END PLAN DETAILS -->
</div> <!-- END TAB PRO -->
</div> <!-- END TAB CONTENT -->
</div> <!-- END MEMBERSHIP PLAN -->