Заметки программиста

Очень популярным стало открытие картинки на сайте в слое поверх всего, не открывая дополнительных окон. Удобно, красиво, быстро, вобщем супер, но не все скрипты для этого одинаково полезны. Родоначальником был Lightbox, сейчас он называется Lightbox2, далее я расскажу о нем и о его многочисленных клонах, итак: [More]

Красивая штучка, я решил назвать ее Sliderbox и это веб-интерфейс! Смотрим как работает.

Компонент основан на объекте «Draggable» из фреймворка scriptaculous. У него есть ограничения по перетаскиванию только по горизонтали и не больше 32px в стороны. Есть событие на окончание перетаскивания, которое «приклеивает» слайдер в позицию Да или Нет. Так же создаются события чтоб переключить положение sliderbox’а на прямую, по нажатию на нужное значение. В данном примере верстка (таблица стилей css) взята из существующего проекта и иммеет рекомендательный характер. Для IE ≤ 6 обязательно поставьте png fix.

За дизайн и идею контрола спасибо Денису, за реализацию мне, ага.

Скачать исходники

Простой пример создания выпадающих списков на основе script.aculo.us.

Пример работы можно посмотреть здесь.

Ничего нового я не изобретал, всего лишь показываю как это работает и как просто это можно использовать. В данном примере это имена домашних животных, они заранее заданы и возвращаются в виде списка (ul, li), я не стал использовать русские имена из-за усложнения примера в связи с кодировкой. Но это легко решается.

В папке js лежит фреймворк и подключается он в index.html следующим образом:

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous/scriptaculous.js?load=effects,controls" type="text/javascript"></script>

?load=effects,controls указывает загружать только эти компоненты.

Файл pets.php содержит пример кода возвращающий список наших питомцоф, с простеньким поиском по массиву, по большому счету важно чтоб он вернул html код типа <ul><li>..</li></ul> или <span></span> в случае когда варианты не найдены, список легко поддается стилизации.

Все остальное понятно из исходников, если нужны более сложные варианты добро пожаловать в официальную документацию.

Скачать исходники.