Question

我正在尝试在模式框中加载jQRangeSlider。加载所有jQRangeSlider脚本后。脚本已成功加载但模态框未显示jQRangeSlider

我想做什么。

有id的列表。单击调用的每个id ajax并从后端（MySql）获取滑块数据。

然后会出现一个带滑块的模型框。 Slider具有根据id从后端（MySql）获取的信息。

列表中有很多id。因此无法设置静态滑块。

JS Fiddle 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">&times;</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>

已更新：

我正在尝试在Bootstrap模型框中加载范围滑块。

问题： 第一次没有正确加载。但经过第二次加载正确。

我需要什么：我需要在第一次尝试时加载它。

我正在做什么：它显示在每个JS树叶上点击。单击Leaf后，JSON将调用以向滑块提供数据输入。使用JSON数据滑块设置其postilion。

我的关联问题：jQuery Range Slider is not loading in Modal Box

我也试过 $。when（），但仍然存在同样的问题。

Answer 1

显示模态后，您必须调用$("#sliderAjaxShow").rangeSlider("resize")，因为jQRangeSlider会根据其大小（隐藏父级时为0）计算其位置。

将 CSS规则添加到您的小提琴中，否则您将看不到任何内容。
使用缩小文件，否则您必须以正确的顺序包含每个开发文件。
显示模式时（动画后）调用调整大小。由于jQuery UI在动画完成后不提供触发事件，因此您必须绑定事件显示并在超时时调用resize。

像

$("#sliderAjax").modal({
             "show": function(){
                 setTimeout(function(){
                      $("#sliderAjaxShow").rangeSlider("resize");
                 }, 500);
             }
         });

看一下这里的文档，你会看到一个按需显示隐藏滑块的实例：https://ghusse.github.io/jQRangeSlider/methods.html#resizeMethod

jQuery Range Slider未在Modal Box中加载

1 个答案: