Версия для слабовидящих
Шаблон:Телефонный справочник — различия между версиями
Материал из Ярославский педагогический университет
Ya.repin (обсуждение | вклад) |
Ya.repin (обсуждение | вклад) |
||
Строка 1: | Строка 1: | ||
− | |||
<html> | <html> | ||
<head> | <head> | ||
− | |||
<style> | <style> | ||
− | |||
/* Стиль вкладок */ | /* Стиль вкладок */ | ||
Строка 42: | Строка 39: | ||
border-top: none; | border-top: none; | ||
} | } | ||
− | |||
− | |||
− | |||
− | + | /* Стиль содержимого аккордеон */ | |
+ | .collapsible { | ||
+ | background-color: #EEEEFF; | ||
+ | color: black; | ||
+ | cursor: pointer; | ||
+ | padding: 18px; | ||
+ | width: 100%; | ||
+ | border: none; | ||
+ | text-align: left; | ||
+ | outline: none; | ||
+ | font-size: 15px; | ||
+ | } | ||
− | + | .active, .collapsible:hover { | |
+ | background-color: #EEEEFF; | ||
+ | } | ||
− | + | .collapsible:after { | |
− | + | content: '\002B'; | |
− | + | color: black; | |
− | + | font-weight: bold; | |
− | + | float: right; | |
− | + | margin-left: 5px; | |
− | + | } | |
− | + | .active:after { | |
− | + | content: "\2212"; | |
− | + | } | |
− | + | /* Стиль содержимого таблица */ | |
− | + | .content { | |
− | + | padding: 0 18px; | |
− | + | max-height: 0; | |
− | + | overflow: hidden; | |
− | + | transition: max-height 0.2s ease-out; | |
+ | background-color: white; | ||
+ | } | ||
− | + | .tr,td { | |
− | + | border: 1px solid #ddd; | |
− | + | text-align: center; | |
− | + | padding: 11px; | |
− | + | } | |
− | + | ||
− | + | .th { | |
− | + | border: 1px solid #ddd; | |
− | + | padding-top: 8px; | |
− | + | padding-bottom: 8px; | |
− | + | text-align: center; | |
+ | background-color: #EEEEFF; | ||
+ | color: black; | ||
+ | } | ||
− | + | </style> | |
− | + | </head> | |
− | + | <body> | |
− | + | ||
− | + | ||
− | + | ||
+ | <h1></h1> | ||
− | + | <p>Нажмите на кнопки внутри вкладочного меню:</p> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <div class="tab"> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_1')">А</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_2')">Б</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_3')">В</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_4')">Г</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_5')">Д</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_6')">Е</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_7')">Ё</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_8')">Ж</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_9')">З</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_10')">И</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_12')">К</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_13')">Л</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_14')">М</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_15')">Н</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_16')">О</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_17')">П</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_18')">Р</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_19')">С</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_20')">Т</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_21')">У</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_22')">Ф</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_23')">Х</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_24')">Ц</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_25')">Ч</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_26')">Ш</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_27')">Щ</button | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_31')">Э</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_32')">Ю</button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'telsp_33')">Я</button> | ||
+ | |||
</div> | </div> | ||
− | <div id=" | + | <div id="telsp_1" class="tabcontent"> |
− | + | ||
− | + | ||
</div> | </div> | ||
− | + | <div id="telsp_2" class="tabcontent"> | |
− | <div id=" | + | |
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
− | + | <div id="telsp_3" class="tabcontent"> | |
− | + | ||
− | <div id=" | + | |
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
− | + | <div id="telsp_4" class="tabcontent"> | |
− | <div id=" | + | </div> |
+ | <div id="telsp_5" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_6" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_7" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_8" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_9" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_10" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_12" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_13" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_14" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_3" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_15" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_16" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_17" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_18" class="tabcontent"> | ||
<h3>Репина Алевтина Валентиновна</h3> | <h3>Репина Алевтина Валентиновна</h3> | ||
<p>Научно-методический центр «Новая дидактика»</p> | <p>Научно-методический центр «Новая дидактика»</p> | ||
<p>Должность:<strong>Руководитель центра</strong></p> | <p>Должность:<strong>Руководитель центра</strong></p> | ||
<p>Телефон: <strong>8-906-525-20-45</strong></p> | <p>Телефон: <strong>8-906-525-20-45</strong></p> | ||
− | <a href="mailto: | + | <a href="mailto: ">email:</a> |
+ | </div> | ||
+ | <div id="telsp_19" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_20" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_21" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_22" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_23" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_24" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_25" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_26" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_27" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_31" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_32" class="tabcontent"> | ||
+ | </div> | ||
+ | <div id="telsp_32" class="tabcontent"> | ||
</div> | </div> | ||
+ | |||
+ | <h1>Информация по подразделениям</h1> | ||
+ | <h5></h5> | ||
+ | <button class="collapsible">Ректорат</button> | ||
+ | <div class="content"> | ||
+ | <div style="overflow-x:auto;"> | ||
+ | <table> | ||
+ | <div itemprop="eduAccred"> | ||
+ | <tr> | ||
+ | <th><strong>Фамилия имя отчестово</strong></th> | ||
+ | <th><strong>Контаткный телефон</strong></th> | ||
+ | <th><strong>Должность</strong></th> | ||
+ | <th><strong>Электронная почта</strong></th> | ||
+ | </div> | ||
+ | <div itemprop="eduAccred"> | ||
+ | <tr> | ||
+ | <td width="30%"></td> | ||
+ | <td width="30%"></td> | ||
+ | <td width="20%"></td> | ||
+ | <td width="20%"></td> | ||
+ | </tr> | ||
+ | </div> | ||
+ | </table> | ||
+ | </div> | ||
+ | </div> | ||
+ | <button class="collapsible">Ректорат</button> | ||
+ | <div class="content"> | ||
+ | <div style="overflow-x:auto;"> | ||
+ | <table> | ||
+ | <div itemprop="eduAccred"> | ||
+ | <tr> | ||
+ | <th><strong>Фамилия имя отчестово</strong></th> | ||
+ | <th><strong>Контаткный телефон</strong></th> | ||
+ | <th><strong>Должность</strong></th> | ||
+ | <th><strong>Электронная почта</strong></th> | ||
+ | </div> | ||
+ | <div itemprop="eduAccred"> | ||
+ | <tr> | ||
+ | <td width="30%"></td> | ||
+ | <td width="30%"></td> | ||
+ | <td width="20%"></td> | ||
+ | <td width="20%"></td> | ||
+ | </tr> | ||
+ | </div> | ||
+ | </table> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
Строка 150: | Строка 252: | ||
<script> | <script> | ||
+ | var coll = document.getElementsByClassName("collapsible"); | ||
+ | var i; | ||
+ | |||
+ | for (i = 0; i < coll.length; i++) { | ||
+ | coll[i].addEventListener("click", function() { | ||
+ | this.classList.toggle("active"); | ||
+ | var content = this.nextElementSibling; | ||
+ | if (content.style.maxHeight){ | ||
+ | content.style.maxHeight = null; | ||
+ | } else { | ||
+ | content.style.maxHeight = content.scrollHeight + "px"; | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | $(document).ready(function() { | ||
+ | $('.block').on('click', '.extremum-click', function() { | ||
+ | $(this).toggleClass('red').siblings('.extremum-slide').slideToggle(1); | ||
+ | }); | ||
+ | }); | ||
+ | |||
function openCity(evt, cityName) { | function openCity(evt, cityName) { | ||
var i, tabcontent, tablinks; | var i, tabcontent, tablinks; | ||
Строка 164: | Строка 286: | ||
} | } | ||
</script> | </script> | ||
− | + | ||
</body> | </body> | ||
</html> | </html> |
Версия 15:01, 14 октября 2021
Нажмите на кнопки внутри вкладочного меню:
Э
Репина Алевтина Валентиновна
Научно-методический центр «Новая дидактика»
Должность:Руководитель центра
Телефон: 8-906-525-20-45
email:Информация по подразделениям
Фамилия имя отчестово | Контаткный телефон | Должность | Электронная почта | ||||
---|---|---|---|---|---|---|---|
Фамилия имя отчестово | Контаткный телефон | Должность | Электронная почта | ||||
---|---|---|---|---|---|---|---|