Andrew Sumin, 1 сентября 2007.
На этой странице подключен файл jsx.js
Файл jsx.js обеспечивает:
require
;jsx.js загружается только если в ссылке на jsx.js есть параметр "autoinit:true". Файл Components.js позволяет находить и создавать компоненты из узлов DOM дерева. HTML код страницы c календарем:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<title>Календарь</title>
<script src="http://jsx.ru/scripts/b/1.1.0/jsx.js?autoinit=true"
onload="return {autoinit:true, base:'jquery'}"></script>
</head>
<body>
<div class="jsx-component" onclick="return {types:['{jsxComponents}.Calendar']}"></div>
</body>
</html>
Результат:
Или обертка над этим календарем, позволяющая его свернуть в одну строку а результат выбора хранить в 3-х полях <input>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<title>Календарь</title>
<script src="http://jsx.ru/scripts/b/1.1.0/jsx.js?autoinit=true"
onload="return {autoinit:true, base:'jquery'}"></script>
</head>
<body>
<span class="jsx-component" onclick="return {types:['{jsxComponents}.Calendar.Inputs']}">
<span class="jsxComponents-Calendar-Inputs-Text"> </span>
<span class="g-hidden jsxComponents-Calendar-Inputs">
<input class="jsxComponents-Calendar-Inputs-Date"/>
<input class="jsxComponents-Calendar-Inputs-Month"/>
<input class="jsxComponents-Calendar-Inputs-Year"/>
</span>
</span>
</body>
</html>
Нужно кликнуть на дату:
В результате на странице окажется намного больше чем 2 скрипта.
Если нужна оптимизация по загрузке, то эти скрипты можно соединить в один файл (порядок добавления в общий файл - обратный приведенному) и сжать.