Листинг 5. Код основного фрейма
Интересных особенностей здесь две. Во-первых это осуществление якорной навигации, то есть вызов функции setTimeout и обработка текущего якоря (document.hash) документа. На основании изменения якоря программа решает, как из представленных блоков нужно показать. Как было видно в листинге левого меню left.html, при клике на ссылки с class=button2 вызывается код about.html#id. Таким образом внутри документа мы обрабатываем переданный якорь и показываем то, что нам надо. Извне это никак не видно и работает как будто бы обычный фрейм.
Рис. 3. Пример about.html#bio
Рис. 4. Пример about.html#work
Второй особенностью является обработка ссылок в главном окне «Обо мне». Скриншот окна:
Рис. 5. about.html стандартный вид
При нажатии на любой элемент ссылки сверху данный элемент становится активным (выделяется цветом), а текущий блок информации меняется на соответствующий.
Рис. 6. about.html Интересы
Рис. 7. about.html CSS перегрузка ссылок
А на рисунке 7, помимо всего прочего, видно, как стиль ссылок был перегружен и теперь они подчёркиваются не сплошной линий, а пунктиром.
Форма обратной связи form.Html
Рис. 8. Форма обратной связи
Здесь через CSS (рисунок 8) перегружены свойства формы, ответственные за её внешний вид. По нажатию на кнопку «Отослать» введённые данные показываются пользователю на экране, причём происходит это посредством генерации HTML через JavaScript (конкретно, через jQuery) без прописывания тегов напрямую.
Рис. 9. Обработанная форма обратной связи
<html>
<head>
</head>
<style type="text/css">
body {
background: url('mainBackground.png') 100% 100% no-repeat;
background-position: 0% 0%;
background-color: #9e4384;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
font-size: 14px;
}
h1 {
color: #ffe2ff;
font-size: 150%;
}
h3 {
color: #ffe2ff;
font-size: 125%;
}
label {
color: #ff0000;
}
input, textarea {
background-color: #0a2e3A;
width: 400px;
color: #00ff00;
border: #ffff00 1px dotted;
}
.btn {
background-color: #000000;
}
.radio {
width: 25px;
}
</style>
<script type="text/javascript" src="./jquery-1.6.4.min.js"></script>
<body>
<h1>Форма обратной связи</h1>
<div id="report">
</div>
<script type="text/javascript">
$(function() {
$('#report').hide();
$('#send').click(function(){
$('<h3 />').html('Ваш отзыва');
$('<p />').html('Имя: '+$('#name').attr('value')).appendTo($('#report'));
$('<p />').html('Фамилия: '+$('#surname').attr('value')).appendTo($('#report'));
$('<p />').html('Пол: '+$(":radio[name=gender]").filter(":checked").val()).appendTo($('#report'));
$('<p />').html('Отзыв: '+$('#reportField').attr('value')).appendTo($('#report'));
$('#report').show();
$('#form').hide();
});
});
</script>
<div id="form">
<TABLE border=3 bgcolor="pink">
<FORM action="mailto:salonf@googlemail.com">
<TR>
<TD><LABEL for="name">Имя: </label></td>
<TD><INPUT type="text" id="name"></td>
</tr>
<TR>
<TD><LABEL for="surname">Фамилия: </label></td>
<TD><INPUT type="text" id="surname"></td>
</tr>
<TR>
<TD><label for="gender">Пол: </label></td>
<td>
<INPUT type="radio" name="gender" id="gender" value="male" class="radio"> М
<INPUT type="radio" name="gender" value="female" class="radio"> Ж
</td>
</tr>
<tr>
<td><label for="reportField">Отзыв<label></td>
<td><textarea id="reportField"></textarea>
</td>
</tr>
<tr>
<TD colspan=2 align="center">
<INPUT type="button" id="send" value="Отослать" class="btn">
<INPUT type="reset" class="btn">
</td>
</tr>
</form>
</table>
</div>
</body>
</html>