Как создать кнопку сайта?
Кнопка на сайте может использоваться повсеместно. Обычно кнопка используется для выполнения действия, которое не приводит к переходу на другую страницу. Для перехода на другие страницы используются ссылки, но часто, чтобы придать ссылке важность или просто выделить ее на фоне остального контента, даже обычная ссылка может оформляться как кнопка.
В этой инструкции показано, как создать свою кнопку.
- Обычная кнопка
- Кнопка с фоновым изображением
- Кнопка на CSS
- Ваша кнопка на других сайтах
- Установка кнопки на сайт
Обычная кнопка
В качестве обычной кнопки используются HTML теги input или button . Однако, для этих тегов нет атрибута href, который мог бы направить пользователя на другую страницу. Поэтому им часто добавляют атрибут onclick с указанием ссылки, по которой нужно перейти:
Выглядит это следующим образом:
Кнопка с фоновым изображением
Если у вас есть изображение кнопки, то его можно использовать в обычной ссылке, например так:
Выглядит это следующим образом:
Чтобы получить такой результат, нужно сделать две вещи:
- Создать изображение кнопки. Самостоятельно или с помощью онлайн-сервисов (например, cooltext.com).
- Загрузить на сайт изображение и получить ссылку на него. Для этого можно воспользоваться файловым менеджером.
Кнопка на CSS
Кнопку можно оформить с помощью CSS. Для этого добавьте стили в шаблон сайта и укажите класс кнопки.
Добавьте в разделе Панель управления / Дизайн / Редактор / CSS:
.site-button
Тогда HTML-код самой кнопки будет следующим:
А на сайте кнопка отобразится так:
Не пугайтесь, если CSS кажется вам незнакомым и странным. Чтобы настроить кнопку под свои нужды, достаточно изменить отступы / размер шрифта в пикселях и цвет фона / текста в HEX (чтобы посмотреть все цвета, наберите в Яндексе запрос «hex цвета онлайн»).
Ваша кнопка на других сайтах
В некоторых случаях есть необходимость давать пользователям возможность устанавливать вашу кнопку на своих сайтах. Если предоставите готовый HTML-код кнопки, то они без труда смогут это сделать. Для этого нам потребуется создать текстовое поле и поместить внутрь него готовый код. Каждый тип кнопки будет иметь свой код:
Обычная кнопка
Кнопка с фоновым изображением
Кнопка на CSS
Установка кнопки на сайт
Теперь необходимо добавить код кнопки на свой сайт. Это удобно делать с помощью конструктора:
Добавьте код кнопки в блок:
Добавьте поле с кодом, а также CSS, если требуется. Сохраните изменения внесенные в конструкторе.
script.js код, реализующий кнопку «Подробнее» для просмотра статьи
я совсем ещё зеленый в этой теме,подскажите пожалуйста.Как реализовать кнопку подробнее через js ,я хочу сделать так: overflow: hidden; при нажатии заменить на overflow: visible;
Возможно ли это как то сделать через js? (Этот код не работает,возможно я неправильно обращаюсь,или же вообще так делать нельзя?)
var info=document.getElementsByClassName("button_info") var text_info=document.getElementsByClassName("text_none") info.onclick = function ()
.text_none < max-height: 150px; max-width: 300px; overflow: hidden; border: 1px solid black; >.button_info
Показать всё содержимое статьи: Текст,который будет не вмещаться в рамки
Текст,который вмещается в рамки
Текст,который вмещается в рамки
Текст,который вмещается в рамки
Текст,который вмещается в рамки
Текст,который вмещается в рамки
Текст,который вмещается в рамки
Текст,который вмещается в рамки
Текст,который не вмещался в рамки
Текст,который не вмещался в рамки
Текст,который не вмещался в рамки
Текст,который не вмещался в рамки
Как сделать кнопку подробнее, которая будет раскрывать блок?
Задача такая: Есть блок, нужно сделать, чтобы в него помещалось, например, 4 строки. Если же строк больше, нужно, чтобы появлялась кнопка «подробнее», при нажатии на которую появляются остальной текст. Текст должен выезжать, а кнопка меняла текст например на «скрыть». Как реализовать такое?
- Вопрос задан более трёх лет назад
- 11096 просмотров
Комментировать
Решения вопроса 2
Для текста установить нужную высоту max-height , скрываем лишнее — установить overflow: hidden. При нажатие кнопки установить max-height текста 999px(к примеру). Это можно например с помощью JS , либо чисто на css с помощью input checkbox.
P.S. ну для красоты добавить transition.
Ответ написан более трёх лет назад
Комментировать
Нравится 4 Комментировать
Кнопка «подробнее» на странице товара
Буду очень благодарен если кто то сможет мне помочь!
Как добавить кнопку «подробнее» на странице товара.
и сделать много язычной, чтобы при переходи на другой язык кнопка менялась на язык сайта.
примерно как здесь.
Attachments:
Please Log in or Create an account to join the conversation.
- Posts: 2293
- Thank you received: 315
12 years 1 month ago #41793
Ответ в картинках
необходимо изменить шаблон img_title: (если у вас отображается немного не так — обновите перевод)
Все делалось для joomla 2.5
Не забываем выбрать именно тот шаблон, который вы используете в Joomla
Находим строчку listing_img_title и входим в редактор
В редакторе добавляем вот эту строчку в то место, которое вам необходимо (ориентируйтесь по скриншщоту)
Вот эта строчка в тексте:
p.s. Насчет многоязыковой поддержки — это сейчас больная тема. Joomfish для joomla 2.5 до сих пор не готов, хотя народ над ним трудится. Так как для многоязыковой поддержки hikashop использует именно joomfish, то сейчас трудное время, чтобы ответить что либо определеннное.
Я не явлюсь официальной службой поддержки!
Я здесь добровольно!
Хочешь получить купон на скидку Hikashop? Спроси меня как!
Attachments:
Last edit: 12 years 1 month ago by progreccor.
The following user(s) said Thank You: Sohik
Please Log in or Create an account to join the conversation.
- Posts: 50
- Thank you received: 4
12 years 1 month ago #41838
Есть предварительная версия с поддержкой FaLang. Nicolas дает ее по запросу . Обещает в ближайшее время выпустить релиз.
Так что не унывайте! Multilang for J1.7/2.5 будет в ближайшее время. Причем (судя по коду) будут поддерживаться и JoomFish и FaLang. Но, это мое мнение.
Касательно нативной поддержки — Nicolas сказал что это займет миниму месяц работы, и они не могут тратить это время, т.к. есть другие приоритетные направления.
А я лично за нативную поддержку (SQL запросы нужно экономить!).
Last edit: 12 years 1 month ago by korkunov.
The following user(s) said Thank You: progreccor
Please Log in or Create an account to join the conversation.
- Posts: 11
- Thank you received: 0
12 years 1 month ago #41842
Огромное спасибо Вам progreccor!
Все отлично плучилось. спасибо еще раз!
Есть возможность сделать что бы эта кнопка стала мультиязычной.
Конечно нужно сделать несколько изменений, очень не значительных и все окейно работает.
1: В файле listing_img_title.php (product) нужно добавить строчку.
" title="escape($this->row->product_name);?>">
2: Добавить в языковые файлы новую строчку (language/ru-RU/ru-RU.com_hikashop.ini) READ_MORE_BUTTON=»подробнее»
Вот и все, все работает отлично.
Last edit: 12 years 1 month ago by progreccor.
Please Log in or Create an account to join the conversation.