Пост навеян данной темой на форуме.
В теме было высказано много вариантов реализации, попробовал сделать для сообщества ещё один.
Демо
Инструкция.
1) Распакуйте этот архив в корень сайта. Если у Вас стоит не дефолтный шаблон, перед заливкой переименуйте папку default в архиве на название своего шаблона.
2) Откройте файл \icons\system\controllers\admin\forms\form_menu_item.php, найдите строку 64, замените
на
3) Откройте файл \system\languages\ru\language.php, в каком-то месте (например, на 48 строке), добавьте
4) В head в \templates\(ваш шаблон)\main.tpl.php подключите стиль шрифта
5) Откройте \templates\(ваш шаблон)\assets\ui\menu.tpl.php, на ~24 строке добавьте
в этом же файле добавьте на ~44 строке (перед <span class="wrap">)
6) Откройте \templates\(ваш шаблон)\js\core.js, в самом конце добавьте
Обратите внимание на пункт 6, строку 23 — $.nmManual('/templates/default/icons.html');, если используете не дефолтный шаблон — не забудьте поменять в пути default на название своего шаблона.
На этом всё. Благодарю за внимание.
В теме было высказано много вариантов реализации, попробовал сделать для сообщества ещё один.
Демо
Инструкция.
1) Распакуйте этот архив в корень сайта. Если у Вас стоит не дефолтный шаблон, перед заливкой переименуйте папку default в архиве на название своего шаблона.
2) Откройте файл \icons\system\controllers\admin\forms\form_menu_item.php, найдите строку 64, замените
'type' => 'fieldset', 'title' => LANG_OPTIONS, 'title' => LANG_CSS_CLASS, )) ) ),
'type' => 'fieldset', 'title' => LANG_OPTIONS, 'title' => LANG_CSS_CLASS, )), 'title' => LANG_CSS_ICON, )) ) ),
<?php $this->addMainCSS("templates/{$this->name}/css/font-awesome.min.css"); ?>
$menu_item_icon = isset($item['options']['icon']) ? '<i class="menu-icon '.$item['options']['icon'].'"></i> ' : '';
<?php echo $menu_item_icon; ?>
$(window).on('load', function () { if ($('input#options_icon').length) { var input_option_icon = $('input#options_icon'), input_option_icon_choose_html, input_option_icon_preview, input_option_icon_html = function (icon) { return '<i class="' + icon + '"></i>'; }, check_input_option_icon_choose = function() { if (input_option_icon.val() != '') { return input_option_icon_choose_html = '<a href="javascript:void(0)" class="input_option_icon_preview"></a> <a href="javascript:void(0)" class="add">Изменить</a> или <a href="javascript:void(0)" class="remove">удалить</a>'; } else { return input_option_icon_choose_html = '<a href="javascript:void(0)" class="add">Выбрать</a>'; } }; input_option_icon.hide(); $('<div class="input_option_icon_choose">' + input_option_icon_choose_html + '</div>').insertAfter(input_option_icon); var input_option_icon_choose = $('.input_option_icon_choose'); input_option_icon_choose.html(check_input_option_icon_choose()); $('.input_option_icon_preview').html(input_option_icon_html(input_option_icon.val())); $(document).on('click', '.input_option_icon_choose .add', function(){ $.nmManual('/templates/default/icons.html'); input_option_icon.change(); }); $(document).on('click', '#icons section a', function() { input_option_icon.val($(this).children().attr('class')); input_option_icon.change(); $.nmTop().close(); }); $(document).on('click', '.input_option_icon_choose .remove', function(){ input_option_icon.val(''); input_option_icon.change(); }); $(document).on('change', input_option_icon, function () { input_option_icon_choose.html(check_input_option_icon_choose()); $('.input_option_icon_preview').html(input_option_icon_html(input_option_icon.val())); }); } });
На этом всё. Благодарю за внимание.
Реклама #
Loadырь 8 лет назад #
Джехутимери 8 лет назад #
Для универсализации достаточно заменить содержимое icons.html и подключить другой шрифт.
Возможно, добавлю ещё шрифтовых иконок и разобью разные коллекции табами. Надо будет тут подумать.
Glaz 8 лет назад #
mic 8 лет назад #
Val 8 лет назад #
Def 8 лет назад #
можно не только иконки добавлять, но и выводить виджеты в меню и фиксировать при прокрутке
Kreator 8 лет назад #
1. Окультурить все это в хук (или компонент), чтоб не было такой портянки с правками. Станется только 2 маленьких вставки
2. Добавить возможность отключить текст (заголовко) меню, чтоб можно было только иконку оставить
И очень хорошо.
Джехутимери 8 лет назад #
Kreator 8 лет назад #
В него все что нужно прописываю, цепляю на нужных страницах css и js хуками.
Ну и нужное содержимое все в папку этого компонента.
В вашем случает js и css код упаковать в свои файлы и вызвать эти файлы при загрузке шаблона.
То же касается файла - всплывающей странички с иконками.
Вызвать таки эту страницу штатно шаблоном из этого же компонента.
В итоге получается отдельный компонент со своим содержимым и потом при обнове icms намного меньше искать что и где нужно не забыть обновить.
Джехутимери 8 лет назад #
Буду пробовать.
Val 8 лет назад #
Джехутимери 8 лет назад #
Val 8 лет назад #
Я писал о том, что, на сколько я понял, добавление "html-кода иконки" происходит не на стороне сервера, когда генерируется страница, а уже в браузере при просмотре этой самой страницы. Что определенно скажется на скорости загрузки и работы страницы в целом (да, может быть не критично, но тем не менее)
Получается не совсем логично: страница формируется на сервере (но не совсем полностью), потом отсылается пользователю и у него в браузере уже окончательно доформировывается.
Джехутимери 8 лет назад #
Выбор иконки - инпут, куда нужно передать класс иконки (например, fa fa-user). Если значение есть, то выводиться html иконки ($menu_item_icon = isset($item['options']['icon']) ? '<i class="menu-icon '.$item['options']['icon'].'"></i> ' : '';).
Весь js нужен только только как внешний интерфейс, по факту клика на иконку в инпут всего лишь загоняется значение.
Val 8 лет назад #
Игорь Lu 8 лет назад #
Не знаю, может это только у меня так, но, вот как-то так
Ну, а за доработку + однозначно, хотя, как уже писали выше, компонентом было бы конечно удобней.
Bubble Gumoff 8 лет назад #
Нико 8 лет назад #
Джехутимери 8 лет назад #
Замените icons.html на новый из архива.
Dmitriy505 8 лет назад #
Игорь Lu 8 лет назад #
Планируется ли исправить эти недочёты под последнюю версию Инстант?
За раннее благодарен!
Kantona 8 лет назад #
MaKo 8 лет назад #
Sergon 7 лет назад #
не забывайте кеш очистить))
Sergon 7 лет назад #
Sergon 7 лет назад #