0

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

我正在尝试做的事情。

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

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

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

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">&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 数据滑块设置它的位置。

我的链接问题：jQuery Range Slider 未在模态框中加载

我也尝试过$.when()但仍然存在同样的问题。

4

1 回答 1

1

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

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

就像是

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

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

于 2014-06-26T06:45:38.210 回答