Примечание: Это экспериментальный драйвер. Его функции и реализации могут измениться в следующих релизах.
Класс Javascript
CodeIgniter предоставляет библиотеку, которая поможет вам с некоторыми общими функциями — их вы возможно захотите использовать с Javascript. Обратите внимание, CodeIgniter не нуждается в библиотеке jQuery, и любые сценарии будут работать. Библиотека jQuery представляется, как дополнительное удобство — если вы пожелаете с ней работать.
Инициализация класса
Используйте функцию $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 — это язык, работающий на стороне клиента. Библиотека должна допускать запись содержимого в ваш вывод. Это обычно подразумевает отображение. Вы не нуждаетесь во включении следующих переменных в часть <head> вашего вывода.
<?php echo $library_src;?>
<?php echo $script_head;?>
$library_src — это где будет загружен сам файл библиотеки, а также откуда могут быть загружены его плагины; $script_head — это где конкретные события, функции и другие команды будут рендериться..
Установка пути к библиотеке вместе с элементами конфигурации
Доступны несколько элементов конфигурации в библиотеке Javascript. Они могут быть установлены в application/config.php, в собственном файле config/javascript.php, или в любом контроллере, использующем функцию set_item().
Изображение для использования в "ajax loader", или индикатор загрузки. Без него простое текстовое сообщение "loading" будет использовано при вызовах Ajax.
$config['javascript_location'] = 'http://localhost/codeigniter/themes/js/jquery/');
$config['javascript_ajax_img'] = 'images/ajax-loader.gif';
Если вы оставите ваши файлы в тех же директориях, откуда они загружены, вы не должны указывать эти элементы конфигурации.
Класс jQuery
Используйте функцию $this->load->library для того, чтобы загрузить ваши конфигурационные файлы вручную из ваших контроллеров.
$this->load->library('jquery');
Вы можете отправить опциональный параметр, определяющий, будет ли тег скрипта из главного файла jQuery автоматически включен при загрузке библиотеки. По умолчанию он будет создан. Для того, чтобы это предотвратить, загрузите библиотеку вот так:
$this->load->library('jquery', FALSE);
Загруженный объект библиотеки jQuery доступен через $this->jquery
События jQuery
События устанавливаются посредством следующего синтаксиса.
$this->jquery->event('element_path', code_to_run());
В примере выше:
- "event"- событие blur, change, click, dblclick, error, focus, hover, keydown, keyup, load, mousedown, mouseup, mouseover, mouseup, resize, scroll или unload.
- "element_path"- любой корректный селектор jQuery. Благодаря уникальному синтаксису селекторов jQuery, обычно это ID элемента, или селектор CSS. Например, "#notice_area" возымеет эффект над <div id="notice_area">, и "#content a.notice" будет актуально для всех ссылок с классом "notice" в div с id "content".
- "code_to_run()"- это скрипт, который вы пишете сами, или действие, вроде эффекта из библиотеки jQuery.
Эффекты
Библиотека jQuery поддерживает мощный репертуар Эффектов. Перед тем, как эффект будет использован, он должен быть загружен:
$this->jquery->effect([optional path] plugin name);
// например
$this->jquery->effect('bounce');
hide() / show()
Каждая из этих функций влияет на видимость элемента на странице. hide() сделает элемент невидимым, show() покажет его.
$this->jquery->hide(target, опционально speed, опционально extra information );
$this->jquery->show(target, опционально speed, опциональная extra information);
- "target" должен быть правильным jQuery селектором или селекторами.
- "speed"- опционально указываемая скорость, вроде slow, normal, fast, или альтернативно — число миллисекунд.
- "extra information"- опционально, можно callback или другая дополнительная информация.
toggle()
toggle() изменит видимость элемента относительно текущего состояния. Спрячет видимый элемент, покажет скрытый.
$this->jquery->toggle(target);
- "target" правильный селектор или селекторы jQuery.
animate()
$this->jquery->animate(target, parameters, optional speed, optional extra information);
- "target" правильный селектор или селекторы jQuery.
- "parameters" ряд свойств CSS, которые вы хотите изменить.
- "speed" опционально указывается скорость, вроде slow, normal, fast или альтернативно — число миллисекунд.
- "extra information" опционально, callback или другая дополнительная информация.
Более подробную информацию смотрите тут http://docs.jquery.com/Effects/animate
Вот пример animate(), применяемого к div с id "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" опционально, callback или другая дополнительная информация.
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" опционально, callback или другая дополнительная информация.
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" опционально, callback или другая дополнительная информация.
Плагины
Несколько плагинов 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 — снизу слева), or "br" (bottom right — внизу справа).
$this->jquery->corner("#note", "cool tl br");
tablesorter()
Пока нет оригинального описания (см. код)
modal()
Пока нет оригинального описания (см. код)
calendar()
Пока нет оригинального описания (см. код)