HTML-тип всплывающего окна Semantic-UI

создание веб-страницы с нуля с помощью HTML Изучение

Semantic UI — это интерфейсный фреймворк, созданный с помощью less и jQuery. Он используется для создания отзывчивых и привлекательных веб-интерфейсов. В этой статье мы увидим HTML-тип всплывающего окна Semantic UI.

Всплывающий модуль Semantic UI используется для отображения дополнительной информации об элементе. Всплывающее окно типа HTML может указывать HTML-код, который будет использоваться в качестве содержимого всплывающего окна. Содержимое HTML может быть указано как значение атрибута data-html всплывающего модуля.

Атрибуты HTML-типа всплывающего окна Semantic-UI:

  • data-html: этот атрибут содержит элементы HTML-кода, которые вы хотите отображать при наведении на элемент в виде всплывающего окна.

Синтаксис:

<div class="ui card" data-html="HTML-Code-Here">
    ...
</div>

Пример 1. В приведенном ниже примере показано, как добавить модуль рейтинга в виде HTML-содержимого всплывающего окна.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Popup HTML Type</title>
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
 
    <style>
        .ui.container {
            text-align: center;
        }
 
        h3#subheading {
            margin-top: 0px;
            margin-bottom: 30px;
        }
    </style>
</head>
 
<body>
    <div class="ui container">
        <div>
            <h1 style="color: green">GeeksforGeeks</h1>
            <h3 id="subheading">
              Semantic UI - Popup HTML Type
            </h3>
        </div>
 
        <div class="ui button"
             data-html="<div class='ui star rating'>
                <i class='active icon'></i>
                <i class='active icon'></i>
                <i class='active icon'></i>
                <i class='active icon'></i>
                <i class='active icon'></i>
            </div>" data-position="bottom center">
            Hover to see rating.
        </div>
    </div>
 
    <script>
        $(".ui.button").popup();
    </script>
</body>
 
</html>

Пример 2. В приведенном ниже примере показано использование изображения в качестве содержимого всплывающего окна.

Читайте также:  Роль смарт-контрактов в государственном секторе

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Popup HTML Type</title>
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
 
    <style>
        .ui.container {
            text-align: center;
        }
 
        h3#subheading {
            margin-top: 0px;
            margin-bottom: 30px;
        }
    </style>
</head>
 
<body>
    <div class="ui container">
        <div>
            <h1 style="color: green">GeeksforGeeks</h1>
            <h3 id="subheading">
              Semantic UI - Popup HTML Type
            </h3>
        </div>
 
        <div class="ui button"
             data-position="bottom center"
             data-html='<img height="50"
            width="50"
src="https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo-300x300.png">'>
            Hover to see the image as popup.
        </div>
    </div>
 
    <script>
        $(".ui.button").popup();
    </script>
</body>
 
</html>
Оцените статью
bestprogrammer.ru
Добавить комментарий