Примечание: Этот драйвер экспериментальный. Его набор опций и реализация могут изменяться в будущих версиях.
Javascript Class
CodeIgniter предоставляет библиотеку, призванную помочь с большинством общих функций Javascript, в которых может возникнуть потребность. Следует помнить, что CodeIgniter не требует наличия библиотеки jQuery для запуска, также любая библиотека скриптов будет работать одинаково хорошо и стабильно. Библиотека jQuery представлена в угоду удобству, на тот случай, если вы решите использовать именно её.
Инициализация класса
Для инициализации класса Javascript вручную в конструкторе контроллера, используйте функцию $this->load->library. В настоящее время, единственная доступная библиотека - jQuery, которая и будет загружена аналогично следующему:
$this->load->library('javascript');
Класс Javascript также поддерживает передачу параметров, js_library_driver (string) default 'jquery' и autoload (bool) default TRUE. Возможно переопределить поведение по умолчению, если требуется отправка аргументов в ассоциативном массиве:
$this->load->library('javascript', array('js_library_driver' => 'scripto', 'autoload' => FALSE));
Опять же, в настоящее время только 'jquery' является доступной. Вероятно, целесообразно установить autoload в булево FALSE, если не требуется включение библиотеки jQuery посредством вставки заголовка скрипта из главного фала скрипта jQuery. Опция полезна, если файл скрипта загружается откуда-то "снаружи" директории CodeIgniter, или в разметке уже присутствуют скрипты.
Будучи однажды загруженным, объект скрипта становится доступным посредством использования конструкции: $this->javascript
Установка и конфигурирование
В файле отображения следует установить следующие переменные:
Т.к. библиотека является частным случаем Javascript, файлы должны быть доступны Вашему приложению.
Т.к. Javascript - язык клиентской стороны - у библиотеки должна быть возможность записи данных в отображения. Т.е. в "views". Следует включить следующие библиотеки в секцию <head> Вашего отображения.
<?php echo $library_src;?>
<?php echo $script_head;?>
$library_src - путь к вайлу с библиотекой, откуда эта библиотека и должна быть подгружена, откуда и будут впоследствии вызваны скрипты; $script_head - расположение специфических скриптов, событий, функций и других команд для обработки и вывода.
Установка путей к библиотеке в файлах конфигурации
Существует несколько элементов конфигурации в библиотеке Javascript. Они могут быть установлены как в application/config.php, использованием собственного файла config/javascript.php file, так и внутри любого контроллера посредством использования функции set_item().
Картинка, используемая в качестве "ajax loader" или индикатора прогресса. Без неё - простой текст "loading" будет отображаться в то время, когда должен быть совершён вызов Ajax.
$config['javascript_location'] = 'http://localhost/codeigniter/themes/js/jquery/';
$config['javascript_ajax_img'] = 'images/ajax-loader.gif';
Если Вы оставляете свои файлы в тех же директориях, в которые они были загружены, тогда Вам следует установить эти элементы конфигурации.
Класс jQuery
Для инициализации класса jQuery вручную в конструкторе контроллера, используйте функцию $this->load->library:
$this->load->library('jquery');
Вы можете использовать специальный параметр, чтобы определить, должен ли быть тэг скрипта из главного файла jQuery автоматически добавлен во время загрузки библиотеки. По умолчанию - он создаётся. Чтобы избежать подобного поведения - делайте так:
$this->load->library('jquery', FALSE);
Будучи однажды загруженным, объект скрипта становится доступным посредством использования конструкции: $this->jquery
Соыбтия jQuery
События устанавливаются следующим образом:
$this->jquery->event('element_path', code_to_run());
В примере выше:
- "event" - любое событие размытия, изменения, клика, двойного клика, ошибки, получения фокуса, перетаскивания, нажатия клавиши, отпускаия клавиши, загрузки, нажатия кнопки мыши, отпускания кнопки мыши, наведения мыши, убирания мыши, изменения размера, прокрутки или выгрузки.
- "element_path" - любой корректный селектор jQuery. В исходном синтаксисе jQuery, уникальный селектор - как правило идентификатор объекта, или селектор CSS. Например, "#notice_area" возымеет эффект над <div id="notice_area">, и "#content a.notice" повлияет на все ссылки с классом "notice" внутри блока div с идентификатором "content".
- "code_to_run()" - пользовательский скрипт, или действие; такое как эффект из библиотеки jQuery, представленный ниже.
Эффекты
Библиотека запросов поставляет богатый репозиторий эффектов. Перед тем, как эффект будет использован - он должен быть подгружен:
$this->jquery->effect([optional path] plugin name);
// например:
$this->jquery->effect('bounce');
hide() / show()
Каждая из этих функций влияет на видимость элемента на странице. hide() делает элемент невидимым, show() - наоборот.
$this->jquery->hide(target, optional speed, optional extra information);
$this->jquery->show(target, optional speed, optional extra information);
- "target" - любой корректный селектор jQuery, или группа таковых.
- "speed" опционально - скорость эффекта. Может быть установлена в: slow, normal, fast, или, альтернативно, напрямую задаваться целым числом (время в милисекундах).
- "extra information" опционально - может включать коллбэк или любую другую опциональную информацию.
toggle()
toggle() переключает видимость элемента на противоположную текущей, прячет видимые элементы, показывает спрятанные.
$this->jquery->toggle(target);
- "target" - любой корректный селектор jQuery, или группа таковых.
animate()
$this->jquery->animate(target, parameters, optional speed, optional extra information);
- "target" - любой корректный селектор jQuery, или группа таковых
- "parameters" - в jQuery в основном будет представлена группой свойств CSS, которые предполагается заменить.
- "speed" - опционально - скорость эффекта. Может быть установлена в: slow, normal, fast, или, альтернативно, напрямую задаваться целым числом (время в милисекундах).
- "extra information" опционально - может включать коллбэк или любую другую опциональную информацию.
Для получения более полной информации - посетите http://docs.jquery.com/Effects/animate
Рассмотрим пример animate(), вызываемой для элемента div с идентификатором "note", вызываемый по событию клика (стандартный jQuery обработчик click()).
$params = array(
'height' => 80,
'width' => '50%',
'marginLeft' => 125
);
$this->jquery->click('#trigger', $this->jquery->animate('#note', $params, normal));
fadeIn() / fadeOut()
$this->jquery->fadeIn(target, optional speed, optional extra information);
$this->jquery->fadeOut(target, optional speed, optional extra information);
- "target" - любой корректный селектор jQuery, или группа таковых
- "speed" - опционально - скорость эффекта. Может быть установлена в: slow, normal, fast, или, альтернативно, напрямую задаваться целым числом (время в милисекундах).
- "extra information" опционально - может включать коллбэк или любую другую опциональную информацию.
toggleClass()
Функция применит добавление или удаление класса CSS к своему аргументу.
$this->jquery->toggleClass(target, class)
- "target" - любой корректный селектор JQuery или группа селекторов.
- "class" - любое имя класса CSS. Следует помнить, что класс должен быть объявлен и доступен в CSS, уже загруженной.
fadeIn() / fadeOut()
Эти эффекты приводят к появлению\скрытию визуальных элементов в течение заданного времени.
$this->jquery->fadeIn(target, optional speed, optional extra information);
$this->jquery->fadeOut(target, optional speed, optional extra information);
- "target" - любой корректный селектор jQuery, или группа таковых
- "speed" - опционально - скорость эффекта. Может быть установлена в: slow, normal, fast, или, альтернативно, напрямую задаваться целым числом (время в милисекундах).
- "extra information" опционально - может включать коллбэк или любую другую опциональную информацию.
slideUp() / slideDown() / slideToggle()
Эффекты приводят к "соскальзыванию" элементов.
$this->jquery->slideUp(target, optional speed, optional extra information);
$this->jquery->slideDown(target, optional speed, optional extra information);
$this->jquery->slideToggle(target, optional speed, optional extra information);
- "target" - любой корректный селектор jQuery, или группа таковых
- "speed" - опционально - скорость эффекта. Может быть установлена в: slow, normal, fast, или, альтернативно, напрямую задаваться целым числом (время в милисекундах).
- "extra information" опционально - может включать коллбэк или любую другую опциональную информацию.
Plugins
Некоорые плагины jQuery становятся доступными посредством использования этой библиотеки.
corner()
Используется для добавления отчётливых уголков элементам страницы. За более полной информацией обращайтесь в http://www.malsup.com/jquery/corner/
$this->jquery->corner(target, corner_style);
- "target" - любой корректный селектор jQuery, или группа таковых
- "corner_style" - опционально, может быть установлено в корректное значение: round, sharp, bevel, bite, dog, и т.д. Индивидуальные уголки могут быть установлены следующим образом (в качестве разделителей стилей используются пробелы): "tl" (top left), "tr" (top right), "bl" (bottom left), или "br" (bottom right).
$this->jquery->corner("#note", "cool tl br");
tablesorter()
описание будет добавлено, скоро...
modal()
описание будет добавлено, скоро...
calendar()
описание будет добавлено, скоро...