Пхп код сканирует папку на текстовые документы и выводит названия текстовых документов снизу - во "вкладках".
Как сделать спомощью JS так, чтобы при нажатии на "вкладку" (div) содержание текстового документа показывалось в текстовом поле - <textarea name="content">Открытая вкладка</textarea>?
А так же, если бы я нажал кнопку "свернуть", то текст просто стирался с тестового поля, а если я бы нажимал кнопку "закрыть", то удалялся текстовый файл из папки.
В яваскрипте я нуб.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<table>
<tr>
<td class="capLeft">
<form action="" method="post">
<input type="text" name="url" value="http://">
<input type="Submit" value="Открыть" name="open" id="open">
</td>
<td class="capRight">
<input type="Submit" value="Свернуть" name="collapse" id="collapse">
<input type="Submit" value="Закрыть" name="close" id="close">
</form>
</td>
</tr>
<tr>
<td class="content" colspan="2">
<textarea name="content">Открытая вкладка</textarea>
</td>
</tr>
<tr>
<td class="tab" colspan="2">
<?php
foreach ($scanTabs as $key => $value) {
if ($value != '.' && $value != '..') {
echo '<div class="divTab">' . $value . '</div>';
}
}
?>
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
</script>
Вот ЦСС:
|
Код:
|
* {
padding: 0px;
margin: 0px;
}
table {
border-collapse: collapse;
width: 600px;
margin: auto;
}
td {
border: 1px solid black;
}
td.capLeft {
/*height: 25px;*/
text-align: left;
padding-left: 7px;
border-right: none;
}
td.capRight {
/*height: 25px;*/
text-align: right;
padding-right: 7px;
border-left: none;
}
td.content {
height: 200px;
text-align: center;
word-wrap: break-word;
}
td.content textarea {
height: 200px;
width: 600px;
}
td.tab {
height: 25px;
text-align: left;
/*padding-left: 10px;*/
}
div.divTab {
margin: 5px;
border: 1px solid black;
display: inline-block;
cursor: pointer;
}
div.divTab:hover {
background-color: #f4f4f4;
}
.selected {
background-color: #dcdcdc;
} |