1. Элементы языка
2. Окна с сообщениями
3. Кнопки
4. Вредности на java
5. События
6. Всплывающие окна
7. Запрещающие скрипты

• Добавить в Избранное.
• Сделать страницу стартовой.
• История посещений (Назад/Вперед).
• Перезагрузка страницы.
• Кнопка-ссылка.
• Сообщение в окне.
• Сообщение в статусной строке.
• Изменение фонового цвета страницы.
• Открытие нового окна.
• Просмотр в виде HTML.
• Печать страницы.
• Украшательства. (изображение в кнопке, изменение шрифта текста кнопки, подсвечивание).

  
  

  Добавить в Избранное.Вверх

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

  <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">
  <!-- Begin
  function varitext(text){
  text=document
  print(text)
  }
  // End -->
  </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 '" - цвет текста, когда курсор мыши покидает кнопку.

2007-2010г. © Все о сайте

Все права защищены. Полное или частичное копирование запрещено. Ну а если скопировали ссылка на сайт обязательна.