Уроки по js | Кнопки

Главная->Уроки по js->Кнопки

Добавить в Избранное.Вверх
На своей странице Вы можете установить кнопку, при нажатии на которую пользователь добавлял бы ее в Избранное:

<FORM>
<BUTTON TYPE="SUBMIT" onClick="window.external.addFavorite('http://lenininc.narod.ru/', ' LENIN INC'); return false;">Добавить в избранное </BUTTON>
</FORM>

В вдие ссылки эта кнопка будет выглядить так:

<A HREF="#nul" onClick="window.external.addFavorite('http://lenininc.narod.ru/', ' LENIN INC'); return false;">Добавить в избранное </A>

Измените значение http://lenininc.narod.ru/ на свой адрес, значение LENIN INCна имя вашего сайта.

Сделать страницу стартовой.Вверх
Следующий код реализует кнопку, при нажатии на которую страница делаеться стартовой:

<FORM>
<BUTTON TYPE="SUBMIT" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://lenininc.narod.ru/'); return false;">Сделать стартовой </BUTTON>
</FORM>

В вдие ссылки:

<A HREF="#nul" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://lenininc.narod.ru/'); return false;"> Сделать стартовой </A>

Измените значение http://lenininc.narod.ru/ на свой адрес.

История посещений (Назад/Вперед).Вверх
Использование объекта History дает возможность возвращаться на URL, который был посещен перед этим, и переходить на URL, посещенный перед этим. Список посещенных URL содержится в меню go Обозревателя. Делается это, используя методы объекта History: back() и forward().

<FORM>
<INPUT TYPE="button" VALUE=" Назад " ONCLICK="history.back(-1)">
<INPUT TYPE="button" VALUE=" Вперед " ONCLICK="history.forward(1)">
</FORM>

В виде ссылок эти кнопки будут выглядеть так:

<A HREF="javascript:history.back()"> Назад </A>
<A HREF="javascript:history.forward()"> Вперед </A>

Если необходимо вернуться на несколько позиций списка меню, то используется метод go(), в скобках указывается число:

Отрицательноe, напр. (-2)- на сколько шагов вернутся Назад
Положительное, напр, (2)- на сколько шагов вернутся Вперед.

Например, для возврата на три позиции назад указывается go(-3):

<A HREF="javascript:history.go(-3)"> Назад</A>

Если нет посещенных перед этим URL, то это работать не будет.

Перезагрузка страницы.Вверх
Данная программа перезагружает текущую страницу.

<FORM>
<input TYPE="button" VALUE=" Перезагрузить " ONCLICK="ReloadButton()">
<script>
function ReloadButton()
{
location.href="Buttons.htm ";
}
</script>
</FORM>

Измените документ Buttons.htm на свой.

Кнопка-ссылка.Вверх
Нажав такую кнопку, пользователь перейдет по указаной ссылке. В данном случае кнопка работает как обычная гипперссылка.

<FORM>
<input TYPE="button" VALUE=" LENIN INC " ONCLICK="HomeButton()"> <script>
function HomeButton()
{
location.href="http://lenininc.narod.ru/";
}
</script>
</FORM>

Измените URL http://lenininc.narod.ru/ на свой.

Сообщение в окне.Вверх
При нажатии на такую кнопку будет выведено окно с любым Вашим сообщением.

<FORM>
<input TYPE="button" VALUE=" Сообщение" ONCLICK="AlertButton()">
<script>
function AlertButton()
{
window.alert("Введите здесь текст своего сообщения");
}
</script>
</FORM>

Сообщение в статусной строке.Вверх
Когда пользователь нажмет такую кнопку в строке состояния обозревателя будет отображен определенный текст.

<FORM>
<input TYPE="button" VALUE=" Сообщение " ONCLICK="StatusButton()">
<script>
function StatusButton()
{
window.status="Введите здесь текст своего сообщения ";
}
</script>
</FORM>

Изменение фонового цвета страницы.Вверх
С помощью такой кнопки пользователь сможет изменить фоновый цвет страницы.

<FORM>
<input TYPE="button" VALUE=" Изменить цвет " onClick="BgButton()">
<script>
function BgButton(){
if (document.bgColor=='#adff2f')
{document.bgColor='#ffffff';}
else{document.bgColor='#adff2f';}
}
</script>
</FORM>

Нажав кнопку, цвет фона измениться на салатовый - adff2f, повторное нажатие вернет белый фоновый цвет - #ffffff и т.д. Измените шестнадцатиричное значения цвета #adff2f на нужное Вам (в двух местах) и обязательно наберите его в нижмнем регистре.

Открытие нового окна.Вверх
Вы можете кнопкой открывать новые окна, которые могут содержать только определенные Вами элементы управления.

<FORM>
<input TYPE="button" VALUE=" Открыть окно " ONCLICK="NewWindow()">
<script>
function NewWindow()
{
window.open("URL ","","Parameter ");
}
</script>
</FORM>

URL - URL откpываемого pесypса. Может быть ссылкой на любой понимаемый Обозревателем докyмент (в том числе и на локальной машине).

Parameter - паpаметpы нового окна (в виде текстовой стpоки). Записываются без пробелов чеpез запятyю:

Toolbar=[yes|no|1|0] - Присутствие Панели инструментов
Location=[yes|no|1|0] - Присутствие адреса
Directories=[yes|no|1|0] - Присутствие ссылок
Status=[yes|no|1|0] - Присутствие статустной строки
Menubar=[yes|no|1|0] - Присутствие меню
Scrollbars=[yes|no|1|0] - Присутсвие прокрутки
Resizable=[yes|no|1|0]< - Изменение размера окна мышью
Width=[pазмеp в пикселях] - Высота окна
Height=[pазмеp в пикселях] - Ширина окна

Можно использовать значения присутсвия элемента - yes или 1, отсутствие элемента - no или 0. В следующем примере выводится окно размерами 600Х400 пикселей с присутствием всех элементов управления:

<FORM>
<input TYPE="button" VALUE=" Открыть новое окно " ONCLICK="NewWindow()">
<script>
function NewWindow()
{
window.open("URL ",""," Toolbar=1,Location=1,Directories=1,Status=1, Menubar=1,Scrollbars=1,Resizable=1,Width=600,Height=400 ");
}
</script>
</FORM>

Посмотрите статью Новые окна. Там приводится HTML cоздатель ссылок для открытия новых окон с определенными параметрами.

Просмотр в виде HTML.Вверх
При нажатии на такую кнопку открывается текущий документ в Блокноте пользователя.

<FORM>
<INPUT TYPE="button" NAME="view" VALUE=" Просмотр в виде HTML " OnClick="window.location="view-source:" +window.location.href">
</FORM>

Печать страницы.Вверх
С помощью такой кнопки пользователь может вызвать окно Печать с параметрами настройки печати и произвести распечатку текущей страницы на принтере.

<FORM>
<INPUT NAME="print" TYPE="button" VALUE=" Печать страницы " ONCLICK="varitext()">
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</FORM>

Украшательства.Вверх
С помощью следующей конструкции Вы можете поместить в кнопку любое изображение. Для примера я взял кнопку Добавить в избранное и встроил в нее изображение Favorite.gif.

<FORM>
<BUTTON TYPE="SUBMIT" onClick="window.external.addFavorite('http://lenininc.narod.ru/', 'LENIN INC'); return false;">
<IMG SRC="Favorite.gif" WIDTH=16 HEIGHT=16 ALIGN="ABSMIDDLE" BORDER=0"> Добавить в Избранное </BUTTON>
</FORM>

Вместо Favorite.gif введите имя своего графического файла, укажите его размеры и окантовку (елементы WIDTH, HEIGHT, BORDER соответственно).

<FORM>
<BUTTON TYPE="SUBMIT" onClick="window.external.addFavorite('http://lenininc.narod.ru/', 'LENIN INC'); return false;">
<IMG SRC="Favorite.gif" WIDTH=16 HEIGHT=16 ALIGN="ABSMIDDLE" BORDER=0"><SPAN STYLE="font-size: 8pt"> Добавить в Избранное </SPAN></BUTTON>
</FORM>

Размер шрифта устанавливатся изменением значения атрибута font-size:Измените его, например, на 12pt (pt - проценты).

Добавив еще два элемента в код кнопки можно добиться ее подсвечивания при подведении курсора мыши:

<FORM>
<BUTTON TYPE="SUBMIT" onClick="window.external.addFavorite('http://lenininc.narod.ru/', 'LENIN INC'); return false;" onMouseOver="style.color='blue'" onMouseOut="style.color='black'">
<IMG SRC="Favorite.gif" WIDTH=16 HEIGHT=16 ALIGN="ABSMIDDLE" BORDER=0"><SPAN STYLE="font-size: 8pt">Добавить в Избранное </SPAN></BUTTON>
</FORM>

Синтаксис:
onMouseOver="style.color='blue '" - цвет текста, когда курсор мыши подводится к кнопке.
onMouseOut="style.color='black '" - цвет текста, когда курсор мыши покидает кнопку.