Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Уральский Федеральный университет им. Б.Н. Ельцина «УПИ»

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

1.1.Глава1_бакалавры.docx

Скачиваний:

Добавлен:

22.02.2015

Размер:

560.23 Кб

Скачать

☆

<<< < Предыдущая 12 / 82 3 4 5 6 7 8 > Следующая >>>

1.3. Разработка компонента «Аккордеон»

Описание …

Пример

См. мой локальный репозиторий Ajax: файлы accordion_style.css и accordion1.html.

Листинг 1.3a. Каскадные таблицы стилей CSS компонента «Аккордеон» (accordion_style.css)

body{

margin: 5px;

border: 0px;

padding: 0px

}

H1, .header1{

color: indigo;

font: italic bold 28pt/150% sans-serif;

}

.accordionComponent{

width: 30%;

margin: 10px;

border: solid indigo;

border-width: 2px 2px 2px 2px;

overflow: visible;

height: 500px

}

.accordionCurrentTitle{

background: indigo;

color: white;

font: italic bold 12pt/150% sans-serif;

border: outset 2px

}

.accordionOtherTitle{

background: indigo;

color: white;

font: italic bold 12pt/150% sans-serif;

border: outset 2px

}

.accordionCurrentPane{

border: none;

overflow: scroll;

display: block;

height:90%

}

.accordionOtherPane{

display: none

}

Листинг 1.3b. HTML-документ компонента «Аккордеон» (accordion1.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Ajax: accordion</title>

</head>

<body>

<h1>Компонент "Аккордеон"</h1>

Заголовок первого раздела

</div>

Первый раздел компонента "Аккордеон"

будет отображен при первоначальной загрузке страницы.

</div>

Заголовок второго раздела (click me)

</div>

Второй и последующие разделы компонента "Аккордеон"

срыты при первоначальной загрузке страницы.

</div>

Заголовок тртьего раздела

</div>

Для того, чтобы раскрылся очередной раздел компонента "Аккордеон"

необходимо кликнуть левой кнопкой мыши по заголовку раздела.

</div>

Заголовок четвертого раздела

</div>

Раздел может быть коротким и помещаться текущей панели. А может ...

... и не помещаться в текущей панели без скроллинга. Как этот раздел.

</div>

</body>

</html>

Рис.1.3. Компонент «Аккордеон» (пока в статике)

1.4. «Аккордеон» начинает играть в браузере

Описание …

Пример

См. мой локальный репозиторий Ajax: файлы accordion.js и accordion3.html.

Листинг 1.4a. Файл JavaScript компонента «Аккордеон» (accordion.js)

function accordionTitleOnClick() {

var accordion = this.parentNode;

var childs = accordion.childNodes;

var div = [];

for (var i = 0; i < childs.length; i++)

if (childs[i].tagName == "DIV")

div[div.length] = childs[i];

var currentTitle = null;

var currentPane = null;

var nextTitle = this;

var nextPane = null;

for (var i = 0; i < div.length; i ++)

if (div[i] == nextTitle)

nextPane = div[i+1]

for (var i = 0; i < div.length; i ++)

if (div[i].className == "accordionCurrentTitle")

currentTitle = div[i];

else if (div[i].className == "accordionCurrentPane")

currentPane = div[i];

currentTitle.className = "accordionOtherTitle";

nextTitle.className = "accordionCurrentTitle";

currentPane.className = "accordionOtherPane";

nextPane.className = "accordionCurrentPane";

nextPane.style.height = calculatePaneHeight(accordion)+"px";

}

function accordionAddBehivior(accordion) {

var accordion = document.getElementById(accordion);

accordion.className = "accordionComponent";

var childs = accordion.childNodes;

var div = [];

for (var i = 0; i < childs.length; i++)

if (childs[i].tagName == "DIV")

div[div.length] = childs[i];

for (var i = 0; i < div.length; i += 2){

div[i].onclick = accordionTitleOnClick;

if (i == 0){

div[i].className = "accordionCurrentTitle";

div[i+1].className = "accordionCurrentPane";

}

else{

div[i].className = "accordionOtherTitle";

div[i+1].className = "accordionOtherPane";

}

div[1].style.height = calculatePaneHeight(accordion)+"px";

}

function calculatePaneHeight(accordion){

var childs = accordion.childNodes;

var div = [];

for (var i = 0; i < childs.length; i++)

if (childs[i].tagName == "DIV")

div[div.length] = childs[i];

var paneHeight = accordion.clientHeight;

for (var i = 0; i < div.length; i += 2)

paneHeight -= div[i].offsetHeight;

return paneHeight;

}

Листинг 1.4b. HTML-файл компонента «Аккордеон» (accordion3.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Ajax: accordion</title>

</head>

<h1>Компонент "Аккордеон"</h1>

<div>Заголовок первого раздела</div>

<div>

Первый раздел компонента "Аккордеон"

будет отображен при первоначальной загрузке страницы.

</div>

<div>Заголовок второго раздела (click me)</div>

<div>

Второй и последующие разделы компонента "Аккордеон"

срыты при первоначальной загрузке страницы.

</div>

<div>Заголовок третьего раздела</div>

<div>

Для того, чтобы раскрылся очередной раздел компонента "Аккордеон"

необходимо кликнуть левой кнопкой мыши по заголовку раздела.

</div>

<div>Заголовок четвертого раздела</div>

<div>

Раздел может быть коротким и помещаться текущей панели. А может ...

... и не помещаться в текущей панели без скроллинга. Как этот раздел.

</div>

</body>

</html>

Рис.1.4. «Аккордеон» играет

<<< < Предыдущая 12 / 82 3 4 5 6 7 8 > Следующая >>>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
12.11.20181.63 Mб151. Металлические материалы.doc
#
05.08.201936.69 Кб21. Общие положения.docx
#
15.04.20191.99 Mб211. Теоретические основы БЖД.doc
#
22.02.2015199.68 Кб201. Этапы развития экономической теории.doc
#
22.11.2019211.46 Кб51.1 Конспект лекции №1. Психопатологии.doc
#
22.02.2015560.23 Кб511.1.Глава1_бакалавры.docx
#
22.11.2019124.42 Кб151.2 Конспект лекции №2 Одаренность.doc
#
29.07.201965.54 Кб141.2.Сущность и виды инноваций.doc
#
17.09.201966.05 Кб311.doc
#
22.02.2015379.24 Кб501.docx
#
22.02.201573.09 Кб41.docx