我试图加载 jQRangeSlider 在一个模式对话框。 加载所有 jQRangeSlider 的脚本之后。 成功加载脚本,但语气中不与 jQRangeSlider
I am trying to load jQRangeSlider in a modal box. After load all jQRangeSlider scripts. Scripts loaded Successfully but Modal box is not showing with jQRangeSlider
我努力做的事情。
还有就是 ID
上市。
点击每个 ID名为
Ajax和获取来自后端滑块数据(MySQL的)。
There is listing of id
.
Click on each id
ajax called and fetched the slider data from backend(MySql).
那么模型箱将出现滑块。滑块有whitch从后端(MySQL的)获取的信息,根据 ID
。
then a model box will appear with slider. Slider have the information whitch are fetched from backend(MySql) according to id
.
有很多的名单 ID
。因此,不可能设置静态滑块。
There is lot of id
in list. so it is not possible to set a static slider.
JS小提琴 http://jsfiddle.net/Njhvv/2/
的jQuery
$(document).ready(function () {
$("#sliderAjaxButton").on('click', function () {
$.when(
$.getScript("http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"),
$.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRangeSlider.js"),
$.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderMouseTouch.js"),
$.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderDraggable.js"),
$.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderBar.js"),
$.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderHandle.js"),
$.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderLabel.js"),
$.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRuler.js")
).done(function () {
alert("Loaded all scripts");
$("#sliderAjax").modal({
"show": function(){
setTimeout(function(){
$("#sliderAjaxShow").rangeSlider("resize");
}, 500);
}
});
});
});
});
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ghusse.github.io/jQRangeSlider/stable/css/iThing.css" type="text/css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="" id='sliderAjaxButton'>Show Slider Ajax</button>
<!-- Modal -->
<div class="modal fade" id="sliderAjax" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body" id='sliderAjaxShow'>...</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
更新:
我试图加载一系列滑块在仿真模型盒。
I am trying to load a Range Slider in Bootstrap Model Box.
问题: 第一次是不正确加载。但第二次后,它加载正确的。
Problem: First time it is not loading Properly. But after second time It is loading proper.
我需要:我需要在第一次尝试加载该
what i need : I need to load this in first attempt.
我在做什么:这是显示在每一个JS树叶点击。点击叶后JSON会打电话给数据输入到滑块。使用JSON数据滑块设置它的车夫。
What I am doing: It is Showing on every JS tree leaf click. after click on Leaf a JSON will call to give data input to slider. With JSON data slider sets its postilion.
我的链接的问题:jQuery范围滑块没有加载在模态对话框
我也试图与 $。当(),但仍然有同样的问题。
i have also tried with $.when() but still there is same problem.
推荐答案
您必须调用 $(#sliderAjaxShow)。rangeSlider(调整)
一旦模态显示,因为jQRangeSlider计算根据它的大小(即0时,父母是隐藏的)。
You have to call $("#sliderAjaxShow").rangeSlider("resize")
once the modal is shown, because jQRangeSlider calculates its position based on its size (which is 0 when the parent is hidden).
类似于
$("#sliderAjax").modal({
"show": function(){
setTimeout(function(){
$("#sliderAjaxShow").rangeSlider("resize");
}, 500);
}
});
看看文档在这里,你会看到需求的显示隐藏的滑块的一个活生生的例子:的 https://ghusse.github.io/jQRangeSlider/methods.html#resizeMethod
相关推荐
最新文章