添加填充到jQuery UI滑塊

Question

有沒有簡單的方法來添加填充到jQuery UI滑塊的滑塊？我希望能夠使滑塊手柄不會到達酒吧的末端。因此，如果這是常規的左端：

no padding 
\/ 
[]------------------ 

我想這對左填充（右）結束：

：

padding of 10px for instance 
\/ 
--[]---------------- 

我在CSS文件中嘗試這個

.ui-slider-horizontal { height: .8em; padding: 0 10px; }

但似乎jQuery UI Slider使用完整的（outerWidth()）寬度來確定手柄的滑動範圍，而不是沒有pa的寬度dding。我也嘗試黑客代碼，用width()替換outerWidth()，但它沒有做任何事情。

我明確不想訴諸設置最小值和最大值的破解。值應該始終按預期工作。

有什麼建議嗎？

編輯：

繼pkauko的評論;我使用滑塊作爲具有上面三個標籤的元素：

not      very 
important important important 
----[]-----------[]----------[]---- 

上圖表示在我想要手柄出現的位置，爲中心的標籤下方。但酒吧視覺上需要延伸到邊緣。

Answer 1

好吧，我經常想要我自己，但從來沒有動機坐下來等等。 既然你現在問我，我沒有坐下來，並且按照你的要求，黑客jQuery UI的滑塊來添加填充選項。

注：我只添加它爲單個句柄水平滑塊。其他情況並不複雜。我只是沒有動機去做打字和隨後的測試來覆蓋現在可能不需要的情況。

包含來自jQuery UI的原始滑塊後包含此代碼。該擴展會覆蓋一些方法，並將選項'paddingMin'和'paddingMax'添加到Slider小部件中（值必須是數字，並且會被解釋爲像素;這也可以很容易地擴展爲接受其他單位，但顯然將意味着對當前未請求的案件進行更多的打字/測試）。

簡單的使用例子：

$('#slider').slider({ paddingMin: 50, paddingMax: 100 }); 

擴展破解代碼（如提供的，不要告我）：

(
    function($, undefined) 
    { 
     $.ui.slider.prototype.options = 
      $.extend(
       {}, 
       $.ui.slider.prototype.options, 
       { 
        paddingMin: 0, 
        paddingMax: 0 
       } 
      ); 

     $.ui.slider.prototype._refreshValue = 
      function() { 
       var 
        oRange = this.options.range, 
        o = this.options, 
        self = this, 
        animate = (!this._animateOff) ? o.animate : false, 
        valPercent, 
        _set = {}, 
        elementWidth, 
        elementHeight, 
        paddingMinPercent, 
        paddingMaxPercent, 
        paddedBarPercent, 
        lastValPercent, 
        value, 
        valueMin, 
        valueMax; 

       if (self.orientation === "horizontal") 
       { 
        elementWidth = this.element.outerWidth(); 
        paddingMinPercent = o.paddingMin * 100/elementWidth; 
        paddedBarPercent = (elementWidth - (o.paddingMin + o.paddingMax)) * 100/elementWidth; 
       } 
       else 
       { 
        elementHeight = this.element.outerHeight(); 
        paddingMinPercent = o.paddingMin * 100/elementHeight; 
        paddedBarPercent = (elementHeight - (o.paddingMin + o.paddingMax)) * 100/elementHeight; 
       } 

       if (this.options.values && this.options.values.length) { 
        this.handles.each(function(i, j) { 
         valPercent = 
          ((self.values(i) - self._valueMin())/(self._valueMax() - self._valueMin()) * 100) 
          * paddedBarPercent/100 + paddingMinPercent; 
         _set[ self.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%"; 
         $(this).stop(1, 1)[ animate ? "animate" : "css" ](_set, o.animate); 
         if (self.options.range === true) { 
          if (self.orientation === "horizontal") { 
           if (i === 0) { 
            self.range.stop(1, 1)[ animate ? "animate" : "css" ]({ left: valPercent + "%" }, o.animate); 
           } 
           if (i === 1) { 
            self.range[ animate ? "animate" : "css" ]({ width: (valPercent - lastValPercent) + "%" }, { queue: false, duration: o.animate }); 
           } 
          } else { 
           if (i === 0) { 
            self.range.stop(1, 1)[ animate ? "animate" : "css" ]({ bottom: (valPercent) + "%" }, o.animate); 
           } 
           if (i === 1) { 
            self.range[ animate ? "animate" : "css" ]({ height: (valPercent - lastValPercent) + "%" }, { queue: false, duration: o.animate }); 
           } 
          } 
         } 
         lastValPercent = valPercent; 
        }); 
       } else { 
        value = this.value(); 
        valueMin = this._valueMin(); 
        valueMax = this._valueMax(); 
        valPercent = 
         ((valueMax !== valueMin) 
         ? (value - valueMin)/(valueMax - valueMin) * 100 
         : 0) 
         * paddedBarPercent/100 + paddingMinPercent; 

        _set[ self.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%"; 

        this.handle.stop(1, 1)[ animate ? "animate" : "css" ](_set, o.animate); 

        if (oRange === "min" && this.orientation === "horizontal") { 
         this.range.stop(1, 1)[ animate ? "animate" : "css" ]({ width: valPercent + "%" }, o.animate); 
        } 
        if (oRange === "max" && this.orientation === "horizontal") { 
         this.range[ animate ? "animate" : "css" ]({ width: (100 - valPercent) + "%" }, { queue: false, duration: o.animate }); 
        } 
        if (oRange === "min" && this.orientation === "vertical") { 
         this.range.stop(1, 1)[ animate ? "animate" : "css" ]({ height: valPercent + "%" }, o.animate); 
        } 
        if (oRange === "max" && this.orientation === "vertical") { 
         this.range[ animate ? "animate" : "css" ]({ height: (100 - valPercent) + "%" }, { queue: false, duration: o.animate }); 
        } 
       } 
      }; 

     $.ui.slider.prototype._normValueFromMouse = 
      function(position) { 
       var 
        o = this.options, 
        pixelTotal, 
        pixelMouse, 
        percentMouse, 
        valueTotal, 
        valueMouse; 

       if (this.orientation === "horizontal") { 
        pixelTotal = this.elementSize.width - (o.paddingMin + o.paddingMax); 
        pixelMouse = position.x - this.elementOffset.left - o.paddingMin - (this._clickOffset ? this._clickOffset.left : 0); 
       } else { 
        pixelTotal = this.elementSize.height - (o.paddingMin + o.paddingMax); 
        pixelMouse = position.y - this.elementOffset.top - o.paddingMin - (this._clickOffset ? this._clickOffset.top : 0); 
       } 

       percentMouse = (pixelMouse/pixelTotal); 
       if (percentMouse > 1) { 
        percentMouse = 1; 
       } 
       if (percentMouse < 0) { 
        percentMouse = 0; 
       } 
       if (this.orientation === "vertical") { 
        percentMouse = 1 - percentMouse; 
       } 

       valueTotal = this._valueMax() - this._valueMin(); 
       valueMouse = this._valueMin() + percentMouse * valueTotal; 

       return this._trimAlignValue(valueMouse); 
      }; 
    } 
)(jQuery); 

Answer 2

將「快速增加」加上「不兼容」（對快照值不均勻）最小值和最大值會產生所需的效果嗎？我知道這很可能會導致應用程序端值轉換，因爲這可能無法使用現在使用的值獲得，但如果它有效，這裏是一個「黑客和斜槓」解決方案。

我的建議是將最小值設置爲750.將捕捉值設置爲1200，將最大值設置爲4050.這樣，最低捕捉高於最小值450，並且滑塊永遠不會到達最左側邊緣。相同的最大值，即3 x 1200 + 450 = 4050.這裏使用的值是任意的，例如只。

還沒有測試過這個，不知道它是否工作，我知道這不是你正在尋找的，但只是一個想法，當我檢查了jQuery UI滑塊如何在jqueryui工作的例子.COM。

編輯：不能放過這個，現在我知道這樣做的方式，它阻止滑塊到達幻燈片的末端。您只需相應地設置初始值，以防止頁面加載時滑塊位於一端或另一端。