使用JQuery滑块时如何将DIV保持在同一行?

时间:2018-01-31 17:44:25

标签: jquery html css3 jquery-ui uislider

我希望在同一行上有一个图像,一个jQuery滑块和另一个图像。根据我的阅读和要求,我通常可以使用样式

#sliderScaleDiv {
        display: inline;
}

#halo {
        position: relative;
        z-index: 20;
        vertical-align: top;
        display: inline-block;
}

#skull {
        position: relative;
        z-index: 20;
        vertical-align: top;
        display: inline-block;
}

我的DIV就是这样设置的

<div id="sliderScaleDiv">
<div id="halo">
            <img width="75" src="http://www.clker.com/cliparts/n/c/1/B/r/q/angel-halo-with-wings.svg" alt="Angel halo" />
        </div>
<div class="slider"></div>
        <div id="skull">
            <img width="75" src="https://temporarytattoos.com/pub/media/catalog/product/cache/image/700x560/e9c3970ab036de70892d86c6d221abfe/s/k/skull-and-crossbones-temporary-tattoos_1601.jpg" alt="Skull" />
        </div>
    </div>

但是在我创建的小提琴 - http://jsfiddle.net/u72596ta/4/中,这种情况并没有发生。我想知道它是否因为滑块组件。它在页面加载后被初始化。有没有办法让所有东西保持在同一条线上并且仍然有我的功能滑块?

2 个答案:

答案 0 :(得分:0)

您需要指定滑块的宽度。

.slider{
 display: inline-block;
 width: 65%;
}

#halo {
 position: relative;
 z-index: 20;
 display: inline-block;
 margin-right: 10px;
}

#skull {
 position: relative;
 z-index: 20;
 display: inline-block;
 margin-left: 10px;
}

在html中,我只设置第一个图像的高度以匹配第二个图像高度,以便它们正确对齐。

<div id="sliderScaleDiv">
  <div id="halo">
     <img width="75" height="75" src="http://www.clker.com/cliparts/n/c/1/B/r/q/angel-halo-with-wings.svg" alt="Angel halo" />
 </div>
 <div class="slider"></div>
 <div id="skull">
  <img width="75" src="https://temporarytattoos.com/pub/media/catalog/product/cache/image/700x560/e9c3970ab036de70892d86c6d221abfe/s/k/skull-and-crossbones-temporary-tattoos_1601.jpg" alt="Skull" />
 </div>
</div>

更新小提琴:http://jsfiddle.net/u72596ta/5/

答案 1 :(得分:0)

为父def xor_reduce(values): result = 0 for value in values: result ^= value return result 提供宽度,然后向container提供宽度 slider见下文。

修改

您可以为左侧(display:inline-block)和右侧(#halo)的div使用固定宽度的中心div的流体宽度,以便中间div(#skull)展开根据可用空间自动,您可以使用.fluid作为父容器,display: table作为子容器。

display:table-cell
(function($) {

  "use strict";

  var extensionMethods = {





    // pips

    pips: function(settings) {

      var slider = this,
        i, j, p,
        collection = "",
        mousedownHandlers,
        min = slider._valueMin(),
        max = slider._valueMax(),
        pips = (max - min) / slider.options.step,
        $handles = slider.element.find(".ui-slider-handle"),
        $pips;

      var options = {

        first: "label",
        /* "label", "pip", false */

        last: "label",
        /* "label", "pip", false */

        rest: "pip",
        /* "label", "pip", false */

        labels: false,
        /* [array], { first: "string", rest: [array], last: "string" }, false */

        prefix: "",
        /* "", string */

        suffix: "",
        /* "", string */

        step: (pips > 100) ? Math.floor(pips * 0.05) : 1,
        /* number */

        formatLabel: function(value) {
          return this.prefix + value + this.suffix;
        }
        /* function
            must return a value to display in the pip labels */

      };

      if ($.type(settings) === "object" || $.type(settings) === "undefined") {

        $.extend(options, settings);
        slider.element.data("pips-options", options);

      } else {

        if (settings === "destroy") {

          destroy();

        } else if (settings === "refresh") {

          slider.element.slider("pips", slider.element.data("pips-options"));

        }

        return;

      }


      // we don't want the step ever to be a floating point or negative
      // (or 0 actually, so we'll set it to 1 in that case).
      slider.options.pipStep = Math.abs(Math.round(options.step)) || 1;

      // get rid of all pips that might already exist.
      slider.element
        .off(".selectPip")
        .addClass("ui-slider-pips")
        .find(".ui-slider-pip")
        .remove();

      // small object with functions for marking pips as selected.

      var selectPip = {

        single: function(value) {

          this.resetClasses();

          $pips
            .filter(".ui-slider-pip-" + this.classLabel(value))
            .addClass("ui-slider-pip-selected");

          if (slider.options.range) {

            $pips.each(function(k, v) {

              var pipVal = $(v).children(".ui-slider-label").data("value");

              if ((slider.options.range === "min" && pipVal < value) ||
                (slider.options.range === "max" && pipVal > value)) {

                $(v).addClass("ui-slider-pip-inrange");

              }

            });

          }

        },

        range: function(values) {

          this.resetClasses();

          for (i = 0; i < values.length; i++) {

            $pips
              .filter(".ui-slider-pip-" + this.classLabel(values[i]))
              .addClass("ui-slider-pip-selected-" + (i + 1));

          }

          if (slider.options.range) {

            $pips.each(function(k, v) {

              var pipVal = $(v).children(".ui-slider-label").data("value");

              if (pipVal > values[0] && pipVal < values[1]) {

                $(v).addClass("ui-slider-pip-inrange");

              }

            });

          }

        },

        classLabel: function(value) {

          return value.toString().replace(".", "-");

        },

        resetClasses: function() {

          var regex = /(^|\s*)(ui-slider-pip-selected|ui-slider-pip-inrange)(-{1,2}\d+|\s|$)/gi;

          $pips.removeClass(function(index, css) {
            return (css.match(regex) || []).join(" ");
          });

        }

      };

      function getClosestHandle(val) {

        var h, k,
          sliderVals,
          comparedVals,
          closestVal,
          tempHandles = [],
          closestHandle = 0;

        if (slider.values() && slider.values().length) {

          // get the current values of the slider handles
          sliderVals = slider.values();

          // find the offset value from the `val` for each
          // handle, and store it in a new array
          comparedVals = $.map(sliderVals, function(v) {
            return Math.abs(v - val);
          });

          // figure out the closest handles to the value
          closestVal = Math.min.apply(Math, comparedVals);

          // if a comparedVal is the closestVal, then
          // set the value accordingly, and set the closest handle.
          for (h = 0; h < comparedVals.length; h++) {
            if (comparedVals[h] === closestVal) {
              tempHandles.push(h);
            }
          }

          // set the closest handle to the first handle in array,
          // just incase we have no _lastChangedValue to compare to.
          closestHandle = tempHandles[0];

          // now we want to find out if any of the closest handles were
          // the last changed handle, if so we specify that handle to change
          for (k = 0; k < tempHandles.length; k++) {
            if (slider._lastChangedValue === tempHandles[k]) {
              closestHandle = tempHandles[k];
            }
          }

          if (slider.options.range && tempHandles.length === 2) {

            if (val > sliderVals[1]) {

              closestHandle = tempHandles[1];

            } else if (val < sliderVals[0]) {

              closestHandle = tempHandles[0];

            }

          }

        }

        return closestHandle;

      }

      function destroy() {

        slider.element
          .off(".selectPip")
          .on("mousedown.slider", slider.element.data("mousedown-original"))
          .removeClass("ui-slider-pips")
          .find(".ui-slider-pip")
          .remove();

      }

      // when we click on a label, we want to make sure the
      // slider's handle actually goes to that label!
      // so we check all the handles and see which one is closest
      // to the label we clicked. If 2 handles are equidistant then
      // we move both of them. We also want to trigger focus on the
      // handle.

      // without this method the label is just treated like a part
      // of the slider and there's no accuracy in the selected value

      function labelClick(label, e) {

        if (slider.option("disabled")) {
          return;
        }

        var val = $(label).data("value"),
          indexToChange = getClosestHandle(val);

        if (slider.values() && slider.values().length) {

          slider.options.values[indexToChange] = slider._trimAlignValue(val);

        } else {

          slider.options.value = slider._trimAlignValue(val);

        }

        slider._refreshValue();
        slider._change(e, indexToChange);

      }

      // method for creating a pip. We loop this for creating all
      // the pips.

      function createPip(which) {

        var label,
          percent,
          number = which,
          classes = "ui-slider-pip",
          css = "",
          value = slider.value(),
          values = slider.values(),
          labelValue,
          classLabel,
          labelIndex;

        if (which === "first") {

          number = 0;

        } else if (which === "last") {

          number = pips;

        }

        // labelValue is the actual value of the pip based on the min/step
        labelValue = min + (slider.options.step * number);

        // classLabel replaces any decimals with hyphens
        classLabel = labelValue.toString().replace(".", "-");

        // get the index needed for selecting labels out of the array
        labelIndex = (number + min) - min;

        // we need to set the human-readable label to either the
        // corresponding element in the array, or the appropriate
        // item in the object... or an empty string.

        if ($.type(options.labels) === "array") {

          label = options.labels[labelIndex] || "";

        } else if ($.type(options.labels) === "object") {

          if (which === "first") {

            // set first label
            label = options.labels.first || "";

          } else if (which === "last") {

            // set last label
            label = options.labels.last || "";

          } else if ($.type(options.labels.rest) === "array") {

            // set other labels, but our index should start at -1
            // because of the first pip.
            label = options.labels.rest[labelIndex - 1] || "";

          } else {

            // urrggh, the options must be f**ked, just show nothing.
            label = labelValue;

          }

        } else {

          label = labelValue;

        }




        if (which === "first") {

          // first Pip on the Slider
          percent = "0%";

          classes += " ui-slider-pip-first";
          classes += (options.first === "label") ? " ui-slider-pip-label" : "";
          classes += (options.first === false) ? " ui-slider-pip-hide" : "";

        } else if (which === "last") {

          // last Pip on the Slider
          percent = "100%";

          classes += " ui-slider-pip-last";
          classes += (options.last === "label") ? " ui-slider-pip-label" : "";
          classes += (options.last === false) ? " ui-slider-pip-hide" : "";

        } else {

          // all other Pips
          percent = ((100 / pips) * which).toFixed(4) + "%";

          classes += (options.rest === "label") ? " ui-slider-pip-label" : "";
          classes += (options.rest === false) ? " ui-slider-pip-hide" : "";

        }

        classes += " ui-slider-pip-" + classLabel;


        // add classes for the initial-selected values.
        if (values && values.length) {

          for (i = 0; i < values.length; i++) {

            if (labelValue === values[i]) {

              classes += " ui-slider-pip-initial-" + (i + 1);
              classes += " ui-slider-pip-selected-" + (i + 1);

            }

          }

          if (slider.options.range) {

            if (labelValue > values[0] &&
              labelValue < values[1]) {

              classes += " ui-slider-pip-inrange";

            }

          }

        } else {

          if (labelValue === value) {

            classes += " ui-slider-pip-initial";
            classes += " ui-slider-pip-selected";

          }

          if (slider.options.range) {

            if ((slider.options.range === "min" && labelValue < value) ||
              (slider.options.range === "max" && labelValue > value)) {

              classes += " ui-slider-pip-inrange";

            }

          }

        }



        css = (slider.options.orientation === "horizontal") ?
          "left: " + percent :
          "bottom: " + percent;


        // add this current pip to the collection
        return "<span class=\"" + classes + "\" style=\"" + css + "\">" +
          "<span class=\"ui-slider-line\"></span>" +
          "<span class=\"ui-slider-label\" data-value=\"" +
          labelValue + "\">" + options.formatLabel(label) + "</span>" +
          "</span>";

      }

      // create our first pip
      collection += createPip("first");

      // for every stop in the slider where we need a pip; create one.
      for (p = slider.options.pipStep; p < pips; p += slider.options.pipStep) {
        collection += createPip(p);
      }

      // create our last pip
      collection += createPip("last");

      // append the collection of pips.
      slider.element.append(collection);

      // store the pips for setting classes later.
      $pips = slider.element.find(".ui-slider-pip");



      // store the mousedown handlers for later, just in case we reset
      // the slider, the handler would be lost!

      if ($._data(slider.element.get(0), "events").mousedown &&
        $._data(slider.element.get(0), "events").mousedown.length) {

        mousedownHandlers = $._data(slider.element.get(0), "events").mousedown;

      } else {

        mousedownHandlers = slider.element.data("mousedown-handlers");

      }

      slider.element.data("mousedown-handlers", mousedownHandlers.slice());

      // loop through all the mousedown handlers on the slider,
      // and store the original namespaced (.slider) event handler so
      // we can trigger it later.
      for (j = 0; j < mousedownHandlers.length; j++) {
        if (mousedownHandlers[j].namespace === "slider") {
          slider.element.data("mousedown-original", mousedownHandlers[j].handler);
        }
      }

      // unbind the mousedown.slider event, because it interferes with
      // the labelClick() method (stops smooth animation), and decide
      // if we want to trigger the original event based on which element
      // was clicked.
      slider.element
        .off("mousedown.slider")
        .on("mousedown.selectPip", function(e) {

          var $target = $(e.target),
            closest = getClosestHandle($target.data("value")),
            $handle = $handles.eq(closest);

          $handle.addClass("ui-state-active");

          if ($target.is(".ui-slider-label")) {

            labelClick($target, e);

            slider.element
              .one("mouseup.selectPip", function() {

                $handle
                  .removeClass("ui-state-active")
                  .focus();

              });

          } else {

            var originalMousedown = slider.element.data("mousedown-original");
            originalMousedown(e);

          }

        });




      slider.element.on("slide.selectPip slidechange.selectPip", function(e, ui) {

        var $slider = $(this),
          value = $slider.slider("value"),
          values = $slider.slider("values");

        if (ui) {

          value = ui.value;
          values = ui.values;

        }

        if (slider.values() && slider.values().length) {

          selectPip.range(values);

        } else {

          selectPip.single(value);

        }

      });




    },








    // floats

    float: function(settings) {

      var i,
        slider = this,
        min = slider._valueMin(),
        max = slider._valueMax(),
        value = slider._value(),
        values = slider._values(),
        tipValues = [],
        $handles = slider.element.find(".ui-slider-handle");

      var options = {

        handle: true,
        /* false */

        pips: false,
        /* true */

        labels: false,
        /* [array], { first: "string", rest: [array], last: "string" }, false */

        prefix: "",
        /* "", string */

        suffix: "",
        /* "", string */

        event: "slidechange slide",
        /* "slidechange", "slide", "slidechange slide" */

        formatLabel: function(value) {
          return this.prefix + value + this.suffix;
        }
        /* function
            must return a value to display in the floats */

      };

      if ($.type(settings) === "object" || $.type(settings) === "undefined") {

        $.extend(options, settings);
        slider.element.data("float-options", options);

      } else {

        if (settings === "destroy") {

          destroy();

        } else if (settings === "refresh") {

          slider.element.slider("float", slider.element.data("float-options"));

        }

        return;

      }




      if (value < min) {
        value = min;
      }

      if (value > max) {
        value = max;
      }

      if (values && values.length) {

        for (i = 0; i < values.length; i++) {

          if (values[i] < min) {
            values[i] = min;
          }

          if (values[i] > max) {
            values[i] = max;
          }

        }

      }

      // add a class for the CSS
      slider.element
        .addClass("ui-slider-float")
        .find(".ui-slider-tip, .ui-slider-tip-label")
        .remove();



      function destroy() {

        slider.element
          .off(".sliderFloat")
          .removeClass("ui-slider-float")
          .find(".ui-slider-tip, .ui-slider-tip-label")
          .remove();

      }


      function getPipLabels(values) {

        // when checking the array we need to divide
        // by the step option, so we store those values here.

        var vals = [],
          steppedVals = $.map(values, function(v) {
            return Math.ceil((v - min) / slider.options.step);
          });

        // now we just get the values we need to return
        // by looping through the values array and assigning the
        // label if it exists.

        if ($.type(options.labels) === "array") {

          for (i = 0; i < values.length; i++) {

            vals[i] = options.labels[steppedVals[i]] || values[i];

          }

        } else if ($.type(options.labels) === "object") {

          for (i = 0; i < values.length; i++) {

            if (values[i] === min) {

              vals[i] = options.labels.first || min;

            } else if (values[i] === max) {

              vals[i] = options.labels.last || max;

            } else if ($.type(options.labels.rest) === "array") {

              vals[i] = options.labels.rest[steppedVals[i] - 1] || values[i];

            } else {

              vals[i] = values[i];

            }

          }

        } else {

          for (i = 0; i < values.length; i++) {

            vals[i] = values[i];

          }

        }

        return vals;

      }

      // apply handle tip if settings allows.
      if (options.handle) {

        // we need to set the human-readable label to either the
        // corresponding element in the array, or the appropriate
        // item in the object... or an empty string.

        tipValues = (slider.values() && slider.values().length) ?
          getPipLabels(values) :
          getPipLabels([value]);

        for (i = 0; i < tipValues.length; i++) {

          $handles
            .eq(i)
            .append($("<span class=\"ui-slider-tip\">" + options.formatLabel(tipValues[i]) + "</span>"));

        }

      }

      if (options.pips) {

        // if this slider also has pip-labels, we make those into tips, too.
        slider.element.find(".ui-slider-label").each(function(k, v) {

          var $this = $(v),
            val = [$this.data("value")],
            label,
            $tip;


          label = options.formatLabel(getPipLabels(val)[0]);

          // create a tip element
          $tip =
            $("<span class=\"ui-slider-tip-label\">" + label + "</span>")
            .insertAfter($this);

        });

      }

      // check that the event option is actually valid against our
      // own list of the slider's events.
      if (options.event !== "slide" &&
        options.event !== "slidechange" &&
        options.event !== "slide slidechange" &&
        options.event !== "slidechange slide") {

        options.event = "slidechange slide";

      }

      // when slider changes, update handle tip label.
      slider.element
        .off(".sliderFloat")
        .on(options.event + ".sliderFloat", function(e, ui) {

          var uiValue = ($.type(ui.value) === "array") ? ui.value : [ui.value],
            val = options.formatLabel(getPipLabels(uiValue)[0]);

          $(ui.handle)
            .find(".ui-slider-tip")
            .html(val);

        });

    }

  };

  $.extend(true, $.ui.slider.prototype, extensionMethods);

})(jQuery);


$(function() {
  $(".slider")
    .slider({
      max: 12,
      change: function(event, ui) {
        alert(ui.value);
      }
    })
    .slider("pips", {
      rest: "label"
    });
});
#sliderScaleDiv {
  display: table;
  width: 100%;
}

#halo {
  position: relative;
  z-index: 20;
  vertical-align: top;
  display: inline-block;
  width: 75px;
  display: table-cell;
}

.fluid {
  display: table-cell;
}

.slider {
  line-height: 1.2em;
  margin: 25px 10px;
}

#skull {
  position: relative;
  z-index: 20;
  vertical-align: top;
  display: inline-block;
  width: 75px;
  display: table-cell;
}