Совсем недавно, а точнее несколько месяцев назад, моя деятельность переплелась с системой управления содержимым 1С-Битрикс. И хотя в начале я был не восторге, а многие вещи мне казались запутанными и местами нелогичными, но чем дольше я работал с 1С-Битрикс, тем больше убеждался, что 1С-Битрикс – это система, которая позволяет реализовать проект любого уровня сложности. Если после установки одной из редакций движка, возникает необходимость в дополнительной функциональности, её можно расширить при помощи платных или бесплатных модулей. Сегодня же я расскажу, как написать такой модуль самому.
После прочтение документации, статей и просмотра видео уроков можно определено сказать, что после написания собственного модуля – степень понимания работы 1С-Битрикс вырастит на существенный уровень. По крайней мере, раньше я считал Битрикс просто CMS, но сейчас, он развивается как платформа для разработки веб-приложений - Bitrix Framework. Поработав определенное время с относительно крупными проектами на 1С-Битрикс, могу сказать, что как по мне, мало «это» напоминает фреймворк, больше мешанину (эта одна из причин по которой многие из моих знакомых отказываются работать с Битрикс), особенно, где код не переработан под новое ядро D7.
Итак, давайте притупим, и для начала нужно определиться, что и как писать. Первое и самое важное - разрабатывать модуль мы будем с максимальным использованием нового ядра D7, поэтому я не поленюсь потратить время на документацию. Использование D7 делает код более красивым и логичным. Во-вторых, в этой статье мы рассмотрим создание простого модуля, а в будущем эти наработки я хочу использовать для написания более интересных штук.
Что же написать? Тут я решил не мудрить и залез на маркетплейс и наткнулся:
Что интересно, казалось бы, добавить к себе кнопку наверх по сути пару минут, но есть платные решения и у некоторых из них более 300 скачек. В общем, говоря, выбор у меня для первого модуля пал именно на данную кнопку с набором настроек, которые можно будет менять через админку сайта.
Структура модуля
Разрабатываемый модуль рекомендуется помещать в папку local, так мы и поступим, это позволит его отделить от других решений и работать будет немного приятнее и проще. Какие файлы и папки могут и должны быть, можно изучить в соответствующем разделе документации Битрикс. Для реализации нашей задумки структура будет выглядеть так:
- Пака модуля falbar.totop – название её в системе используется как индификатор, так что рекомендуется добавлять помимо названия и имя партнера. Соответственно falbar – имя партнера, totop – название модуля;
- Внутри лежат три папки: install – набор скриптов для установки и удаления модуля, lang – набор языковых файлов, lib – набор файлов, в которых реализуется логика решения;
- И осталось два файла: include.php – файл, подключаемый при вызове модуля в коде (его мы использовать не будем и оставим пустым), options.php – страница настроек, подключаемая в административной части.
Теперь рассмотрим папку install поподробнее:
- assets – в этой папке я разместил JavaScript и CSS нашей кнопки, которые будут подключаться в пользовательской части;
- index.php – файл в котором содержится описание модуля и реализуется установка и удаление его;
- step.php и unset.php – соответственно шаги установки и удаления, их может быть сколько угодно, а также мы можем и не использовать их;
- version.php – в нем указывается версия и время обновления нашего модуля.
Для нашего решения все языковые параметры я вынес в соответствующие ленговые файлы, хотя можно было бы их и сократить, но для меня удобнее делать так. В дальнейшем в статье я буду приводить примеры только для русской локализации во избежание дублирования кода в статье.
Модуль кнопка наверх не требует сложной логики, мы больше будем заниматься оформлением его для системы, но параметры, которые нам нужны для настройки кнопки на стороне клиента необходимо как то получить, вот для этого и понадобиться класс Main, который мы разместим в соответствующем файле Main.php.
Установка и удаление модуля Битрикс
Вот мы и приступили непосредственно к написанию кода. Первое, что стоит заполнить это файл version.php:
$arModuleVersion = array(
"VERSION" => "1.0.0",
"VERSION_DATE" => "0000-00-00 00:00:00"
);
Указываем в массиве два параметра версию и время обновление модуля и переходим к описанию главного файла index.php:
use Bitrix\Main\Localization\Loc;
use Bitrix\Main\ModuleManager;
use Bitrix\Main\Config\Option;
use Bitrix\Main\EventManager;
use Bitrix\Main\Application;
use Bitrix\Main\IO\Directory;
В новом ядре D7 широко используются пространства имен, поэтому подключаем все необходимые для нашего файла. Далее загружаем языковые файлы:
Loc::loadMessages(__FILE__);
Теперь нам нужно написать класс, в котором будет реализована установка и удаление модуля:
class falbar_totop extends CModule{}
Имя класса должно соответствовать папке модуля и являться наследником от CModule, только вместо точки стоит прописать нижние подчеркивание, после чего в адмике мы увидим, что система определила наш модуль:
Двигаемся дальше и сообщим системе больше информации, о нашем модуле, указав основные свойства, делать это я буду в конструкторе класса:
public function __construct(){
if(file_exists(__DIR__."/version.php")){
$arModuleVersion = array();
include_once(__DIR__."/version.php");
$this->MODULE_ID = str_replace("_", ".", get_class($this));
$this->MODULE_VERSION = $arModuleVersion["VERSION"];
$this->MODULE_VERSION_DATE = $arModuleVersion["VERSION_DATE"];
$this->MODULE_NAME = Loc::getMessage("FALBAR_TOTOP_NAME");
$this->MODULE_DESCRIPTION = Loc::getMessage("FALBAR_TOTOP_DESCRIPTION");
$this->PARTNER_NAME = Loc::getMessage("FALBAR_TOTOP_PARTNER_NAME");
$this->PARTNER_URI = Loc::getMessage("FALBAR_TOTOP_PARTNER_URI");
}
return false;
}
Рассмотрев несколько примеров решений, я пришел к выводу, что конструктор лучше всего подходит для выполнения такого рода задач. В нем мы подключили наш файл version.php и заполнили основные свойства для нашего класса. Перед тем, как посмотреть результат этих действий, нам нужно заполнить соответствующий языковой файл:
$MESS["FALBAR_TOTOP_NAME"] = "Кнопка наверх";
$MESS["FALBAR_TOTOP_DESCRIPTION"] = "Добавляет кнопку наверх на сайт.";
$MESS["FALBAR_TOTOP_PARTNER_NAME"] = "falbar";
$MESS["FALBAR_TOTOP_PARTNER_URI"] = "https://falbar.one/";
Вернемся в админку и посмотрим, как теперь выглядит модуль:
Следующий метод, который мы напишем, реализует процесс установки:
public function DoInstall(){
global $APPLICATION;
if(CheckVersion(ModuleManager::getVersion("main"), "14.00.00")){
$this->InstallFiles();
$this->InstallDB();
ModuleManager::registerModule($this->MODULE_ID);
$this->InstallEvents();
}else{
$APPLICATION->ThrowException(
Loc::getMessage("FALBAR_TOTOP_INSTALL_ERROR_VERSION")
);
}
$APPLICATION->IncludeAdminFile(
Loc::getMessage("FALBAR_TOTOP_INSTALL_TITLE")." \"".Loc::getMessage("FALBAR_TOTOP_NAME")."\"",
__DIR__."/step.php"
);
return false;
}
Уже с первого взгляда можно увидеть, что остались элементы старого ядра, но, увы, пока без них не обойтись. Так как мы используем функционал нового ядра D7, нам нужно проверить - поддерживает ли его система (переход был с 14 версии). Если нет, то выдать сообщение пользователю, если да, то продолжить работу. Это значит добавить нужные для работы в систему файлы, подкинуть события и добавить новые таблицы в БД. Так же при помощи метода ModuleManager::registerModule() зарегистрировать модуль в системе. В конце подключить файл step.php о котором выше я уже писал.
Добавим ещё несколько переменных в языковой файл:
$MESS["FALBAR_TOTOP_INSTALL_ERROR_VERSION"] = "Версия главного модуля ниже 14. Не поддерживается технология D7, необходимая модулю. Пожалуйста обновите систему.";
$MESS["FALBAR_TOTOP_INSTALL_TITLE"] = "Установка модуля";
Опишем три метода, к которым мы обратились из установочного DoInstall():
public function InstallFiles(){
CopyDirFiles(
__DIR__."/assets/scripts",
Application::getDocumentRoot()."/bitrix/js/".$this->MODULE_ID."/",
true,
true
);
CopyDirFiles(
__DIR__."/assets/styles",
Application::getDocumentRoot()."/bitrix/css/".$this->MODULE_ID."/",
true,
true
);
return false;
}
Копируем наши скрипты и стили в систему.
public function InstallDB(){
return false;
}
Так как мы не работаем с базой, оставляем этот метод пустым.
public function InstallEvents(){
EventManager::getInstance()->registerEventHandler(
"main",
"OnBeforeEndBufferContent",
$this->MODULE_ID,
"Falbar\ToTop\Main",
"appendScriptsToPage"
);
return false;
}
Регистрируем событие OnBeforeEndBufferContent. Перед тем, как страница будет отрисоваться, мы добавим свой HTML код, в котором сохраним настройки для нашей кнопки. Этот весь механизм далее напишем в файле Main.php.
С установкой мы закончили теперь опишем процесс удаления, заключаться он будет в нескольких методах:
public function DoUninstall(){
global $APPLICATION;
$this->UnInstallFiles();
$this->UnInstallDB();
$this->UnInstallEvents();
ModuleManager::unRegisterModule($this->MODULE_ID);
$APPLICATION->IncludeAdminFile(
Loc::getMessage("FALBAR_TOTOP_UNINSTALL_TITLE")." \"".Loc::getMessage("FALBAR_TOTOP_NAME")."\"",
__DIR__."/unstep.php"
);
return false;
}
Вызываем uninstall методы, удаляем регистрационную запись о модуле из базы данных и подключаем файл unstep.php, о котором мы выше уже говорили.
Мы описали ещё одну языковую переменную, добавим её в соответствующий файл:
$MESS["FALBAR_TOTOP_UNINSTALL_TITLE"] = "Деинсталляция модуля";
А теперь поговорим о методах:
public function UnInstallFiles(){
Directory::deleteDirectory(
Application::getDocumentRoot()."/bitrix/js/".$this->MODULE_ID
);
Directory::deleteDirectory(
Application::getDocumentRoot()."/bitrix/css/".$this->MODULE_ID
);
return false;
}
Удаляем добавленные скрипты и стили из системы.
public function UnInstallDB(){
Option::delete($this->MODULE_ID);
return false;
}
Удаляем из базы настройки нашего модуля.
public function UnInstallEvents(){
EventManager::getInstance()->unRegisterEventHandler(
"main",
"OnBeforeEndBufferContent",
$this->MODULE_ID,
"Falbar\ToTop\Main",
"appendScriptsToPage"
);
return false;
}
И в последнем методе удаляем регистрационную запись обработчика события OnBeforeEndBufferContent. Чтобы увидеть результат нам осталось описать два файла step.php и unstep.php так и сделаем.
<?
use Bitrix\Main\Localization\Loc;
Loc::loadMessages(__FILE__);
if(!check_bitrix_sessid()){
return;
}
if($errorException = $APPLICATION->GetException()){
echo(CAdminMessage::ShowMessage($errorException->GetString()));
}else{
echo(CAdminMessage::ShowNote(Loc::getMessage("FALBAR_TOTOP_STEP_BEFORE")." ".Loc::getMessage("FALBAR_TOTOP_STEP_AFTER")));
}
?>
<form action="<? echo($APPLICATION->GetCurPage()); ?>">
<input type="hidden" name="lang" value="<? echo(LANG); ?>" />
<input type="submit" value="<? echo(Loc::getMessage("FALBAR_TOTOP_STEP_SUBMIT_BACK")); ?>">
</form>
В коде мы добавили строки, отвечающие за вывод сообщения об ошибке версии и кнопку, которая позволит пользователю вернуться в список установленных решений. Добавим в соответствующий языковой файл новые элементы массива MESS:
$MESS["FALBAR_TOTOP_STEP_BEFORE"] = "Модуль";
$MESS["FALBAR_TOTOP_STEP_AFTER"] = "установлен";
$MESS["FALBAR_TOTOP_STEP_SUBMIT_BACK"] = "Вернуться в список";
И посмотрим, что получилось:
Если вы все проделали, как описано в статье, вы увидите сообщение - значит всё работает и можно двигаться дальше. Перейдем ко второму файлу:
use Bitrix\Main\Localization\Loc;
Loc::loadMessages(__FILE__);
if(!check_bitrix_sessid()){
return;
}
echo(CAdminMessage::ShowNote(Loc::getMessage("FALBAR_TOTOP_UNSTEP_BEFORE")." ".Loc::getMessage("FALBAR_TOTOP_UNSTEP_AFTER")));
?>
<form action="<? echo($APPLICATION->GetCurPage()); ?>">
<input type="hidden" name="lang" value="<? echo(LANG); ?>" />
<input type="submit" value="<? echo(Loc::getMessage("FALBAR_TOTOP_UNSTEP_SUBMIT_BACK")); ?>">
</form>
В принципе, он не сильно отличается от варианта в первом файле, добавим новые языковые переменные в соответствующий файл и проверим удаление модуля Битрикс:
$MESS["FALBAR_TOTOP_UNSTEP_BEFORE"] = "Модуль";
$MESS["FALBAR_TOTOP_UNSTEP_AFTER"] = "удален";
$MESS["FALBAR_TOTOP_UNSTEP_SUBMIT_BACK"] = "Вернуться в список";
Пишем страницу настроек для модуля Битрикс
Выше мы уже узнали, что страница настроек находится в файле options.php, сейчас он пуст и в административной части эта страница выглядит так:
Первым делам подключим все необходимые классы, языковые файлы и получим id модуля.
use Bitrix\Main\Localization\Loc;
use Bitrix\Main\HttpApplication;
use Bitrix\Main\Loader;
use Bitrix\Main\Config\Option;
Loc::loadMessages(__FILE__);
$request = HttpApplication::getInstance()->getContext()->getRequest();
$module_id = htmlspecialcharsbx($request["mid"] != "" ? $request["mid"] : $request["id"]);
Loader::includeModule($module_id);
Что теперь? Надо описать настройки модуля и поместить их в массив.
Через административную часть мы позволим пользователю изменять:
- Включать/выключать модуль;
- Изменять ширину/высоту/радиус кнопки;
- Менять цвет;
- Менять положение кнопки и скорость анимации.
Для примера думаю, этих параметров хватит с головой, напишем массив настроек:
$aTabs = array(
array(
"DIV" => "edit",
"TAB" => Loc::getMessage("FALBAR_TOTOP_OPTIONS_TAB_NAME"),
"TITLE" => Loc::getMessage("FALBAR_TOTOP_OPTIONS_TAB_NAME"),
"OPTIONS" => array(
Loc::getMessage("FALBAR_TOTOP_OPTIONS_TAB_COMMON"),
array(
"switch_on",
Loc::getMessage("FALBAR_TOTOP_OPTIONS_TAB_SWITCH_ON"),
"Y",
array("checkbox")
),
Loc::getMessage("FALBAR_TOTOP_OPTIONS_TAB_APPEARANCE"),
array(
"width",
Loc::getMessage("FALBAR_TOTOP_OPTIONS_TAB_WIDTH"),
"50",
array("text", 5)
),
array(
"height",
Loc::getMessage("FALBAR_TOTOP_OPTIONS_TAB_HEIGHT"),
"50",
array("text", 5)
),
array(
"radius",
Loc::getMessage("FALBAR_TOTOP_OPTIONS_TAB_RADIUS"),
"50",
array("text", 5)
),
array(
"color",
Loc::getMessage("FALBAR_TOTOP_OPTIONS_TAB_COLOR"),
"#bf3030",
array("text", 5)
),
Loc::getMessage("FALBAR_TOTOP_OPTIONS_TAB_POSITION_ON_PAGE"),
array(
"side",
Loc::getMessage("FALBAR_TOTOP_OPTIONS_TAB_SIDE"),
"left",
array("selectbox", array(
"left" => Loc::getMessage("FALBAR_TOTOP_OPTIONS_TAB_SIDE_LEFT"),
"right" => Loc::getMessage("FALBAR_TOTOP_OPTIONS_TAB_SIDE_RIGHT")
))
),
array(
"indent_bottom",
Loc::getMessage("FALBAR_TOTOP_OPTIONS_TAB_INDENT_BOTTOM"),
"10",
array("text", 5)
),
array(
"indent_side",
Loc::getMessage("FALBAR_TOTOP_OPTIONS_TAB_INDENT_SIDE"),
"10",
array("text", 5)
),
Loc::getMessage("FALBAR_TOTOP_OPTIONS_TAB_ACTION"),
array(
"speed",
Loc::getMessage("FALBAR_TOTOP_OPTIONS_TAB_SPEED"),
"normal",
array("selectbox", array(
"slow" => Loc::getMessage("FALBAR_TOTOP_OPTIONS_TAB_SPEED_SLOW"),
"normal" => Loc::getMessage("FALBAR_TOTOP_OPTIONS_TAB_SPEED_NORMAL"),
"fast" => Loc::getMessage("FALBAR_TOTOP_OPTIONS_TAB_SPEED_FAST")
))
)
)
)
);
Вот у нас получился такой массив, со значениями по умолчанию. Как его заполнять можно изучить в документации, но там информации мало. Из примеров чуть больше можно найти на этой странице. Добавим в соответствующий языковой файл новые элементы массива MESS:
$MESS["FALBAR_TOTOP_OPTIONS_TAB_NAME"] = "Настройки";
$MESS["FALBAR_TOTOP_OPTIONS_TAB_COMMON"] = "Общие";
$MESS["FALBAR_TOTOP_OPTIONS_TAB_SWITCH_ON"] = "Включить:";
$MESS["FALBAR_TOTOP_OPTIONS_TAB_APPEARANCE"] = "Внешний вид";
$MESS["FALBAR_TOTOP_OPTIONS_TAB_WIDTH"] = "Ширина (пикселей):";
$MESS["FALBAR_TOTOP_OPTIONS_TAB_HEIGHT"] = "Высота (пикселей):";
$MESS["FALBAR_TOTOP_OPTIONS_TAB_RADIUS"] = "Радиус (пикселей):";
$MESS["FALBAR_TOTOP_OPTIONS_TAB_COLOR"] = "Цвет фона:";
$MESS["FALBAR_TOTOP_OPTIONS_TAB_POSITION_ON_PAGE"] = "Положение на странице";
$MESS["FALBAR_TOTOP_OPTIONS_TAB_SIDE"] = "Положение кнопки:";
$MESS["FALBAR_TOTOP_OPTIONS_TAB_SIDE_LEFT"] = "Слева";
$MESS["FALBAR_TOTOP_OPTIONS_TAB_SIDE_RIGHT"] = "Справа";
$MESS["FALBAR_TOTOP_OPTIONS_TAB_INDENT_BOTTOM"] = "Отступ от нижнего края (пикселей):";
$MESS["FALBAR_TOTOP_OPTIONS_TAB_INDENT_SIDE"] = "Боковой отступ (пикселей):";
$MESS["FALBAR_TOTOP_OPTIONS_TAB_ACTION"] = "Поведение";
$MESS["FALBAR_TOTOP_OPTIONS_TAB_SPEED"] = "Скорость прокрутки:";
$MESS["FALBAR_TOTOP_OPTIONS_TAB_SPEED_SLOW"] = "Низкая";
$MESS["FALBAR_TOTOP_OPTIONS_TAB_SPEED_NORMAL"] = "Средняя";
$MESS["FALBAR_TOTOP_OPTIONS_TAB_SPEED_FAST"] = "Высокая";
Нам осталось отрисовать форму, для этого создадим новый экземпляр класса CAdminTabControl, куда и передаём массив с настройками:
$tabControl = new CAdminTabControl(
"tabControl",
$aTabs
);
$tabControl->Begin();
Добавим HTML:
<form action="<? echo($APPLICATION->GetCurPage()); ?>?mid=<? echo($module_id); ?>&lang=<? echo(LANG); ?>" method="post">
<?
foreach($aTabs as $aTab){
if($aTab["OPTIONS"]){
$tabControl->BeginNextTab();
__AdmSettingsDrawList($module_id, $aTab["OPTIONS"]);
}
}
$tabControl->Buttons();
?>
<input type="submit" name="apply" value="<? echo(Loc::GetMessage("FALBAR_TOTOP_OPTIONS_INPUT_APPLY")); ?>" class="adm-btn-save" />
<input type="submit" name="default" value="<? echo(Loc::GetMessage("FALBAR_TOTOP_OPTIONS_INPUT_DEFAULT")); ?>" />
<?
echo(bitrix_sessid_post());
?>
</form>
И обозначим конец отрисовки формы:
$tabControl->End();
У нас появилось ещё две языковые переменные, добавим и их:
$MESS["FALBAR_TOTOP_OPTIONS_INPUT_APPLY"] = "Применить";
$MESS["FALBAR_TOTOP_OPTIONS_INPUT_DEFAULT"] = "По умолчанию";
Скажу сразу, такой способ формирования формы один из самых простых, фактически, мы можем создать любой вариант форм, не пользуясь для этого Битриксовым функционалом. Вернемся в админку и посмотрим теперь на нашу страницу:
Как видите, получилось весьма годно, нам осталось только добавить код для сохранения настроек. Поместим его после массива с параметрами:
if($request->isPost() && check_bitrix_sessid()){
foreach($aTabs as $aTab){
foreach($aTab["OPTIONS"] as $arOption){
if(!is_array($arOption)){
continue;
}
if($arOption["note"]){
continue;
}
if($request["apply"]){
$optionValue = $request->getPost($arOption[0]);
if($arOption[0] == "switch_on"){
if($optionValue == ""){
$optionValue = "N";
}
}
Option::set($module_id, $arOption[0], is_array($optionValue) ? implode(",", $optionValue) : $optionValue);
}elseif($request["default"]){
Option::set($module_id, $arOption[0], $arOption[2]);
}
}
}
LocalRedirect($APPLICATION->GetCurPage()."?mid=".$module_id."&lang=".LANG);
}
В обработчике мы также используем массив с параметрами для удобства сохранения, хотя это один из способов, в конце, конечно, нужно сделать редирект. Все настройки мы сохраняем при помощи статического метода set() у класса Option, который нужен именно для работы с настройками модуля. Вот мы и закончили со страницей настроек, теперь нам осталось подкинуть их в пользовательскую часть и обработать на стороне клиента.
Подключаем скрипты и стили кнопки, передаем настройки на страницу пользователя
Тут могут быть разные пути для решения этой задачи. В самом начале статьи, когда мы описывали код установки модуля, мы привязались к событию перед отрисовкой страницы и указали метод appendScriptsToPage() класса Main как обработчик. Теперь нам его нужно написать:
namespace Falbar\ToTop;
use Bitrix\Main\Config\Option;
use Bitrix\Main\Page\Asset;
class Main{
public function appendScriptsToPage(){
if(!defined("ADMIN_SECTION") && $ADMIN_SECTION !== true){
$module_id = pathinfo(dirname(__DIR__))["basename"];
Asset::getInstance()->addString(
"<script id=\"".str_replace(".", "_", $module_id)."-params\" data-params='".json_encode(
array(
"switch_on" => Option::get($module_id, "switch_on", "Y"),
"width" => Option::get($module_id, "width", "50"),
"height" => Option::get($module_id, "height", "50"),
"radius" => Option::get($module_id, "radius", "50"),
"color" => Option::get($module_id, "color", "#bf3030"),
"side" => Option::get($module_id, "side", "left"),
"indent_bottom" => Option::get($module_id, "indent_bottom", "10"),
"indent_side" => Option::get($module_id, "indent_side", "10"),
"speed" => Option::get($module_id, "speed", "normal")
)
)."'></script>",
true
);
Asset::getInstance()->addJs("/bitrix/js/".$module_id."/jquery.min.js");
Asset::getInstance()->addJs("/bitrix/js/".$module_id."/script.min.js");
Asset::getInstance()->addCss("/bitrix/css/".$module_id."/style.min.css");
}
return false;
}
}
В методе мы определили, что он будет отрабатывать только на стороне клиента. Далее сформировали HTML код с набором настроек в json формате для удобства и добавили его в HEAD документа. В конце подключили скрипты и стили нашего Битрикс модуля кнопка наверх.
Вот и всё - параметры переданы, осталось их обработать на стороне клиента.
JavaScript и CSS кнопки наверх Битрикс модуля
Вот мы и подобрались к финальной части и осталось самое простое, на мой взгляд. Опишем стандартные стили нашей кнопки по умолчанию:
#falbar_totop-button{
position: fixed;
cursor: pointer;
display: none;
}
#falbar_totop-button:before{
content: "";
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 10px solid #fff;
margin: 10px auto 0;
display: block;
}
Незабываем код упаковать и добавить в style.min.css. Для работы кнопки нам нужна библиотека jQuery, качаем её с официального сайта и также добавляем её в соответствующий файл. Теперь напишем JavaScript, который и будет добавлять кнопку с учетом настроек:
$(function(){
var params = $("#falbar_totop-params").data().params;
if(params.switch_on == "Y"){
var style = "width: " + params.width + "px;";
style += "height: " + params.height + "px;";
style += "border-radius: " + params.radius + "px;";
style += "background-color: " + params.color + ";";
style += "bottom: " + params.indent_bottom + "px;";
style += params.side + ": " + params.indent_side + "px;";
var speed = 600;
if(params.speed == "slow"){
speed = 300;
}else if(params.speed == "fast"){
speed = 1000;
};
$("body").append("<div id=\"falbar_totop-button\" style=\"" + style +"\"></div>");
var button = $("#falbar_totop-button");
$(window).on("load", function(){
if($(this).scrollTop() > 300){
button.fadeIn(600);
}
return false;
});
$(window).on("scroll", function(){
if($(this).scrollTop() > 300){
button.fadeIn(600);
}else{
button.fadeOut(600);
};
return false;
});
button.on("click", function(){
$("html, body").animate({
scrollTop: 0
}, speed);
return false;
});
};
});
В результате у нас получился такой код. Сам принцип написания кнопки я уже рассматривал в статье: Плавная кнопка прокрутки «Наверх», если вам интересен сам механизм. Осталось увидеть плоды нашей работы:
Перед тем, как смотреть, нужно удалить и заново установить модуль
Казалось бы, столько времени потратили на добавление кнопки, но после прочтения этой статьи, я думаю, написать более сложный модуль не составит труда, а на этом я ставлю точку.