JqueryUI - Аккордеон

Accordion Widget в jQueryUI - это расширяемый и сворачиваемый держатель содержимого на основе jQuery, который разбит на разделы и, вероятно, выглядит как вкладки. jQueryUI предоставляет для этого метод accordion ().

Синтаксис

В accordion() метод может использоваться в двух формах -

$ (selector, context) .accordion (options) Метод
$ (selector, context) .accordion ("action", params) Метод

$ (selector, context) .accordion (options) Метод

Метод accordion (options) объявляет, что элемент HTML и его содержимое должны обрабатываться и управляться как меню аккордеона. Параметр options - это объект, который определяет внешний вид и поведение задействованного меню.

Синтаксис

$(selector, context).accordion (options);

Вы можете предоставить один или несколько вариантов за раз, используя объект Javascript. Если необходимо предоставить более одного варианта, вы разделите их запятой следующим образом:

$(selector, context).accordion({option1: value1, option2: value2..... });

В следующей таблице перечислены различные параметры, которые можно использовать с этим методом.


$( ".selector" ).accordion(
   { active: 2 }
);
$( ".selector" ).accordion(
   { animate: "bounceslide" }
);
$( ".selector" ).accordion(
   { collapsible: true }
);
$( ".selector" ).accordion(
   { disabled: true }
);
$( ".selector" ).accordion(
   { event: "mouseover" }
);
$( ".selector" ).accordion(
   { header: "h3" }
);
$( ".selector" ).accordion(
   { heightStyle: "fill" }
);
$( ".selector" ).accordion(
   { icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } }
);

Sr. No.	Вариант и описание
1	активный Указывает индекс меню, которое открывается при первом доступе к странице. По умолчанию его значение0, т.е. первое меню. Option - active Указывает индекс меню, которое открывается при первом доступе к странице. По умолчанию его значение0, т.е. первое меню. Это может быть типа - Boolean- Если установлено значение false , все панели будут свернуты. Для этого требуется, чтобы параметр разборки был истинным . Integer- Отсчитываемый от нуля индекс панели, которая активна (открыта). Отрицательное значение выбирает панели, идущие назад от последней панели. Syntax `$( ".selector" ).accordion( { active: 2 } );`
2	оживлять Этот параметр используется для настройки анимации смены панелей. По умолчанию его значение{}. Option - animate Этот параметр используется для настройки анимации смены панелей. По умолчанию его значение{}. Это может быть типа - Boolean- Значение false отключит анимацию. Number - Продолжительность в миллисекундах String - Имя замедления для использования с продолжительностью по умолчанию. Object - Настройки анимации со свойствами замедления и продолжительности. Syntax `$( ".selector" ).accordion( { animate: "bounceslide" } );`
3	складной Если для этого параметра установлено значение true , он позволяет пользователям закрывать меню, щелкнув по нему. По умолчанию щелчки заголовка открытой панели не действуют. По умолчанию его значениеfalse. Option - collapsible Если для этого параметра установлено значение true , он позволяет пользователям закрывать меню, щелкнув по нему. По умолчанию щелчки заголовка открытой панели не действуют. По умолчанию его значениеfalse. Syntax `$( ".selector" ).accordion( { collapsible: true } );`
4	отключен Если для этого параметра установлено значение true, аккордеон отключается. По умолчанию его значениеfalse. Option - disabled Если для этого параметра установлено значение true, аккордеон отключается. По умолчанию его значениеfalse. Syntax `$( ".selector" ).accordion( { disabled: true } );`
5	событие Этот параметр указывает событие, используемое для выбора заголовка аккордеона. По умолчанию его значениеclick. Option - event Этот параметр указывает событие, используемое для выбора заголовка аккордеона. По умолчанию его значениеclick. Syntax `$( ".selector" ).accordion( { event: "mouseover" } );`
6	заголовок Этот параметр указывает селектор или элемент, чтобы переопределить шаблон по умолчанию для идентификации элементов заголовка. По умолчанию его значение> li > :first-child,> :not(li):even. Option - header Этот параметр указывает селектор или элемент, чтобы переопределить шаблон по умолчанию для идентификации элементов заголовка. По умолчанию его значение> li > :first-child,> :not(li):even. Syntax `$( ".selector" ).accordion( { header: "h3" } );`
7	heightStyle Эта опция используется для управления высотой гармошки и панелей. По умолчанию его значениеauto. Option - heightStyle Эта опция используется для управления высотой гармошки и панелей. По умолчанию его значениеauto. Возможные значения - auto - Все панели будут установлены на высоту самой высокой панели. fill - Расширьте до доступной высоты в зависимости от высоты родительского элемента аккордеона. content - Каждая панель будет иметь высоту, равную ее содержанию. Syntax `$( ".selector" ).accordion( { heightStyle: "fill" } );`
8	иконки Этот параметр представляет собой объект, который определяет значки, которые будут использоваться слева от текста заголовка для открытых и закрытых панелей. Значок, используемый для закрытых панелей, указывается как свойство с именем header , тогда как значок, используемый для открытых панелей, указывается как свойство с именем headerSelected . По умолчанию его значение{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }. Option - icons Этот параметр представляет собой объект, который определяет значки, которые будут использоваться слева от текста заголовка для открытых и закрытых панелей. Значок, используемый для закрытых панелей, указывается как свойство с именем header , тогда как значок, используемый для открытых панелей, указывается как свойство с именем headerSelected . По умолчанию его значение{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }. Syntax `$( ".selector" ).accordion( { icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } } );`

В следующем разделе будет показано несколько рабочих примеров функциональности виджета «аккордеон».

Функциональность по умолчанию

В следующем примере демонстрируется простой пример функциональности виджета «аккордеон» без передачи параметров в accordion() метод.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-1" ).accordion();
         });
      </script>
      
      <style>
         #accordion-1{font-size: 14px;}
      </style>
   </head>

   <body>
      <div id = "accordion-1">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat.     
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat.     
            </p>
         </div>
      </div>
   </body>
</html>

Сохраним приведенный выше код в HTML-файл. accordionexample.htmи откройте его в стандартном браузере, поддерживающем javascript, вы также должны увидеть следующий вывод. Теперь вы можете поиграть с результатом -

Щелкните заголовки (вкладка 1, вкладка 2, вкладка 3), чтобы развернуть / свернуть содержимое, которое разбито на логические разделы, как и вкладки.

Использование разборных

В следующем примере демонстрируется использование трех вариантов. collapsible в виджете «аккордеон» JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-2" ).accordion({
               collapsible: true
            });
         });
      </script>
      
      <style>
         #accordion-2{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-2">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.      
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.      
            </p>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
   </body>
</html>

Здесь мы установили для сворачиваемого значение true . Щелкните заголовок аккордеона, это позволяет свернуть активный раздел.

Использование heightStyle

В следующем примере демонстрируется использование трех вариантов. heightStyle в виджете «аккордеон» JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-3" ).accordion({
               heightStyle: "content"
            });
            $( "#accordion-4" ).accordion({
               heightStyle: "fill"
            });
         });
      </script>
      
      <style>
         #accordion-3, #accordion-4{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <h3>Height style-content</h3>
      <div style = "height:250px">
         <div id = "accordion-3">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua. 
               </p>
            </div>
         </div>
      </div><br><br>
      
      <h3>Height style-Fill</h3>
      <div style = "height:250px">
         <div id = "accordion-4">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua. 
               </p>
            </div>
         </div>
      </div>
   </body>
</html>

Здесь у нас есть два аккордеона, у первого из них параметр heightStyle установлен на content , что позволяет панелям аккордеона сохранять свою исходную высоту. Второй аккордеон имеет параметр heightStyle для заполнения , скрипт автоматически установит размеры аккордеона на высоту его родительского контейнера.

$ (selector, context) .accordion ("action", params) Метод

Метод « аккордеона» ("действие", параметры) может выполнять действие с элементами аккордеона, такое как выбор / отмена выбора меню аккордеона. Действие указывается в виде строки в первом аргументе (например, «отключить» отключает все меню). Ознакомьтесь с действиями, которые можно передать, в следующей таблице.

Синтаксис

$(selector, context).accordion ("action", params);;

В следующей таблице перечислены различные действия, которые можно использовать с этим методом.


$(".selector").accordion("destroy");
$(".selector").accordion("disable");
$(".selector").accordion("enable");
var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
var options = $( ".selector" ).accordion( "option" );
$( ".selector" ).accordion( "option", "disabled", true );
$( ".selector" ).accordion( "option", { disabled: true } );
$(".selector").accordion("refresh");
var widget = $( ".selector" ).accordion( "widget" );

Sr. No.	Действие и описание
1	уничтожить Это действие полностью разрушает функциональность элемента «аккордеон». Элементы возвращаются в свое состояние до инициализации. Action - destroy Это действие полностью разрушает функциональность элемента «аккордеон». Элементы возвращаются в свое состояние до инициализации. Syntax `$(".selector").accordion("destroy");`
2	отключить Это действие отключает все меню. Никакие щелчки не учитываются. Этот метод не принимает никаких аргументов. Action - disable Это действие отключает все меню. Никакие щелчки не учитываются. Этот метод не принимает никаких аргументов. Syntax `$(".selector").accordion("disable");`
3	включить Это действие повторно активирует все меню. Снова учитываются клики. Этот метод не принимает никаких аргументов. Action - enable Это действие повторно активирует все меню. Снова учитываются клики. Этот метод не принимает никаких аргументов. Syntax `$(".selector").accordion("enable");`
4	option (optionName) Это действие получает значение текущего связанного элемента аккордеона с указанным optionName . Это принимает значение String в качестве аргумента. Action - option( optionName ) Это действие получает значение текущего связанного элемента аккордеона с указанным optionName . Это принимает значение String в качестве аргумента. Syntax `var isDisabled = $( ".selector" ).accordion( "option", "disabled" );`
5	вариант Это действие получает объект, содержащий пары ключ / значение, представляющие текущий хеш опций аккордеона. Action - option Это действие получает объект, содержащий пары ключ / значение, представляющие текущий хеш опций аккордеона. Syntax `var options = $( ".selector" ).accordion( "option" );`
6	option (optionName, значение) Это действие устанавливает значение параметра аккордеона, связанного с указанным optionName. Action - option( optionName, value ) Это действие устанавливает значение параметра аккордеона, связанного с указанным optionName. Syntax `$( ".selector" ).accordion( "option", "disabled", true );`
7	вариант (варианты) Это действие устанавливает один или несколько параметров для аккордеона. Action - option( options ) Это действие устанавливает один или несколько параметров для аккордеона. Где параметры - это карта пар параметр-значение для установки. Syntax `$( ".selector" ).accordion( "option", { disabled: true } );`
8	обновить Это действие обрабатывает все заголовки и панели, которые были добавлены или удалены непосредственно в DOM. Затем он пересчитывает высоту панелей-гармошек. Результаты зависят от содержимого и параметра heightStyle. Этот метод не принимает никаких аргументов. Action - refresh Это действие обрабатывает все заголовки и панели, которые были добавлены или удалены непосредственно в DOM. Затем он пересчитывает высоту панелей-гармошек. Результаты зависят от содержимого и параметра heightStyle. Этот метод не принимает никаких аргументов. Syntax `$(".selector").accordion("refresh");`
9	виджет Это действие возвращает элемент виджета «аккордеон»; тот, который аннотирован именем класса ui-accordion . Action - widget Это действие возвращает элемент виджета «аккордеон»; тот, который аннотирован именем класса ui-accordion . Syntax `var widget = $( ".selector" ).accordion( "widget" );`

пример

Теперь давайте посмотрим на пример, использующий действия из приведенной выше таблицы. В следующем примере демонстрируется использование метода option (optionName, value) .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-5" ).accordion({
               disabled: false
            });
            $("input").each(function () {
               $(this).change(function () {
                  if ($(this).attr("id") == "disableaccordion") {
                     $("#accordion-5").accordion("option", "disabled", true);
                  } else {
                     $("#accordion-5").accordion("option", "disabled", false);
                  }
               });
            });
         });
      </script>
      
      <style>
         #accordion-5{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-5">
         <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat. 
               </p>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat.      
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat.      
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
               </ul>
            </div>
         </div>
         <div style = "margin-top:30px">
            <input type = "radio" name = "disable" id = "disableaccordion"  
               value = "disable">Disable accordion
            <input type = "radio" name = "disable" id = "enableaccordion" checked 
               value = "enable">Enable accordion
         </div>
     </body>
</html>

Сохраним приведенный выше код в HTML-файл. accordionexample.htm и откройте его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод -

Здесь мы демонстрируем включение и отключение аккордеонов. Выберите соответствующие переключатели, чтобы отметить каждое действие.

Организация мероприятий на элементах аккордеона

В дополнение к методу аккордеона (параметры), который мы видели в предыдущих разделах, JqueryUI предоставляет методы событий, которые запускаются для определенного события. Эти методы событий перечислены ниже -

Sr. No.	Метод и описание события
1	активировать (событие, пользовательский интерфейс) Это событие запускается при активации меню. Это событие запускается только при активации панели, оно не запускается для начальной панели при создании виджета «аккордеон». Event - activate(event, ui) Это событие запускается при активации меню. Это событие запускается только при активации панели, оно не запускается для начальной панели при создании виджета «аккордеон». Где event имеет тип Event , а ui имеет тип Object . Возможные значения ui : newHeader - Объект jQuery, представляющий только что активированный заголовок. oldHeader - Объект jQuery, представляющий только что деактивированный заголовок. newPanel - Объект jQuery, представляющий только что активированную панель. oldPanel - Объект jQuery, представляющий только что деактивированную панель. Syntax `$( ".selector" ).accordion({ activate: function( event, ui ) {} });`
2	beforeActivate (событие, пользовательский интерфейс) Это событие запускается до активации панели. Это событие можно отменить, чтобы панель не активировалась. Event - beforeActivate(event, ui) Это событие запускается до активации панели. Это событие можно отменить, чтобы панель не активировалась. Где event имеет тип Event , а ui имеет тип Object . Возможные значения ui : newHeader - Объект jQuery, представляющий заголовок, который будет активирован. oldHeader - Объект jQuery, представляющий заголовок, который будет деактивирован. newPanel - Объект jQuery, представляющий панель, которая будет активирована. oldPanel - Объект jQuery, представляющий панель, которая будет деактивирована. Syntax `$( ".selector" ).accordion({ beforeActivate: function( event, ui ) {} });`
3	создать (событие, пользовательский интерфейс) Это событие запускается при создании аккордеона. Event - create(event, ui) Это событие запускается при создании аккордеона. Где event имеет тип Event , а ui имеет тип Object . Возможные значения ui : header - Объект jQuery, представляющий активный заголовок. panel - Объект jQuery, представляющий активную панель. Syntax `$( ".selector" ).accordion({ create: function( event, ui ) {} });`

пример

В следующем примере демонстрируется использование метода события в виджетах «аккордеон». В этом примере демонстрируется использование событий create , beforeActive и active .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-6" ).accordion({
               create: function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     "<b>Created</b><br>");
               },
					
               beforeActivate : function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     ", <b>beforeActivate</b><br>");
               },
					
               activate: function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     "<b>activate</b><br>");
               }
            });
         });
      </script>
      
      <style>
         #accordion-6{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-6">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat.    
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat.    
            </p>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
      <hr />
      <span id = result></span>
   </body>
</html>

Здесь мы отображаем текст внизу в зависимости от событий.