Создание кнопок на web-странице. Создание кнопок на web-странице Другие типы кнопок
Здравствуйте! Пример скрипта можно посмотреть в этом блоге, когда вы прокручиваете страницу вниз,
в правом нижнем углу появляется картинка-кнопка "Наверх", нажав на которую вы попадете к верхней шапке сайта.
Под каждым примером с картинкой вы найдете код (скрипт), который надо вставить перед закрывающимся тегом "
"
Три небольших момента для корректной установки:
Кодировка сайта должна быть в UTF-8
, если будет другая то вместо русских букв - будут непонятные крякозяблики
Надо чтобы на сайте была подключена библиотека jquery
. Подключить ее можно вставив в шаблоне сайта перед""
следующий код:
Если у вас на сайте в дизайне прописан z-index (признак - не видно картинку
{или видно, но только на некоторых участках сайта}), вам надо прописать в стилях к сайту следующую строчку:
#topcontrol{z-index: 9999;}
Если нужно изменть положение картинки то воспользуйтесь стилем margin:
#topcontrol{margin-bottom: 50px;}
Js">
Js">
Js">
Js">
Js">
Js">
Js">
Js">
Js">
0.js">
1.js">
2.js">
3.js">
4.js">
Js">
6.js">
7.js">
8.js">
9.js">
0.js">
1.js">
2.js">
3.js">
4.js">
5.js">
6.js">
7.js">
Простая кнопка "Наверх" без JavaScript
Существует очень простой способ предоставить пользователю такой функционал. Этот способ не требует задействования каких либо библиотек или дополнительных скриптов и делается исключительно при помощи HTML и при желании с задействованием CSS, путем создания обыкновенной внутренней ссылки.
Для того, чтобы это сделать в любом месте, внизу вашей страницы, просто добавьте следующий код:
В стили вашего сайта, обычно они находятся в файле style.css надо вставить:
.topbutton {
width:100px;
border:2px solid #ccc;
background:#f7f7f7;
text-align:center;
padding:10px;
position:fixed;
bottom:50px;
right:50px;
cursor:pointer;
color:#333;
font-family:verdana;
font-size:12px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}
Недостатки:
Кнопки сделанные с применением JavaScript могут быть плавающими и появляться сразу как только пользователь спустился немного в низ по странице, а в приведенном примере она будет отображаться постоянно.
Прокрутка не будет плавной и после нажатия пользователь будет мгновенно перенаправлен вверх страницы.
Плюсы данного вида кнопки:
Для работы кнопки не нужно задействовать скрипты и большие, по объему, библиотеки. И это очень большой плюс.
Кнопки прокрутки вверх и вниз на JQUERY
Данное решение позволяет перемещаться как вниз так и вверх страницы т. к. состоит из двух кнопок. Кнопки фиксировано располагаются в левой части страницы. При произведении скроллинга кнопки плавно мерцают.
Название:
Кнопки прокрутки вверх и вниз на JQUERY
Ссылка:
57.72 KB
Формат:
ZIP архив
В скачанном архиве будут находится все файлы необходимые для функционирования кнопки. Это CSS, JS файлы и файлики изображений стрелок.
Кнопка плавной прокрутки вверх при помощи JQuery
Еще один вариант организации плавной прокрутки содержимого страницы, с низу вверх, при помощи JQuery. Кнопка находится в правой нижней части страницы и появляется только если немного проскролить страницу вниз. Все реализовано при помощи небольшого кусочка CSS и JS кода, а так же небольшой картинки использующейся в качестве кнопки.
Мне эта кнопка нравится тем, что для ее создания не требуется большое количество скриптов при этом она имеет неплохие эффекты.
Теперь разберемся, что нужно сделать для подключения кнопки к сайту
Изображение:
Вам понадобится изображение самой кнопки можете взять любое, а можете использовать вот это:
HTML код:
Для вызова кнопки после основного контента страницы или перед тегом разместите следующий HTML код:
При помощи этого кода кроме внешнего вида мы определяем позицию кнопки и задаем отступы 100 px с права и 50 px снизу. Его лучше всего добавить в файл стилей вашего сайта.
Для начала подключаем библиотеку, если она еще не подключена для вашего сайта. Для этого между тегами
...? вставляем следующее:
Затем сразу после подключения библиотеки необходимо расположить следующий код JQuery:
Первый ScrollTop - определяет текущее вертикальное положение полосы прокрутки и если оно становится больше 100 px, то автоматически появляется кнопка. Если хотите чтобы она появлялась раньше или позже изменить в необходимую сторону это значение.
Как вы видите есть еще два параметра - 0 - значит страница будет прокручена вверх до самого начала до нулевого пикселя, а 600 - это скорость анимации в миллисекундах.
Лабораторная работа №6.
Цель работы:
Научиться создавать кнопки, изучить принцип их функционирования, научиться создавать различные элементы на кнопках.
Еще одно частое применение графических элементов - это оформление кнопок. Кнопка - это элемент взаимодействия с пользователем, так как предполагается, что когда он на нее нажмет, то что-нибудь произойдет.
Выделяют три типа кнопок:
· кнопки отправки
: При активизации такой кнопки производится отправка формы. В форме может быть несколько кнопок отправки.
· кнопки сброса
: При активизации такой кнопки для всех управляющих элементов устанавливаются исходные значения.
· прочие кнопки
: Для таких кнопок действие по умолчанию не определено. С атрибутами событий каждой такой кнопки могут быть связаны клиентские скрипты. Если происходит событие (например, пользователь нажимает кнопку, отпускает ее и т.д.), включается связанный с событием скрипт.
Необходимо определять язык скрипта для кнопок в объявлении скрипта по умолчанию (в элементе META).
Кнопки создаются с помощью элемента BUTTON или INPUT. Э
лемент BUTTON
предоставляет более широкие возможности представления кнопки, чем элемент INPUT
.
Чтобы создать кнопку, достаточно поместить некоторый текст между тегами , например, вот так:
Правда, из этого совершенно не следует, что при нажатии на этой кнопке что-нибудь произойдет.
Однако кнопка будет вполне полноценной и даже будет “вдавливаться” при нажатии.
Интереснее тот факт, что между тегами можно поместить не только текст, а все, что угодно. Если мы поместим туда тег , то получим кнопку с графическим изображением. Можно поместить на кнопку и текст, и изображение (только не надо забывать о форматировании - например, надо вставлять теги для переноса строк и т.д.). Наконец, как показано в следующем примере, можно поместить на кнопку вообще любой блок HTML! В нашем примере мы поместили туда целую таблицу с разноцветными клетками.