Класс Javascript 

CodeIgniter предоставляет библиотеку, чтобы помочь с конкретными функциями, которые вы можете использовать с Javascript. Обратите внимание, что CodeIgniter не требует наличия библиотеки jQuery и что любая библиотека будет работать одинаково хорошо. Библиотека jQuery представлена для удобства, если вы решите её использовать.

Важно

Этот класс является УСТАРЕВШИМ и не рекомендуется к использованию. Он всегда был ‘экспериментальным’ и больше не поддерживается. В настоящее время его сохранили только для совместимости версий.

Использование класса Javascript 

Инициализация класса 

Чтобы инициализировать класс Javascript вручную, в конструкторе используйте $this->load->library() метод. В настоящее время доступна только библиотека jQuery, которая будет автоматически загружаться следующим образом:

$this->load->library('javascript');

Класс JavaScript также принимает параметры:

  • js_library_driver (строка) по умолчанию: ‘jquery’
  • autoload (булево) по умолчанию: TRUE

Вы можете переопределять значения по умолчанию, передав ассоциативный массив:

$this->load->library(
        'javascript',
        array(
                'js_library_driver' => 'scripto',
                'autoload' => FALSE
        )
);

Опять же, в настоящее время доступна только ‘jquery’. Возможно вы захотите установить автозагрузку в FALSE, чтобы библиотека jQuery автоматически включала тег script для основного jQuery файла. Это полезно, если вы загружаете скрипт из папки расположеной за пределами CodeIgniter или уже есть тег script в разметке.

После загрузки библиотеки jQuery объект будет доступен через:

$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 вызовах.

$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('javascript/jquery');

Вы можете передать необязательный параметр, чтобы определить, нужен ли тег script для главного jQuery файла который будет автоматически включен при загрузке библиотеки. Он будет создан по умолчанию. Чтобы не допустить этого, загрузить библиотеку следующим образом:

$this->load->library('javascript/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); // for example $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://api.jquery.com/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” необязательный, может включить функцию обратного вызова или другую дополнительную информацию.

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” необязательный, может включить функцию обратного вызова или другую дополнительную информацию.

Плагины 

Некоторые плагины jQuery становятся доступными с помощью этой библиотеки.

corner() 

Используется для добавления различных углов к элементам страницы. Для получения полной информации см. http://malsup.com/jquery/corner/

$this->jquery->corner(target, corner_style);
  • “target” может быть любым jQuery селектором/селекторами.
  • “corner_style” необязательный и может быть присвоен любой допустимый стиль: круглые, острые, конические и т.д. Отдельные углы можно установить с помощью следующих стилей “tl” (вверху слева), “tr” (вверху справа), “bl” (внизу слева), or “br” (внизу справа).
$this->jquery->corner("#note", "cool tl br");

tablesorter() 

Описание будет добавлено

calendar() 

Описание будет добавлено