jQuery Tools: Tabs и Dateinput

Сегодня я расскажу о том, как подружить jQuery Tools Tabs и Dateinput. Для тех, кто вообще не знает, что такое jQuery Tools, советую посетить их сайт. Если в двух словах, то это достаточно мощная, но в то же время «лёгкая» альтернатива jQuery UI. С возможностями, документацией и примерами можно ознакомиться на сайте разработчиков, я повторяться не буду.

Начну я с того, что локализировал Dateinput. На сайте приводится пример, как это делается, поэтому я просто сделал всё то же самое, только для русского языка, пользуйтесь:

$.tools.dateinput.localize(«ru», {
months:      ‘Январь,Февраль,Март,Апрель,Май,Июнь,Июль,Август,Сентябрь,Октябрь,Ноябрь,Декабрь’,
shortMonths: ‘Янв,Фев,Мар,Апр,Май,Июн,Июл,Авг,Сен,Окт,Ноя,Дек’,
days:        ‘воскресенье,понедельник,вторник,среда,четверг,пятница,суббота’,
shortDays:   ‘Вс,Пн,Вт,Ср,Чт,Пт,Сб’
});

Как видите, ничего сложного. Как вы сами понимаете, это нужно писать в Вашем файле js.

Процесс создания вкладок и, собственно, полей ввода дат достаточно неплохо и доступно описан на самом сайте создателей, поэтому начну сразу с трудностей. Незадача заключается в том, что при размещении Dateinput-ов на нескольких вкладках, отображаться календарик будет нормально и правильно только на той вкладке, где он впервые вызывается, на всех остальных вкладках Вы его не увидите. Прикольно, да? (-: А происходит это потому, что тело календарика создаётся в теле той вкладки, где он первый раз раз инициализируется. Это легко увидеть при помощи Firebug, стоит только поискать <div id="calroot">.

Мой способ не претендует на какое-то супер-пупер решение и, возможно, он достаточно корявенький, но зато работает (-:

Первое, что я сделал, — это вынес тело календарика (звучит-то как! (-: ) за пределы вкладок:

$(‘#calroot’).insertAfter(‘.contenttab:last’);

Думаю, знакомым с jQuery, ничего непонятного в этой команде не будет: просто добавляем тело календаря после последнее вкладки. Теперь календарики будут видны на всех вкладках, но на некоторых в совсем в загадочных местах (-: А ведь нам хочется, чтобы в строго определённым месте, рядышком с требуемым полем ввода. Вот тут и заключается некоторая корявость… Каждый календарь придётся объявлять отдельно… если календариков немного, то это не проблема. Хотя мне вот сложно представить, для чего на странице, пусть даже и во вкладках, может понадобится 10 календариков…

Так вот, ближе к делу. Определяем каждый календарик следующим способом:

$(«#date»).dateinput({
  format: ‘dd.mm.yyyy’,
  firstDay: 1,
  lang:   «ru»,
  onShow: function() {
        position = $(«#date»).offset();
        $(‘#calroot’).css(‘top’, position.top+20).css(‘left’, position.left — 30);
  }
});

Ничего сложного тут нет, основная мысль заключается в том, чтобы принудительно задать координаты для отображения календаря, исходя из координат родительского поля ввода. Это и делается в функции onShow. Надеюсь, кому-то это окажется полезным и он не потратит много времени, на ступив на мои грабли (-:

Недавние записи

Один комментарий to “jQuery Tools: Tabs и Dateinput”

Николай Says:
Ноябрь 29th, 2012 at 09:28
Спасибо!
В случае, если календариков несколько, результаты $(«#date»).offset() будут непредсказуемыми. Предлагаю сделать обработчик onShow более универсальным:
onShow: function(event){
$(«#calroot»).css(‘top’,$(‘#’+event.srcElement.id).position().top + $(‘#’+event.srcElement.id).outerHeight(true));
}