Функции для подключения стилей и скриптов в SMF

Познакомимся с несколькими функциями, призванными облегчить подключение внешних и внутренних CSS/JS файлов на вашем форуме.

loadCSSFile

Варианты подключения файла /Themes/default/css/style.css:

// 1
loadTemplate(false, 'style');

// 2
$context['html_headers'] .= '<link rel="stylesheet" type="text/css" href="' . $settings['default_theme_url'] . '/css/style.css" />';

// 3
loadCSSFile('style.css');

SMF 2.1 поддерживает все три варианта, SMF 2.0 — только первые два.

addInlineCss

Варианты добавления небольшого набора CSS-стилей:

// 1
$context['html_headers'] .= '
<style type="text/css">
    .my_rule {
        display: none;
    }
</style>';

// 2
addInlineCss('
.my_rule {
    display: none;
}');

SMF 2.1 поддерживает оба варианта, SMF 2.0 — только первый.

loadJavaScriptFile

Варианты подключения файла /Themes/default/scripts/myscript.js:

// 1, подключение скрипта в шапке страницы
$context['html_headers'] .= '<script src="' . $settings['default_theme_url'] . '/myscript.js" type="text/javascript"></script>';

// 2, подключение скрипта в подвале страницы
$context['insert_after_template'] .= '<script src="' . $settings['default_theme_url'] . '/myscript.js" type="text/javascript"></script>';

// 3, подключение скрипта в шапке страницы
loadJavaScriptFile('myscript.js', array('minimize' => true));

SMF 2.1 поддерживает все три варианта, SMF 2.0 — только первые два.

addInlineJavaScript

Варианты добавления небольшого набора JS-скриптов:

// 1
$context['insert_after_template'] .= '
<script type="text/javascript">
    alert("Hello world!");
</script>';

// 2
addInlineJavaScript('
alert("Hello world!");', true);

SMF 2.1 поддерживает оба варианта, SMF 2.0 — только первый.

Также не забываем, что в SMF 2.1 по умолчанию используется HTML5, то есть указывать тип (type) в тегах не обязательно:

$context['html_headers'] .= '
<style>
    .my_rule {
        display: none;
    }
</style>';

$context['insert_after_template'] .= '
<script>
    alert("Hello world!");
</script>';

addJavaScriptVar

Эта функция добавляет нужную вам JS-переменную в шапку страницы, внутри тегов <script></script>:

addJavaScriptVar('имя переменной', 'значение переменной', true);

Третий параметр — необязательный, если он установлен в true, то значение переменной экранируется с помощью функции JavaScriptEscape.

Поделиться
Отправить
Класснуть
Вотсапнуть