Если вкратце, то jQuery – это фреймворк, основанный на джава-скрипт, который позволяет работать с веб-страницей через ее DOM-модель. Это позволяет использовать на клиентской стороне функционал типа AJAX, т.е. менять содержимое страницы без ее перезагрузки. Естественно, что мелочи типа раскрашивания элементов управления, валидации ввода, периодической сработки какого-то процесса по таймеру – все это делается элементарно.
Рассмотрим на примере реальной задачи: требовалось обеспечить проверку ввода в поля формы поиска «на лету», без отсылки формы на сервер. Валидация задается маской, сама маска задается в аттрибутах элемента апплета.
Скачиваем jquery.js c оф-сайта: http://jquery.com/download/ . Production версия отличается меньшим размером и абсолютной нечитаемостью, на прод-ы надо ставить именно ее. Файл кладется в корень сибеля PUBLIC\RUS\XXXXX\SCRIPTS, где XXXXX соответствует версии патча, который последним накатывали на Сибель. Это можно сделать как для всего приложения (в одном месте), или для конкретных веб-темплейтов.
- идем в Applications, находим свое, находим в нем свойство Container Web Page; - идем в Web Pages, находим нужную, смотрим в свойство Web Template; - идем в Web Templates и находим файл, в котором физически будет лежать общий для всего приложения темплейт.
Находим этот файл в каталоге WEBTEMPL, открываем и видим что-то типа:
<!-- Template Start: dCCForm1ColScreenHomepage.swt --> <tr valign="top"> <td> <table width="*" border="0" cellpadding="0" cellspacing="4"> …
В начале темплейта подключаем jQuery:
<HEAD> <script type="text/javascript" src="23016/SCRIPTS/jquery.js"></script> </HEAD>
Собственно, все – теперь можно внутри темплейта работать с селекторами jQuery.
Сибель генерит код для форм-апплетов на основании SWT-темплейта. При этом теги типа swe:control на конечной html-странице будут преобразовываться в <span>-ы, <input>-ы, или вообще какие-нибудь <select>-ы с вагоном <options>-ов. Главный фокус в том, чтобы в джава-скрипте получить ссылку на конечный элемент, которого в самом темплейте еще нет, и который соответствует нужному полю в БК. Можно «подсмотреть» исходный код сгенерированной страницы и увидеть, что большинству элементов интерфейса Сибель назначит свой id. В принципе, мы можем сделать какой-нибудь getElementById (‘s_6_15_0’) и дальше работать с этим элементом. Но при изменении апплета, переносе и т.д. – никто не гарантирует, что этот id не изменится. Кроме того, есть ситуации, когда идентификатора в принципе нет, например, для кнопки, активность которой регулируется серверным скриптом, пока кнопка неактивна – Сибедь сгенерит что-то типа <span class=’miniButtonOff’>Find</span>. А когда кнопка включится, произойдет перезагрузка всей страницы и та же кнопка будет задаваться линком вида <a href=’’ onClick=’’>Find</a>, и будет сгенерирован соответствующий код для внутреннего метода – обработчика нажатия. На самом деле, существует возможность достучаться до полей через свойство Html Attributes, доступное для контролов апплета. Вернее, даже две возможности:
Ради чего все затевалось. Например, нам нужно для поля паспорт включать проверку по маске, когда пользователь нажал на чекбокс «Проверять паспорт». В Controls апплета в свойстве HTML Attributes назначаем идентификаторы для нужных элементов: id=’dtbCheckPassport’ для чекбокса, id=’dtbPassport’ для поля с паспортом. Пишем скрипт:
<script type="text/javascript"> $(document).ready(function() { $("#dtbCheckPassport").click(function() { if($('#dtbCheckPassport').attr("checked") == true) { $('#dtbPassport').mask($('#dtbPassport').attr("mask"),{placeholder:$('#dtbPassport').attr("mask_placeholder")}); } else { $('#dtbPassport').unmask(); } }); }); </script>
Здесь после того, как страница загружена в браузер, чекбоксу на форм-апплете назначается событие на OnClick. В этом событии мы проверяем, что чекбокс «включен», и если да – включаем маску для нужного поля, если нет – снимаем маску. При этом сама маска и символ, используемый в качестве плэйсхолдера тоже задаются в Сибеле, в свойстве HTML Attributes. При этом нам совершенно не важно, в каком виде Сибель сгенерит эти поля, какие им присвоит id-ники и т.д.
jQuery также позволяет работать с коллекциями объектов. Например, нескольким полям в HTML Attributes задан аттрибут group=’1’, а нескольким – group=’2’:
$("[group]").keyup(function(){ … });
- Всем полям ввода, у которых есть аттрибут «group», назначается обработчик на нажатие клавиши
var val = false; $(‘[group=”1”]’).each(function(i, obj) { val = val || ($.trim($(this).attr ("value")) != ""); });
- Переменная val будет равна true, если среди всех полей с аттрибутом group=’1’ найдется хотя бы одно не пустое.
Селекторы в jQuery работают аналогично XPath в XSL, т.е. можно свободно бегать по всей DOM структуре документа, выбирать все элементы, часть элементов, элементы с определенными значениями аттрибутов кроме тех, у которых первый дочерний элемент не пустой, ну и так далее. При этом полученной коллекции элементов можно назначать общие обработчики событий, производить с ними какие-то действия и т.д. При этом все, что мы запихаем в HTML Attributes будет доступно на уровне конечного html, т.е. там можно задавать не просто идентификаторы, а какую-то логику. На деве Дельты есть пример, когда в этих аттрибутах хранятся разные маски ввода для разных полей, например аттрибуты поля Фамилия выглядят так:
id='dtbLastName' mask='?U<..>U' mask_def_name='U' mask_def_value='[А-Яа-яЄєІіЇї --*]' mask_placeholder='' group='1'
Далее в вебтемплейте подключен класс MaskedInput и написан следующий обработчик:
<script type="text/javascript"> jQuery(function($) { $("[mask]").each(function(i, obj) { var dname = $(this).attr("mask_def_name"); var dvalue = $(this).attr("mask_def_value"); var pholder = $(this).attr("mask_placeholder"); if (dname != "") { $.mask.definitions[dname]=dvalue; } if (pholder != "") { $(this).mask($(this).attr("mask"),{placeholder:pholder}); } else { $(this).mask($(this).attr("mask")); } }); }); </script>
Здесь скрипт выбирает все элементы, у которых задан аттрибут mask, настраивает для каждой маски свой диапазон символов, свой плейсхолдер, и назначает нужному элементу (уже html-ному) его маску. Такая маска в отличие от Сибелевой работает полностью на клиентской части. В данном примере она позволяет вводить только символы украинского или русского алфавитов, пробел, тире или звездочку. При этом каждому полю ввода назначается своя маска, прописанная в Тулзах именно для этого поля.
— Igor Yurgelevichius 2015/01/14 15:03