Люди будут использовать различных редакторов на том же коде. Эти редакторы представят вкладку на экране по-другому. Если Вы будете работать над редактором, который представляет вкладку как 4 пробелов, если Вы расположите с отступом первую строку "\t "
и второе "\t\t"
, они будут похожи, они находятся на том же уровне отступа: 8 пробелов.
интерпретатор Python не знает Вашего редактора, и он должен интерпретировать вкладку как некоторый объем добавления отступа. На самом деле это интерпретирует вкладку как 8 пробелов, таким образом, это будет видеть различные уровни отступа, чем, что Вы предназначили: 12 пробелов для первой строки, 16 пробелов для второго. Вы поджарены.
noUiSlider предлагает эту функцию. Вы можете использовать его, установив опцию behaviour
. Он допускает как фиксированные, так и изменяемые пользователем диапазоны. Нет никаких зависимостей от jQueryUI, и если вы предпочитаете Zepto, а не jQuery: это тоже работает.
Раскрытие: Я автор плагина.
Вы также можете попробовать jQRangeSlider , взгляните на демонстрацию .
Расширение виджета jQuery UI Slider для функции rangeDrag
. Эта функция позволяет пользователю перетаскивать весь диапазон сразу, вместо того, чтобы перетаскивать ручки для перемещения диапазона.
https://gist.github.com/3758297
(function( $, undefined ) {
$.widget("ui.dragslider", $.ui.slider, {
options: $.extend({},$.ui.slider.prototype.options,{rangeDrag:false}),
_create: function() {
$.ui.slider.prototype._create.apply(this,arguments);
this._rangeCapture = false;
},
_mouseCapture: function( event ) {
var o = this.options;
if ( o.disabled ) return false;
if(event.target == this.range.get(0) && o.rangeDrag == true && o.range == true) {
this._rangeCapture = true;
this._rangeStart = null;
}
else {
this._rangeCapture = false;
}
$.ui.slider.prototype._mouseCapture.apply(this,arguments);
if(this._rangeCapture == true) {
this.handles.removeClass("ui-state-active").blur();
}
return true;
},
_mouseStop: function( event ) {
this._rangeStart = null;
return $.ui.slider.prototype._mouseStop.apply(this,arguments);
},
_slide: function( event, index, newVal ) {
if(!this._rangeCapture) {
return $.ui.slider.prototype._slide.apply(this,arguments);
}
if(this._rangeStart == null) {
this._rangeStart = newVal;
}
var oldValLeft = this.options.values[0],
oldValRight = this.options.values[1],
slideDist = newVal - this._rangeStart,
newValueLeft = oldValLeft + slideDist,
newValueRight = oldValRight + slideDist,
allowed;
if ( this.options.values && this.options.values.length ) {
if(newValueRight > this._valueMax() && slideDist > 0) {
slideDist -= (newValueRight-this._valueMax());
newValueLeft = oldValLeft + slideDist;
newValueRight = oldValRight + slideDist;
}
if(newValueLeft < this._valueMin()) {
slideDist += (this._valueMin()-newValueLeft);
newValueLeft = oldValLeft + slideDist;
newValueRight = oldValRight + slideDist;
}
if ( slideDist != 0 ) {
newValues = this.values();
newValues[ 0 ] = newValueLeft;
newValues[ 1 ] = newValueRight;
// A slide can be canceled by returning false from the slide callback
allowed = this._trigger( "slide", event, {
handle: this.handles[ index ],
value: slideDist,
values: newValues
} );
if ( allowed !== false ) {
this.values( 0, newValueLeft, true );
this.values( 1, newValueRight, true );
}
this._rangeStart = newVal;
}
}
},
/*
//only for testing purpose
value: function(input) {
console.log("this is working!");
$.ui.slider.prototype.value.apply(this,arguments);
}
*/
});
})(jQuery);
http: // jsfiddle.net/omnosis/Swd9S/
HTML
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.slider.custom.js"></script>
...
<div id="slider"></div>
JavaScript
$(function(){
// Slider
$('#slider').dragslider({
animate: true, // Works with animation.
range: true, // Must have a range to drag.
rangeDrag: true, // Enable range dragging.
values: [30, 70]
});
});
Вы можете попробовать добавить триггеры drag + drop к элементу $('.ui-slider-range')
ИЛИ
добавить свое собственное событие к элементу $('.ui-slider-range')
, который просто вызывает события на $('.ui-slider-handle')
]
Вы можете попробовать воспользоваться jQuery UI Slider
. Ссылка выше демонстрирует функцию выбора «диапазона», которая вам нужна, но есть много других способы его использования.