ठीक है, मैं अक्सर खुद को चाहता था, लेकिन वास्तव में प्रेरणा वास्तव में बैठने के लिए नहीं था और इसलिए इसके बारे में कुछ भी। चूंकि आपने अभी पूछा है, मैंने अनुरोध किया है कि मैंने पैडिंग विकल्पों को जोड़ने के लिए jQuery UI के स्लाइडर को दबा दिया है और हैक किया है।
नोट: मैंने इसे केवल एक ही हैंडल के साथ क्षैतिज स्लाइडर्स के लिए जोड़ा है। अन्य मामले अब और जटिल नहीं हैं। मेरे पास टाइपिंग करने के लिए प्रेरणा नहीं थी और बाद में परीक्षण उन मामलों को कवर करने के लिए किया गया था जिनकी शायद आवश्यकता नहीं थी।
jQuery UI से मूल स्लाइडर को शामिल करने के बाद इस कोड को शामिल करें। एक्सटेंशन कुछ तरीकों को ओवरराइट करता है और स्लाइडर विजेट में 'पैडिंगमिन' और 'पैडिंगमैक्स' विकल्प जोड़ता है (मानों को संख्यात्मक होना चाहिए और उन्हें पिक्सल के रूप में व्याख्या किया जाएगा; यह भी आसानी से अन्य इकाइयों को लेने के लिए बढ़ाया जा सकता है, लेकिन फिर से वर्तमान में अनिश्चित मामलों के लिए अधिक टाइपिंग/परीक्षण का संकेत देगा)।
सरल उदाहरण उपयोग:
$('#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);
मैं सिर्फ तुम क्यों ऐसा लगता है कि काम करने के लिए चाहते हो जाएगा करने के लिए उत्सुक हूँ इस? जब तक विचार यह न हो कि आप स्लाइडर का उपयोग करके न्यूनतम और अधिकतम मान सेट नहीं कर सकते हैं न कि केवल उपस्थिति। अन्यथा यह ऐसा लगता है कि स्लाइडर ठीक से काम नहीं कर रहा है अगर यह स्लाइड के बहुत अंत में नहीं है जब न्यूनतम या अधिकतम मान सेट होता है। – pkauko
@pkauko: मैंने अपने प्रश्न में जो जोड़ा है उसे देखें। –
आह ठीक है, अब मैं देख सकता हूं कि आप इसे वर्णित की तरह काम क्यों करना चाहते हैं। बहुत बुरा मैं वांछित व्यवहार को प्राप्त करने में आपकी मदद नहीं कर सकता। हालांकि मुझे एक विचार हो सकता है और मैं जल्द ही जवाब दूंगा। – pkauko