Несколько полезных JavaScript

confirm при нажатии на кнопку

Например кнопку “удалить” в файловой шаре.

echo "<td><button type=submit name=file_dlt value=\"$file\" onclick=\"return confirm('Вы уверены?')\">Удалить</button></td>";
Добавление строки в таблицу по OnClick

Стырено отсюда. Причем штука настолько крутая, что копирует весь html от строки родителя – значения полей (в моем кейсе хорошо), checkbox, связанные.

function addField(n)
{
  var tr = n.parentNode.parentNode.cloneNode(true);
  document.getElementById('devices').appendChild(tr);
}

echo "<td><input type=\"button\" onclick=\"addField(this)\" value=\"+\"/></td>";
Удаление СТРОКИ ИЗ ТАБЛИЦЫ ПО ONCLICK

Аналогично вышестоящему, только наоборот, удаление.

  function deleteField(o)
  {
   var p=o.parentNode.parentNode;
       p.parentNode.removeChild(p);
  }

echo "<td><input type=\"button\" onclick=\"deleteField(this)\" value=\"-\"/> </td>";
Пропадающий текст

Текст в форме, который пропадает после нажатия на текстовое поле формы.

<input type=text size=15 name=user_request value="Введите запрос" style="color: #777;" onfocus="if (this.value == 'Введите запрос') {this.value= ''; this.style.color = '#000';}" onblur="if (this.value == '') {this.value = 'Введите запрос'; this.style.color = '#777';}" />

JS скрипт чтобы спрятать контент со страницы по таймауту (в source code безусловно все равно можно посмотреть).

view-source:http://py4e-data.dr-chuck.net/known_by_Calah.html

<script>
  // http://stackoverflow.com/questions/20423322/simple-setting-off-display-none-block-with-javascript
  function showHide(id) {
  var el = document.getElementById(id);
  if( el && el.style.display == 'none')
  el.style.display = 'block';
  else
  el.style.display = 'none';
  }
  setTimeout('showHide("overlay");', 2500);
</script>
Подсветка строк таблицы

Подсветка строки таблицы при наведении и сохранение выделения после щелчка мыши. Кода много для поста, его можно посмотреть тут. Источник кода и подробное его описание (помимо того, что есть в комментах) можно посмотреть тут.

Для работы кода нужно так же проапдейтить css файл (либо сделать ссылку на новый) строками, в которых можно указать цвет заливки строки (например, зеленый при наведении и красный при фиксации):

Дальтоники, кстати, плохо различают разницу между близкими цветами - оранжевый/желтый например, поэтому лучше в интерфейсе делать что-то типо красный/зеленый.

.warning {font-family : sans-serif; font-size : 11px; color: red;}
.hoverRow { background-color: green; }
.clickedRow { background-color: red; }

Так же необходимо указать в шапке ссылку на файлы скрипта (и если необходимо на дополнительный css файл), в html table прописать id=graph, а после закрытия тега таблицы </table> вызвать функции js скрипта.

Полный код с генерацией таблицы, можно потыкать тут:

<html>
 <head>
 <title>Test</title>
 <link rel="stylesheet" type="text/css" href="hltable.css" media="screen" />
 </head>
 <body> 

<?php
echo "<script type=\"text/javascript\" src=\"hltable.js\"></script>\n";
echo "<table id=graph>";
 echo "<tr><th><b>Test1</b></th><th><b>Test2</b></th><th><b>Test3</b></th></tr>";
 echo "<tr><th>str1</th><th>str1</th><th>str1</th></tr>";
 echo "<tr><th>str2</th><th>str2</th><th>str2</th></tr>";
 echo "<tr><th>str3</th><th>str3</th><th>str3</th></tr>";
 echo "<tr><th>str4</th><th>str4</th><th>str4</th></tr>";
 echo "<tr><th>str5</th><th>str5</th><th>str5</th></tr>";
echo "</table>";
echo "<script type=\"text/javascript\">\n\t\thighlightTableRows(\"timespan\",\"hoverRow\",\"clickedRow\");\n</script>\n";
echo "<script type=\"text/javascript\">\n\t\thighlightTableRows(\"graph\",\"hoverRow\",\"clickedRow\");\n</script>\n";
?>

 </body>
</html>
Календарь

Код огромный, основной файл более 2к строк, около 100 файлов js (большая часть из них для поддержки мультиязычности).

Источник кода с подробным usage по кучи разных кейсов, простой пример на чистом html+js есть в index.php архива с кодом.

Leave a Reply