Внимание!
В версии 2.0 библиотеки появилась возможность создавать SmartSelect-списки ещё проще.
Никакого XML, всего одна функция (JavaScript или PHP). Подробнее об этом в
конце этой статьи.
В версии 2.5 добавлена возможность создания списка для случая, когда страница, в которой он находится подгружается динамически. Описание
тут.
Скопируйте файл
/templates/example.xml в нужную вам папку и откройте в текстовом редакторе.
Вы увидите это:
<?xml version="1.0" encoding="utf-8"?>
<fwc:select id="ss_example" xmlns:fwc="http://alx.vingrad.ru/fwc">
<fwc:option>Zero</fwc:option>
<fwc:option value="1">One</fwc:option>
<fwc:option value="2">Two</fwc:option>
<fwc:option value="3">Three</fwc:option>
</fwc:select>
Это простейший код SmartSelect-списка. Вы можете посмотреть, как он выглядит в
примерах.
Как видите, он состоит всего из 3-х тегов:
обязательной для любого XML-файла конструкции
<?xml ... ?> (в ней вы лишь можете при неободимости задавать кодировку),
главного тега
fwc:select и тегов
fwc:option внутри него.
Тег
fwc:select может присутствовать в XML-документе лишь в единственном экземпляре.
В документе не должно содержаться никаких других элементов (кроме конструкции
<?xml ... ?>) вне данного тега.
Тег имеет два обязательных атрибута:
id и
xmlns:fwc.
Первый указывает уникальный идентификатор SmartSelect-объекта.
На одной странице не может быть расположено больше одного списка с одним и тем же атрибутом
id.
Второй - URI пространства имён
fwc, используемого в данной библиотеке. Без данного атрибута библиотека также работать не будет.
Кроме того, тег
fwc:select имеет множество дополнительных атрибутов для настройки различных функций библиотеки. Полное их описание приводится на
cоответствующей странице.
Тег
fwc:option описывает непосредственно конкретный
пункт списка. Он имеет необязательный атрибут
value, задающий значение пункта (по умолчанию равное его содержимому).
Вы так же можете использовать любые обычные HTML-атрибуты, которые будут применены при XSL-трансформации.
Согласно спецификации XML, любой непустой XML-тег должен состоять из открывающего и закрывающего тегов. Поэтому, в отличии от HTML, вы не можете писать:
А правильно так:
<fwc:option>Zero</fwc:option>
Также внутри тега
fwc:select могут содержаться XHTML-теги для форматирования списка пунктов. Об этом - на
следующей странице.
Чтобы вставить SmartSelect-список на HTML страницу, нужно вначале подключить две JavaScript-библиотеки.
1)
Prototype,
http://prototypejs.org/: фреймворк для работы с DOM и AJAX;
2)
FWC:SmartSelect: JS-составляющая библиотеки для работы со SmartSelect-списками;
Обе библиотеки можно
скачать в одном архиве.
Для подключения JavaScript библиотек в HTML, служит тег
SCRIPT, который должен быть расположен внутри тега
HEAD.
Важно: если папка FWComponents, в которой находится библиотека FWC:SmartSelect расположена не в той же директории, что и HTML-файл,
необходимо указывать адрес к этой директории перед подключением библиотеки с помощью window-переменной fwcpath.
Пример:
<html>
<head>
<script src="js/prototype.js"></script>
<script>window.fwcpath = 'js/';</script>
<script src="js/FWC/js/sselect.js"></script>
</head>
<body>
...
</body>
</html>
Если ваш HTML-файл находится в директории
js/, второй тег
SCRIPT можно опустить.
И, наконец, последнее - подключение XML-файла к HTML странице.
Действие может производиться двумя способами - JavaScript и PHP5.
В первом случае обработка XML+XSL идет на клиентской стороне, XHTML-код, возвращается методом
FWC.newSmartSelect() может быть выведен в документ с помощью
document.write().
<html>
<head>
<script src="prototype.js"></script>
<script src="FWC/js/sselect.js"></script>
</head>
<body>
<h2>FWC:SmartSelect</h2>
<script>document.write(FWC.newSmartSelect('example.xml'));</script>
</body>
</html>
В другом случае обработка происходит на сервере, поэтому необходимо подключить PHP-составляющую библиотеки. Метод
$FWC->newSmartSelect также возвращает XHTML-код.
<?php require_once 'FWC/php/SmartSelect.class.php'; $FWC=SmartSelect::getInstance(); ?>
<html>
<head>
<script src="prototype.js"></script>
<script src="FWC/SmartSelect/sselect.js"></script>
</head>
<body>
<h2>FWC:SmartSelect</h2>
<?php echo $FWC->newSmartSelect('example.xml'); ?>
</body>
</html>
Вот, пожалуй, и всё.
Желаю удачи! :)
Начиная с версии 2.0 функции методов
newSmartSelect() значительно расширились.
Во-первых появился второй параметр, через который вы сможете задавать атрибуты тега
fwc:select в формате
JSON-Object прямо во время загрузки списка!
Теперь, если вы хотите разместить на странице два одинаковых SmartSelect-списка, вам необязательно создавать два XML-файла, достаточно передать методам-загрузчикам разные значения
id:
<script>document.write(FWC.newSmartSelect('myselect.xml','{"id":"myselect1"}'));</script>
<script>document.write(FWC.newSmartSelect('myselect.xml','{"id":"myselect2"}'));</script>Кроме того появилась замечательная возможность передавать в качестве первого параметра не ссылку на XML-файл, а массив пунктов в формате JSON-Array!
Этот массив должен содежать в себе также массивы, по одному на каждый пункт. В свою очередь эти массивы могут иметь три элемента: содержимое пункта, его
value-значение и перечень атрибутов в формате JSON-Object:
<!-- создаст простой список с тремя пунктами -->
<script>document.write(FWC.newSmartSelect('[["Шарик"],["Мухтар"],["Тузик"]]'));</script>
<!-- создаст список в стиле Opera с одним пунктом, выделенным жирным шрифтом -->
<script>document.write(FWC.newSmartSelect('[["Опция 1","opt1",{"style":"font-weight:bold;"}]]','{"skin":"ss_opera"}'));</script>
<!-- создаст пустой список с id="empty" и длиной 22 -->
<script>document.write(FWC.newSmartSelect('[]','{"id":"empty","size":22}'));</script>
Этот способ предельно прост и не требует никаких дополнительных действий, т.е. создания XML-файлов. Однако и он имеет свои недостатки, например, вы не сможете использовать HTML-форматирование внутри списка. Вникайте в
JSON :)
И, наконец, ещё одна возможность, появившаяся в версии 2.5, которая позволяет использовать списки в динамически-подгружаемых страницах.
Если страничка, в которой вы хотите разместить SmartSelect-список выводится не сразу, а подгружается по технологии AJAX (XMLHttpRequest), вы не сможете использовать метод
document.write() и, уж тем более, PHP-метод.
Для таких случаев просто пропишите в нужном месте тег
<div class="smartselect" source='XML-файл или JSON-строка' attr='атрибуты в формате JSON'/>;
а после того, как эта страница загрузится просто вызовите метод
FWC.evalSmartSelectTags(el), который проведет поиск этих тегов внутри элемента, переданного в параметре
el или внутри тега
BODY и подгрузит ваши списки.
Такой метод используется на этом сайте на страницах примеров и документации.
