jQueryUI.timespinner
Уважаемые коллеги!
Хочется в проекте использовать jQueryUI.spinner для увеличения/уменьшения времени, по аналогии с http://jqueryui.com/spinner/#time только, естественно немецкий формат, мне не нужен, хотя он и совпадает с тем что нужно получить. Подозреваю, что он окажет влияние и на другие виджеты jQueryUI, т.к. используется библиотека Globalize, что предполагает некие глобальные настройки. Естественно, хочется "содрать" код timespinner'а и найти отечественный аналог файла http://jqueryui.com/resources/demos/...lture.de-DE.js который используется в примере. Стандартный ход мыслей: скачать библиотеку, установить русский globalize.culture... Но его нет в самой библиотеке! Хм.. Решил пойти другим путём. Нафига для двух циферок с ведущими нулями в спиннере нужно грузить ещё кучу библиотек.. Может обойтись себе простой заменой _parse и format. Как следует из названий _parse -должна текстовую версию парсить в некое внутреннее представление, например как в примере в ms (в моём - минуты), а format - отображать в красивом виде. Но что-то у меня не катит:
/** Вставка нулей перед числом например, 7 вывести как 007 (number=7, digits=3)
* @param Number number исходное число
* @param Number digits сколько символов надо задействовать
* @return String строка с ведущими нулями (если требуются)
**/
function numberZeroFill(number, digits){
if( (number = number + "").length < digits ) {
return new Array(++digits - number.length).join("0") + number;
} else {
return number;
}
};
$.widget( "ui.timespinner", $.ui.spinner, {
options: {
// минуты
step: 1,
// hours
page: 60
},
_parse: function( value ) {
var f=function(value){
if ( typeof value === "string" ) {
if ( Number( value ) == value ) {
return Number( value );//число минут
}
var t, re=/([0-9]{1,2}):([0-9]{1,2})/;
var a=value.match(re);//"2:03" => ["2:03", "2", "03"]
return (isNaN(t=parseInt(a[1],10))?t*60:0)+isNaN(t=parseInt(a[2],10))?t:0;
}
return value;
};
console.log('parse: '+JSON.stringify(value)+" -> "+JSON.stringify(f(value)));
return f(value);
},
_format: function( value ) {
var f=function(value){
if ( Number( value ) == value ) {
var h=Math.floor(value/60), m = value%60;
return numberZeroFill(h,2)+":"+numberZeroFill(m,2);
} else return value;
};
console.log('format:'+JSON.stringify(value)+" -> "+JSON.stringify(f(value)));
return f(value);
}
});
$('#s').timespinner({value:'00:00', min:0,max:24*60-1});
При работе спинера выдача в консоль: Код:
parse: "" -> 0В примере из http://jqueryui.com/spinner/#time на 28 строке что-то для меня новенькое: return +Globalize.parseDate( value );и у меня ступор:blink: !!! нафига "+"??? Вначале даже подумал - опечатка. Нет, без него не работает (воспроизвёл пример точно). С ним работает.... В общем, если кто-нибудь решал подобную задачу, или просто не поленится объяснить мне как завести этот спинер без кучи устаревших немецких библиотек - буду весьма признателен. Ну а как бонус, если кто объяснит смысл этой странной конструкции с плюсиком на 28 строке - я буду вообще счастлив. |
Цитата:
(function (a) {
window.alert = function () {
a(Array.prototype.slice.call(arguments).join('\n'))
}
}(window.alert))
var a = '5';
alert(a === 5, +a === 5);
|
andrewinc,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Spinner - Time</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/overcast/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
function two(a) {
return (9 < a ? "" : "0") + a
}
$.widget("ui.timespinner", $.ui.spinner, {
options: {
step: 6E4,
page: 60
},
_parse: function(a) {
if ("string" === typeof a) {
if (Number(a) == a) return Number(a);
a = a.match(/\d+/g);
(!a || 2 > a.length) && (a = [0, 0]);
a[0] *= 36E5;
a[1] *= 6E4;
return a[0] + a[1]
}
return a
},
_format: function(a) {
a /= 6E4;
var hours = a / 60 | 0;
a %= 60;
return two(hours) + ":" + two(a)
}
});
$(function() {
$("#spinner").timespinner({
min: 0,
max: 864E5
});
$("#spinner").timespinner("value", 342E4)
});
</script>
</head>
<body>
<p>
<label for="spinner">Time spinner:</label>
<input id="spinner" name="spinner" value="00:00 PM">
</p>
</body>
</html>
|
Благодарю, Уважаемых коллег рони и Poznakomlus, за очень оперативный и достаточно информативный ответ. Разобрался с обеими вопросами. Не ожидал получить работающий код. За это отдельное спасибо! Понаставил Вам плюсов к карме.
|
| Часовой пояс GMT +3, время: 06:00. |