Сегодня я расскажу о том, как подружить 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. Надеюсь, кому-то это окажется полезным и он не потратит много времени, на ступив на мои грабли (-:

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

• Ruby 2.0
• Расчудесный gem rails_best_practices
• Rails, state_machine, Rspec, capybara, factory_girl, spork и другое. Часть III.
• Rails, state_machine, Rspec, capybara, factory_girl, spork и другое. Часть II.
• Rails, state_machine, Rspec, capybara, factory_girl, spork и другое. Часть I.
• Обновления gem-ов в системе
• annotate в rails 3.1
• Rails 3.1 в Ubuntu 11.04
• Установка Ckeditor в rails 3
• gem Russian в rails 3