Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.06.2015, 02:23
Интересующийся
Отправить личное сообщение для andrewinc Посмотреть профиль Найти все сообщения от andrewinc
 
Регистрация: 19.09.2012
Сообщений: 10

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
parse: "" -> 0
parse: "" -> 0
parse: 1 -> 1
format:1 -> "00:01"
parse: "00:01" -> 0
parse: "00:01" -> 0
parse: 1 -> 1
format:1 -> "00:01"
parse: "00:01" -> 0
parse: "00:01" -> 0
как видно - дальше одной минуты дело не идёт.

В примере из http://jqueryui.com/spinner/#time на 28 строке что-то для меня новенькое:
return +Globalize.parseDate( value );
и у меня ступор !!! нафига "+"??? Вначале даже подумал - опечатка. Нет, без него не работает (воспроизвёл пример точно). С ним работает....

В общем, если кто-нибудь решал подобную задачу, или просто не поленится объяснить мне как завести этот спинер без кучи устаревших немецких библиотек - буду весьма признателен. Ну а как бонус, если кто объяснит смысл этой странной конструкции с плюсиком на 28 строке - я буду вообще счастлив.
Ответить с цитированием
  #2 (permalink)  
Старый 28.06.2015, 03:04
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

Сообщение от andrewinc
нафига "+"???
(function (a) {
        window.alert = function () {
                a(Array.prototype.slice.call(arguments).join('\n'))
        }
}(window.alert))
var a = '5';
alert(a === 5, +a === 5);

Последний раз редактировалось Vlasenko Fedor, 28.06.2015 в 03:06.
Ответить с цитированием
  #3 (permalink)  
Старый 28.06.2015, 04:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

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>

Последний раз редактировалось рони, 28.06.2015 в 04:22.
Ответить с цитированием
  #4 (permalink)  
Старый 28.06.2015, 18:58
Интересующийся
Отправить личное сообщение для andrewinc Посмотреть профиль Найти все сообщения от andrewinc
 
Регистрация: 19.09.2012
Сообщений: 10

Благодарю, Уважаемых коллег рони и Poznakomlus, за очень оперативный и достаточно информативный ответ. Разобрался с обеими вопросами. Не ожидал получить работающий код. За это отдельное спасибо! Понаставил Вам плюсов к карме.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск