Interfaz de usuario semántica | Surgir

Posted on by Rudeus Greyrat

Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. Utiliza una clase para agregar CSS a los elementos.

Pop se usa para mostrar algún contenido en la parte superior de la página.

Sintaxis: código jQuery

$('.button').popup();

Ejemplo 1: este ejemplo muestra un mensaje emergente al mover el mouse.

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
  
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
  
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" 
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
        crossorigin="anonymous">
    </script>
  
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
  
<body>
    <div style="margin-top: 20px" class="ui container">
        <div class="ui button" data-content=
            "You are learning Semantic-ui popup">
            Hover Me
        </div>
    </div>
  
    <script>
        $('.button').popup();
    </script>
</body>
  
</html>

Producción:

Si no especificamos la propiedad en la función emergente(), aparecerá al pasar el mouse.

Ejemplo 2:

Este ejemplo muestra un menú emergente.

Código jQuery:

$('.menu .browse').popup({
   hoverable: true,
});

La propiedad que se puede desplazar se establece en verdadero para pasar el mouse sobre el menú emergente. Si no usamos esta propiedad, será falsa y no podrá desplazarse sobre el menú emergente.

Código completo:

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
            rel="stylesheet" />
  
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
  
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
  
<body>
    <div style="margin-top: 20px" class="ui container">
        <div class="ui menu">
            <a class="browse item">
                Geeksforgeeks
                <i class="dropdown icon"></i>
            </a>
            <div class="ui fluid popup bottom left transition hidden"
                style="top: 554.6px; left: 1px; bottom: auto; 
                                right: auto; width: 840.2px;">
                <div class="ui four column relaxed divided grid">
                    <div class="column">
                        <h4 class="ui header">Data Structure</h4>
                        <div class="ui link list">
                            <a class="item">Array</a>
                            <a class="item">LinkList</a>
                            <a class="item">Tree</a>
                        </div>
                    </div>
                    <div class="column">
                        <h4 class="ui header">Web</h4>
                        <div class="ui link list">
                            <a class="item">Angular</a>
                            <a class="item">React</a>
                            <a class="item">Node</a>
                        </div>
                    </div>
                    <div class="column">
                        <h4 class="ui header">Language</h4>
                        <div class="ui link list">
                            <a class="item">C++</a>
                            <a class="item">Python</a>
                            <a class="item">JavaScript</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  
    <script>
        $('.menu .browse').popup();
    </script>
</body>
  
</html>

Producción:

Ejemplo 3:

Este ejemplo muestra un mensaje emergente después de hacer clic en el botón.

Código jQuery:

$('.button').popup({
   on: 'click'
});

Código completo:

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
  
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
    rel="stylesheet" />
  
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
  
<body>
    <div style="margin-top: 20px" class="ui container">
        <div class="ui button" data-content=
            "You are learning Semantic-ui popup">
            Click Me
        </div>
    </div>
  
    <script>
        $('.button').popup({
            on: 'click'
        });
    </script>
</body>
  
</html>

Producción:

Ejemplo 4:

Este ejemplo muestra el mensaje emergente en el campo de entrada.

Código jQuery:

$('input').popup({
   on: 'focus'
});

on: 'focus'se usa porque solo queremos mostrar una ventana emergente cuando el usuario se enfoca en ese campo de entrada.

Código completo:

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
  
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
  
<body>
    <div style="margin-top: 20px" class="ui container">
        <div class="ui icon input">
            <input type="text" placeholder="Enter Email"
                data-content=
"Enter the email of person whose account you want to search" />
            <i class="search icon"></i>
        </div>
    </div>
      
    <script>
        $('input').popup({
            on: 'focus'
        });
    </script>
</body>
  
</html>

Producción:

Ejemplo 5:

Elemento de destino: muestra la ventana emergente en otro lugar.

Código jQuery:

$('.button').popup({
  position : 'right center',
  target   : '.image',
  title    : 'Geeksforgeeks',
  content  : 'A Computer Science Portal'
});
  • posición: Donde desea mostrar la ventana emergente.
  • objetivo: en qué elemento desea mostrar la ventana emergente cuando se desplaza sobre .button.
  • título y contenido: se muestra en una ventana emergente.

Código completo:

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
  
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
  
<body>
    <div style="margin-top: 20px" class="ui container">
        <div class="ui primary button">Hover Me</div>
        For more detail of Picture
        <div class="ui divider"></div>
        <img class="medium ui image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200511124031/image30.png">
    </div>
      
    <script>
        $('.button').popup({
            position: 'right center',
            target: '.image',
            title: 'Geeksforgeeks',
            content: 'A Computer Science Portal'
        });
    </script>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *