Spec-Zone.ru › CodeIgniter 3

Класс Javascript

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

Важно

Эта библиотека устарела и не должна использоваться. Она всегда имела статус «экспериментальной» и теперь больше не поддерживается. В настоящее время она поддерживается только для обратной совместимости.

  • Инициализация класса
  • Настройка и конфигурация
    • Установите эти переменные в вашем представлении
    • Установите путь к библиотекам с параметрами конфигурации
  • Класс jQuery
  • События jQuery
  • Эффекты
    • hide() / show()
    • toggle()
    • animate()
    • fadeIn() / fadeOut()
    • toggleClass()
    • fadeIn() / fadeOut()
    • slideUp() / slideDown() / slideToggle()
  • Плагины
    • corner()
    • tablesorter()
    • modal()
    • calendar()

Использование класса 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’. Возможно, вам захочется установить autoload в FALSE, если вы не хотите, чтобы библиотека jQuery автоматически включала тег скрипта для основного файла скрипта jQuery. Это полезно, если вы загружаете его из места вне CodeIgniter или у вас уже есть тег скрипта в вашем разметке.

После загрузки, объект библиотеки 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» или индикатора прогресса. Без него при выполнении вызовов 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');

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

$this->load->library('javascript/jquery', FALSE);

После загрузки, объект библиотеки jQuery будет доступен с помощью:

$this->jquery

События jQuery

События устанавливаются с помощью следующего синтаксиса.

$this->jquery->event('element_path', code_to_run());

В приведённом примере:

  • «событие» - любое из blur, change, click, dblclick, error, focus, hover, keydown, keyup, load, mousedown, mouseup, mouseover, mouseup, resize, scroll или unload.
  • «путь_к_элементу» - любой допустимый селектор jQuery. Из-за уникального синтаксиса селектора jQuery, это обычно идентификатор элемента или 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);
  • «цель» - любой допустимый селектор jQuery или селекторы.
  • «скорость» - необязательный параметр, может быть slow, normal, fast или, альтернативно, количество миллисекунд.
  • «дополнительная информация» - необязательный параметр, может включать обратный вызов или другую дополнительную информацию.

toggle()

toggle() изменит видимость элемента на противоположную её текущему состоянию, скрывая видимые элементы и отображая скрытые.

$this->jquery->toggle(target);
  • «цель» - любой допустимый селектор jQuery или селекторы.

animate()

$this->jquery->animate(target, parameters, optional speed, optional extra information);
  • «цель» - любой допустимый селектор jQuery или селекторы.
  • «параметры» в jQuery обычно включают ряд свойств CSS, которые вы хотите изменить.
  • «скорость» - необязательный параметр, может быть slow, normal, fast или, альтернативно, количество миллисекунд.
  • «дополнительная информация» - необязательный параметр, может включать обратный вызов или другую дополнительную информацию.

Полный обзор см. в https://api.jquery.com/animate/

Вот пример вызова animate() для div с id «note», вызванного событием click() библиотеки jQuery.

$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);
  • «цель» - любой допустимый селектор jQuery или селекторы.
  • «скорость» - необязательный параметр, может быть slow, normal, fast или, альтернативно, количество миллисекунд.
  • «дополнительная информация» - необязательный параметр, может включать обратный вызов или другую дополнительную информацию.

toggleClass()

Эта функция добавит или удалит CSS-класс к своей цели.

$this->jquery->toggleClass(target, class)
  • «цель» - любой допустимый селектор jQuery или селекторы.
  • «класс» - любой CSS-класс. Обратите внимание, что этот класс должен быть определён и доступен в уже загруженном CSS.

fadeIn() / fadeOut()

Эти эффекты заставляют элемент(ы) исчезать или появляться со временем.

$this->jquery->fadeIn(target,  optional speed, optional extra information);
$this->jquery->fadeOut(target,  optional speed, optional extra information);
  • «цель» - любой допустимый селектор jQuery или селекторы.
  • «скорость» - необязательный параметр, может быть slow, normal, fast или, альтернативно, количество миллисекунд.
  • «дополнительная информация» - необязательный параметр, может включать обратный вызов или другую дополнительную информацию.

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);
  • «цель» - любой допустимый селектор jQuery или селекторы.
  • «скорость» - необязательный параметр, может быть slow, normal, fast или, альтернативно, количество миллисекунд.
  • «дополнительная информация» - необязательный параметр, может включать обратный вызов или другую дополнительную информацию.

Плагины

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

corner()

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

$this->jquery->corner(target, corner_style);
  • «цель» - любой допустимый селектор jQuery или селекторы.
  • «стиль_угла» - необязательный параметр, может быть любым допустимым стилем, таким как round, sharp, bevel, bite, dog и т. д. Отдельные углы могут быть установлены, следуя стилю с пробелом и используя «tl» (верхний левый), «tr» (верхний правый), «bl» (нижний левый) или «br» (нижний правый).
$this->jquery->corner("#note", "cool tl br");

tablesorter()

Описание будет предоставлено позже.

modal()

Описание будет предоставлено позже.

calendar()

Описание будет предоставлено позже.

© 2014–2020 British Columbia Institute of Technology
Licensed under the MIT License.
https://codeigniter.com/userguide3/libraries/javascript.html

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API