<html><head><script type="text/javascript" src="./jquery-1.6.4.min.js"></script><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;} .content { color: #ffffff;}.content h3 { font-size: 150%;}.content a, a:active, a:visited { color: #ffffff; text-decoration: none; border-bottom: 1px dashed white; font-face: sans-serif;}.content a:hover { border-bottom: 1px solid white; text-decoration: none;}.tt { font-weight: bold; text-align: left; margin-bottom: 0px; padding-bottom: 0px; margin-top: 0px; padding-top: 0px; margin-left: 200px;}.tt span { font-weight: normal;}.box {display:none} .box.visible {display:block} .tabs {background-color: #7f7f7f;} .tabs li {float:left; list-style: none; margin-left: 10px; size: 12px; cursor: pointer; text-decoration: underline;} .current {background-color: #aaaa00;}</style></head><body><script type="text/javascript">//On load page, init the timer which check if the there are anchor changes each 300 ms$().ready(function(){ setInterval("checkAnchor()", 300);});var currentAnchor = null;//Function which chek if there are anchor changes, if there are, sends the ajax petitionfunction checkAnchor(){ //Check if it has changes if(currentAnchor != document.location.hash){ currentAnchor = document.location.hash; //if there is not anchor, the loads the default section if(!currentAnchor) query = "none"; else { var splits = currentAnchor.substring(1).split('&'); var query = splits[0]; } //Send the petition $('.content').hide(); $('#'+query).show(); }} </script><div class="content" id="none"> <h3>Обо мне</h3> <div class="section"> <ul class="tabs"> <li class="current">Общее</li> <li>Интересы</li> <li>Цитаты</li> <li>Ссылки в социальных сетях</li> </ul> <div style="clear: both"></div> <div class="box visible"><p class="tt">Возраст: <span>22 (скорпион)</span></p><p class="tt">Семейное положение: <span>холост</span></p><p class="tt">Статус: <span>студент</span></p><p class="tt">Любимые музыкальные группы: <span>Психея, Amatory, E-SEX-T, 7000$, Стигмата, Слот, Catharsis, Доступ Закрыт, Эпидемия, KoЯN, Slipknot, Soul Fly, Stone Sour, Static-X, Deftones, Metallica, TOL, Within Temptation, Noisia, Noize MC, Deform, Nancial, Horizon 8, Hatebreed, Dragonforce, Guf, reAnima, Autoscan, Korea, Tess, Meaning Beside, Disturbed, As I Lay Dying, Blood Stain Child, Papa Roach</span></p><p class="tt">Любимые фильмы: <span>Матрица, Звёздные войны, Страх и ненависть в Лас-Вегасе, Дух времени, Полуночный экспресс</span></p><p class="tt">Любимые игры: <span>Counter-Strike, Quake III, Prince of Persia, Doom II, Quake II, Lineage, Left 4 Dead, Crysis</span></p> </div> <div class="box"><ul><li>Музыка <ol><li>Бас-гитара</li><li>Гитара</li><li>Электронные средства</li><li>Ударные инструменты</li></ol></li><li>Программирование <ol><li>PHP</li><li>Python</li><li>HTML/JavaScript/jQuery</li><li>C/C++</li></ol></li><li>Компьютеры</li><li>Психология</li><li>Медитации</li></ul></div><div class="box">When the power of love overcomes the love of power, the world will know peace.<br><br>Итерация от человека. <br>Рекурсия - от Бога.<br><br>Когда я хотел, чтобы бензин стоил меньше доллара - я не это имел ввиду !!!<br><br>They must find it difficult... Those who have taken authority as the truth, rather than truth as the authority.<br><br>-Ну неужели нет альтернативы компьютеру?<br>-ну почему.. есть... только от неё сильно страдает печень...<br><br>I'm not always right, I'm just never wrong<br><br>Software is like sex, it's better when it's free.<br><br>Load universe into cannon. Aim at brain. Fire.<br><br>Свобода информации - свобода личности.<br><br>I believe that unarmed truth and unconditional love will have the final word in reality.<br><br>Метролог вам скажет, что после килограмма идёт тонна.<br>Но истиный айтишнег знает, что после килограмма идёт метр, затем - гектар, и только после гектара - тонна.<br><br>Любовь - это бинарное отношение на множестве людей, выражения которого не содержат предикатов<br><br>"Сижу я, значит, в ящике, ни жив, ни мёртв... " (из воспоминаний кота Шрёдингера)<br><br>Чаще всего парень ждет от девушки всего один бит информации (Да или Нет), а получает гигабайты<br><br> Многие из вас знакомы с достоинствами программиста. Их всего три, и это: лень, нетерпеливость и высокомерие.<br>- Larry Wall<br><br>Если бы водителей принимали на работу так же, как программистов, то выглядело это примерно так.<br>Вакансия: водитель.<br>Требования: профессиональные навыки в управлении легковыми и грузовыми автомобилями, троллейбусами, трамваями, поездами метрополитена и фуникулера, экскаваторами и бульдозерами, спецмашинами на гусеничном ходу, боевыми машинами пехоты и современными легкими/средними танками, находящимисяна вооружении стран СНГ и НАТО.<br>Навыки раллийного и экстремального вождения обязательны. Опыт управления болидами <Формулы-1> - приветствуется. Знания и опыт ремонта поршневых и роторных двигателей, автоматических и ручных трансмиссий, систем зажигания, антиблокировочных систем, навигационных систем и автомобильных аудиосистем ведущих поизводителей - обязательны. Опыт проведения кузовных и окрасочных работ - приветствуется. Претенденты должны иметь сертификаты Mercedes, BMW, а также справки об участии в крупных международных ралли не более чем двухлетней давности.<br>Зарплата: 1500-2500 рублей, определяется по результатам собеседования.<br><br>Наплевать мне на Каддаффи,<br>Наплевать на Фукусиму,<br>Саша Грей ушла из порно -<br>Жить теперь невыносимо.<br><br>Если бы Господь Бог не хотел, чтобы человек мастурбировал, он сделал бы его руки короче. (с) Джордж Карлин<br><br>Именно сегодня не злись.<br>Именно сегодня не беспокойся.<br>Почитай учителей и старших.<br>Помни о своем духовном пути.<br>Будь благодарен всему живому.<br>(c) Микао Усуи 臼井 甕男<br><br>Никого не любить - это величайший дар, делающий тебя непобедимым, т.к. никого не любя, ты лишаешься самой страшной боли. (с) А. Гитлер<br><br>Don't drink and drive. Take LSD and teleport</div><div class="box"><ul><li><a href="http://vkontakte.ru/mrxak" target="_blank">вКонтакте</a><li><a href="http://facebook.com/mrxak" target="_blank">FаceBook</a><li><a href="http://gplus.to/mrxak" target="_blank">Google+</a></ul></div></div></div><div class="content" id="bio"> <h3>Биография</h3> Родился 28 октября 1988 года в г. <a href="http://ru.wikipedia.org/wiki/%D0%9E%D0%B1%D0%BD%D0%B8%D0%BD%D1%81%D0%BA" target="_blank">Обнинске</a> Калужской области. В 1996 году поступил в МСОУ Школа №13, после чего, закончив 3 класса, перешёл в МОУ "Гимназия", где проучился до 9<sup>го</sup> класса. После 9го класса ушёл в МОУ Лицей ФТШ - Физико-Техническая Школа, который закончил в 2006 году. Параллельно с учёбой участвовал в различных конкурсах программирования и олимпиадах (школьных, городских, областных, региональных) по астрономии, математике, химии и информатике. Помимо основной школы закончил музыкальную школу №2 г. Обнинска по специальности "Хоровое пение". В 2006 году поступил в МИРЭА на специальность 220201 Управление и информатика в технических системах. Здесь проучился до 2го курса, параллельно устроившись на работу в ГМЦ Росстата. После 2го курса перевёлся на кафедру ИТС на специальность 230201 Информационные системы и технологии, где проучился 3й курс и 1й семестр 4го. После чего по состоянию здоровья ушёл в академический отпуск, из которого вышел в 2010 году, восстановившись на эту же специальность. Здесь и обучаюсь по настоящее время.</div><div class="content" id="work"> <h3>Работа</h3> <p> В настоящее время являюсь сотрудником <a href="http://mrrc.obninsk.ru" target="_blank">Медицинского Радиологического Научного Центра Минздравсоцразвития России</a>, который состоит из клинических и исследовательских подразделений. </p><p>В научных подразделениях Центра разрабатывают и реализуют новейшие наукоемкие медицинские технологии, способствующие решению ряда социально важных проблем отечественного здравоохранения. Ученым традиционно удается поддерживать высокий уровень фундаментальных исследований, многие результаты которых превращаются в основу новых методов диагностики и лечения.</p><p>Центр оказывает высококвалифицированную диагностическую, консультативную и лечебную помощь пациентам с онкологическими и общесоматическими заболеваниями.</p><p>В штате центра состоит 1779 человек. В их числе 352 научных сотрудника, включая 60 докторов (из них 26 профессоров) и 172 кандидата наук, представляющих различные, но успешно интегрированные в рамках решаемых задач, области знаний: медицину, биологию, физику, математику, технику, химию, фармацию и др.</p><p>На базе Центра состоялось 5 международных симпозиумов, 2 телемедицинские конференции с Гонконгом и Женевой, 5 международных учебных курсов, 15 рабочих совещаний по международным исследовательским программам. Более 70 сотрудников повысили свою квалификацию в ведущих зарубежных исследовательских и медицинских учреждениях.</p> </div><div class="content" id="free"> <h3>Отдых</h3> Основное хобби в свободное от учёбы и работы время - музыка в любых её проявлениях. Я слушаю различные музыкальные стили, посещаю концерты групп различной направленности, а также сам играю в нескольких коллективах на различных инструментах. <br /> Вторым хобби является фотография, правда заниматься этим начал недавно и пока не достиг таких успехов, как в предыдущем случае. <br /></div><script type="text/javascript">$(function() { $('ul.tabs').delegate('li:not(.current)', 'click', function() { $(this).addClass('current').siblings().removeClass('current') .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150); });});</script></body></html>
Листинг 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, помимо всего прочего, видно, как стиль ссылок был перегружен и теперь они подчёркиваются не сплошной линий, а пунктиром.
