Функциональные кнопки.
- Главная
- >>>
- Раздел>>>java
- >>>
- Материал>>>
-
- Добавить в Избранное.
- Сделать страницу стартовой.
- История посещений (Назад/Вперед).
- Перезагрузка страницы.
- Кнопка-ссылка.
- Сообщение в окне.
- Сообщение в статусной строке.
- Изменение фонового цвета страницы.
- Открытие нового окна.
- Просмотр в виде HTML.
- Печать страницы.
-
Украшательства. (изображение в кнопке, изменение шрифта текста кнопки, подсвечивание).
Добавить в Избранное. Вверх На своей странице Вы можете установить кнопку, при нажатии на которую пользователь добавлял бы ее в Избранное:
<FORM> <BUTTON TYPE="SUBMIT" onClick="window.external.addFavorite('https://webteoretik.ru/', 'webteoretik'); return false;"> Добавить в избранное </BUTTON> </FORM>
В вдие ссылки эта кнопка будет выглядить так:
<A HREF="#nul" onClick="window.external.addFavorite('https://webteoretik.ru/', 'webteoretik'); return false;"> Добавить в избранное </A>
Измените значение https://webteoretik.ru/ на свой адрес, значение webteoretik.ru на имя вашего сайта.
Сделать страницу стартовой. Вверх Следующий код реализует кнопку, при нажатии на которую страница делаеться стартовой:
<FORM> <BUTTON TYPE="SUBMIT" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('https://webteoretik.ru/'); return false;"> Сделать стартовой </BUTTON> </FORM>
В вдие ссылки:
<A HREF="#nul" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('https://webteoretik.ru/'); return false;"> Сделать стартовой </A>
Измените значение https://webteoretik.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="https://webteoretik.ru/"; } </script> </FORM>
Измените URL https://webteoretik.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. Вверх При нажатии на такую кнопку открывается текущий документ в Блокноте пользователя.
<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"> <!-- Begin function varitext(text){ text=document print(text) } // End --> </SCRIPT> </FORM>
Украшательства. Вверх С помощью следующей конструкции Вы можете поместить в кнопку любое изображение. Для примера я взял кнопку Добавить в избранное и встроил в нее изображение Favorite.gif.
<FORM> <BUTTON TYPE="SUBMIT" onClick="window.external.addFavorite('http://webteoretik/', 'webteoretik'); 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('https://webteoretik.ru/', 'webteoretik'); 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('https://webteoretik.ru/', 'webteoretik'); 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'" - цвет текста, когда курсор мыши покидает кнопку.
Просмотров материала: 391
Добавить комментарий: