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, время: 23:02. |