Регистрация скриптов и стилей в виде.
  • 4115

Добавления кода javascript и css в файлах видов.

Автор: admin | 07 мая (Пн.) 2018г. в 14ч.24м.

В yii2 существует несколько способов подключения скриптов и стилей на страницах сайта.
К ним относятся комплекты ресурсов, расширяющих класс yii\web\AssetBundle и подключение
скриптов и стилей в файлах view непосредственно.

В данной статье опишу второй способ.

Работа со стилями в view.

Внутри файла view обращение к методам осуществляется с помощью $this->нужныйМетод
Внутри контроллера в экшене $this->getView()->нужныйМетод.
В других местах Yii::$app->getView()->нужныйМетод


Для регистрации стилей css в файлах видов yii\web\View есть такие методы, как registerCss() и registerCssFile()
Рассмотрим их применение на практике.

Для того, чтобы размещенные правила стилей отображались между тегами <style></style> в head
используется  registerCss( $css, $options = [], $key = null ) ,
где $css - непосредственно стили,
$options - массив атрибутов тега style как, например type="text/css" ,
а $key - это ключ в виде строки для
идентификации этого набора стилей в массиве стилей, зарегестрированных в свойстве $css класса yii\web\View

Пример.
<!-- В файле view:->

<?php 
$css= <<< CSS

body{
    font-size: 200%;    
}

CSS;

$this->registerCss($css, ["type" => "text/css"], "myStyles" );
?>​

Если два кодовых блока CSS зарегистрированы с одним и тем же ключом (в примере это "myStyles"),
последний будет перезаписывать определенный ранее. Это свойство может быть полезно при необходимости
динамически менять какие-то стили на странице без необходимости правки файлов css.

Например, в блоках if(){...} else{...} .

<?php if($materials->count() > 10): ?>

	<?php 
	$css= "p{font-size: 10px;}"
	$this->registerCss($css, ["type" => "text/css"], "myStyles" );
	?>

<?php else: ?>
	<?php 
	$css= "p{font-size: 20px;}"
	$this->registerCss($css, ["type" => "text/css"], "myStyles" );
	?>

<?php endif; ?>
<!-- Меняем стили этого блока в зависимости от количества материалов ->
<p><?= $materials->count(); ?></p>

 Если нужно зарегестрировать большой список стилей, то лучше использовать отдельный файл .css
Для подключения файла стилей в виде ссылки используется $this->registerCssFile( $url, $options = [], $key = null )
, где $url - ссылка на файл стилей,

$options - Атрибуты HTML для тега ссылки в виде пар имя-значение за исключением нескольких опций,
упомянутых ниже.
Однако опция depends специально обрабатываются и не рассматриваются как атрибуты HTML. depends - это зависимости
подключаемого файла стилей в виде класса AssetBundle выглядит так 'depends'=> ['frontend\assets\AppAsset']

condition: указывает условные комментарии для IE, например, lt IE 9.
Когда это указано, сгенерированный тег ссылки будет заключен в условные комментарии.
Это в основном полезно для поддержки старых версий браузеров IE.

noscript: если установлено значение true, тег ссылки будет заключен в теги.

Остальные параметры будут отображаться как атрибуты результирующего тега ссылки.
Значения будут закодированы в формате HTML с помощью encode ().

Пример:

<?php 
$this->registerCssFile("@web/styles/css-min/main.min.css", 
						['rel' => 'stylesheet',
						'noscript' => true,
						'condition' => 'lt IE 9',
						'depends'=> ['frontend\assets\AppAsset']],
 			'mystyle');
?>

Результат:

<!--[if lt IE 9]>
<link href="/styles/css-min/main.min.css" rel="stylesheet" noscript>
<![endif]-->

Также есть класс хелпер yii\helpers\Html ,в котором тоже есть методы для работы со стилями. Для
регистрации файла стилей применяется статический метод yii\helpers\Html::cssFile( $url, $options = [] )
Пример:

<?php 

$options = ['rel' => 'stylesheet',
            'noscript' => true,
            'condition' => 'lt IE 9',
    ];

echo yii\helpers\Html::cssFile( "@web/styles/css-min/main.min.css", $options  );

?>

Эффект тот же, за тем исключением, что нет возможности установить depends и ссылка выводится в том месте кода,
где прописана (не в head)

Также есть метод для вывода стилей в виде:
 yii\helpers\Html::style( $content, $options = [] );

<?php 

$style= <<< CSS

body{
    font-size: 200%;    
}

CSS;
echo  yii\helpers\Html::style($style, []);
?>

Эти методы могут быть полезны для подключения или вывода отдельных стилей именно в том месте, где их прописали.
Например в layout.php

<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<?= Html::csrfMetaTags() ?>

<title><?= Html::encode($this->title ? $this->title ." | ".\Yii::$app->name : \Yii::$app->name) ?></title>

<?php 
//тут наш статический метод со ссылкой до генерации всех других ссылок на css и js
$options = ['rel' => 'stylesheet',
            'noscript' => true,
            'condition' => 'lt IE 9',
    ];

echo yii\helpers\Html::cssFile( "@web/styles/css-min/main.min.css", $options  );
?>

<?php $this->head() ?>
</head>

Рассмотрим регистрацию javascript во view.

Для регистрации скриптов есть похожие с теми, что применялись для стилей методы.
$this->registerJs( $js, $position = self::POS_READY, $key = null );//регестрирует код на странице
$this->registerJsFile( $url, $options = [], $key = null );//регестрирует ссылку на js файл
$this->registerJsVar( $name, $value, $position = self::POS_HEAD );//регестрирует отдельную переменную
​

Пример для registerJs
<?php 
$js = <<< JS
alert("okey!");
JS;

$this->registerJs( $js, $position = yii\web\View::POS_READY, $key = null );
?>​

@param (string) $js - сам скрипт в виде строки.
@param (integer) $position - позиция, в которой тег сценария JS должен быть вставлен на страницу.
Возможные значения: POS_HEAD: в разделе заголовка
POS_BEGIN: в начале раздела тела
POS_END: ​​в конце секции корпуса
POS_LOAD: заключен в jQuery (window) .load (). Обратите внимание, что с помощью этой позиции метод
автоматически зарегистрирует jQuery js-файл.
POS_READY: заключен внутри jQuery (document) .ready (). Это значение по умолчанию.
Обратите внимание, что с помощью этой позиции метод автоматически зарегистрирует jQuery js-файл.

@param (string) $key - ключ, который идентифицирует кодовый блок JS. Если null, он будет использовать $ js в качестве ключа.
Если два кодовых блока JS зарегистрированы одним и тем же ключом, последний будет перезаписывать первый.
registerJsFile - регистрация ссылки на js файл.
<?php 
$this->registerJs( '@web/scripts/my.js', 
$options = ['position' => yii\web\View::POS_HEAD, 'depends' => ['frontend\assets\AppAsset'],'condition'=> 'IE IE 9'], 
$key = 'myKey' );
?>​
Первый параметр - ссылка, это ясно.

Рассмотрим второй вариант.

$options - атрибуты HTML для тега скрипта.
Следующие параметры специально обрабатываются и не рассматриваются как атрибуты HTML:
depends: array, указывает имена пакетов активов, от которых зависит этот JS-файл.
position: указывает, где тег JS-скрипта должен быть вставлен на страницу.
Возможные значения: POS_HEAD: в разделе заголовка
POS_BEGIN: в начале раздела тела POS_END: ​​в конце части тела. Это значение по умолчанию.

condition: указывает условные комментарии для IE, например IE IE 9.
Когда это указано, сгенерированный тег скрипта будет заключен в условные комментарии.
Это в основном полезно для поддержки старых версий браузеров IE.

Остальные параметры будут отображаться как атрибуты полученного тега сценария.
Значения будут закодированы в формате HTML с помощью encode () .
Если значение равно null, соответствующий атрибут не будет отображаться.

Ключ, последний параметр @param (string) $key который идентифицирует файл сценария JS.
Если null, он будет использовать $ url в качестве ключа.
Если два JS-файла зарегистрированы с одним и тем же ключом в одной и той же позиции, последний
будет перезаписывать первый. Обратите внимание, что опция позиции имеет приоритет, поэтому файлы
зарегистрированы одним и тем же ключом, но другой параметр позиции не будет переопределять друг друга.

Регестрируем отдельную переменную
 registerJsVar ( $name, $value, $position = self::POS_HEAD );
$name - имя переменной
$value - значение переменной
$position - позиция вывода кода

Возможные значения: POS_HEAD: в разделе главы. Это значение по умолчанию.
POS_BEGIN: в начале раздела тела.
POS_END: ​​в конце части тела.
POS_LOAD: заключен в jQuery (window) .load ().
Обратите внимание, что с помощью этой позиции метод автоматически зарегистрирует jQuery js-файл.
POS_READY: заключен внутри jQuery (document) .ready ().
Обратите внимание, что с помощью этой позиции метод автоматически зарегистрирует jQuery js-файл.

Также как и для работы со стилями есть методы хелпера для работы со скриптами
 yii\helpers\Html::jsFile( $url, $options = [] ) - создает тег скрипта, который ссылается на внешний файл JavaScript.
Создает тег скрипта yii\helpers\Html::script( $content, $options = [] )

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

Однако yii\helpers\Html::jsFile в $options можно указать condition что указывает условные комментарии для IE,
например IE IE 9, сгенерированный тег скрипта будет заключен в условные комментарии
для поддержки старых версий браузеров IE.

Остальное содержимое $options будет выведено в терминах пар имя-значение.

Примеры
<?php 
echo yii\helpers\Html::jsFile ( "@web/scripts/my.js", ['condition'=> 'IE IE 9'] );
?>

<?php 
$js = <<< CSS
alert("okey!");
CSS;

echo yii\helpers\Html::script( $js, ["type" => "text/javascript"] );
?>​
Данные методы удобны для вывода кода в нужном месте или для сохранения в переменную и затем
вывода где требуется.

Пользуйтесь данными методами. А я буду рад любым комментариям и постараюсь ответить на все Ваши
вопросы.

Приветствую!

Меня зовут Сергей. Я - автор этого блога.

Если Вам был полезен материал на моем сайте, поддержите пожалуйста мой проект, чтобы о нем узнали другие люди - кликните plizz :) на иконку в соц. сети, чтобы поделиться материалом с другими.