timespinner highlight

[devnull]

I can't seem to get the timespinner highlight working:

Code:

$.extend($.fn.timespinner.defaults,{highlight:1});

Code:

<input class="easyui-timespinner" value="12:00" data-options="highlight:1">

what am I doing wrong ??

[stworthy]

When timespinner get focus, it will highlight the specified part of time, 0 = hours, 1 = minutes, …

[devnull]

Thanks, yes, but the problem is the date or time is not highlighted unless the user first clicks into the element so the user does not know which value has focus when the page is displayed.

The blue highlight does not appear around the hours or minutes when the control is loaded and the user does not know which value they are increasing / decreasing.

Can this be changed so that the hour or minutes is always highlighted when the page is loaded WITHOUT the user first having to click to focus the element ?

 

[stworthy]

The timespinner is a extended textbox, its highlight effect depends on the selection of text. So the highlight effect will lose once the textbox  gets blur. To highlight the textbox, you can trigger the 'click' event on the text box.

Code:

$('#tt').trigger('click');

[devnull]

Hi, thanks I understand this from a technical point of view, but from a user experience the present method is not so practical.

Let's say you have a page with 5 numberspinners on it, each one has a different highlight option set.

In order for the user to accurately increase or decrease all 5 number spinners they would need to make 10 mouse clicks, the first one to focus, and the second to increase or decrease the value.

If the default highlight for each timespinner was displayed when the page loads, then the user would only need to make 5 mouse clicks instead of 10 clicks.

[stworthy]

Although the highlight does not display when a timespinner gets blur, but it remembers what part would be increased or decreased. You just need only one click on the spinner button to increase or decrease the value.

Please refer to this example http://jsfiddle.net/pDL7s/. When click on the spinner button, the minute value increases step by step because the 'highlight' property of timespinner is set to '1'.

[devnull]

thanks, but the problem is the user does not know whether the hours or the minutes will increase or decrease when they select the up or down buttons.

[stworthy]

It is impossible to highlight the text on a un-focus textbox. An alternative solution to achieve your functionality is to use a <div> displaying the time information instead of using <input> element. Here is the extended method of timespinner plugin.

Code:

$.extend($.fn.timespinner.methods,{
	textbox: function(jq){
		return jq;
	},
	highlightValue: function(jq){
		return jq.each(function(){
			var target = this;
			var state = $.data(target, 'timespinner');
			var opts = state.options;
			var t = $(target);
			var tb = t.timespinner('textbox');
			if (!state.label){
				var span = t.timespinner('textbox').parent().css('position','relative');
				state.label = $('<div></div>').appendTo(span);
				state.label.css({
					position:'absolute',
					left:0,
					top:0,
					padding:'0 2px',
					background:'#fff'
				});
				state.label.bind('click', function(e){
					var part = $(e.target).closest('span');
					if (part.length){
						var index = parseInt(part.attr('t-index'));
						opts.highlight = index;
						highlight(target, index);
					}
					tb.focus();
					state.label.hide();
				});
				tb.bind('blur', function(){
					state.label.show();
					setColor();
				});
				var sopts = $(target).spinner('options');
				var onChange = sopts.onChange;
				sopts.onChange = function(newValue, oldValue){
					setColor();
					onChange.call(this, newValue, oldValue);
				}
			}
			state.label._outerWidth(tb._outerWidth())._outerHeight(tb._outerHeight());
			state.label.css('line-height', tb._outerHeight()+'px');
			setColor();

			function setColor(){
				var index = $(target).timespinner('options').highlight;
				var s = '';
				$.map(tb.val().split(':'), function(t,i){
					s += ':<span t-index="' + i + '"';
					if (i == index){
						s += ' style="background:blue;color:#fff"';
					}
					s += '>' + t + '</span>';
				});
				state.label.html(s.substr(1));
			}
			function setSelectionRange(target, start, end){
				if (target.selectionStart){
					target.setSelectionRange(start, end);
				} else if (target.createTextRange){
					var range = target.createTextRange();
					range.collapse();
					range.moveEnd('character', end);
					range.moveStart('character', start);
					range.select();
				}
			}

			function highlight(target, index){
				var selections = [[0,2],[3,5],[6,8]];
				var opts = $.data(target, 'timespinner').options;
				if (index != undefined){
					opts.highlight = index;
				}
				var range = selections[opts.highlight];
				if (range){
					var tb = $(target).timespinner('textbox');
					setSelectionRange(tb[0], range[0], range[1]);
					tb.focus();
				}
			}
		});
	}
});

Call 'highlightValue' method to highlight the time value.

Code:

$('#tt').timespinner('highlightValue');