jQuery Mobile plegable expandir eventos

jQuery Mobile es una tecnología basada en la web que se utiliza para crear contenido receptivo al que se puede acceder en todos los teléfonos inteligentes, tabletas y computadoras de escritorio. 

En este artículo, usaremos el evento de expansión plegable de jQuery Mobile para activar cuando se expande un widget plegable.

Sintaxis:

Inicialice el plegable con la devolución de llamada de expansión especificada:

$( ".selector" ).collapsible({
   expand: function( event, ui ) {}
});

Vincule un detector de eventos al evento plegable expandible:

$( ".selector" ).on( "collapsibleexpand", 
    function( event, ui ) {} );

Parámetros: contiene dos parámetros, como se mencionó anteriormente y se analizan a continuación:

  • evento: Acepta valor de tipo Evento.
  • ui: Acepta valor de tipo de objeto. Este valor está vacío, ya que se utiliza para mantener la coherencia con otros eventos.

Enlace CDN: Primero, agregue los scripts de jQuery Mobile necesarios para su proyecto.

<enlace rel=”hoja de estilo” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css”>
<script src=” //code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile- 1.5.0-alpha.1.min.js”></secuencia de comandos>

Ejemplo: este ejemplo describe el evento de expansión plegable de jQuery Mobile.

HTML

<!doctype html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
    <script src=
"//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#GFG").on("collapsibleexpand ", function (event, ui) {
                alert("Start Expanding Content of Collapsible Widget");
            });
        });
    </script>
</head>
  
<body>
    <div data-role="page" id="page1">
        <div data-role="header">
            <h1>GeeksforGeeks</h1>
            <h3>jQuery Mobile Collapsible expand Event</h3>
        </div>
  
        <div role="main" class="ui-content">
            <div data-role="collapsible" 
                style="width: 400px;" id="GFG">
  
                <h3>GeeksforGeeks</h3>
                <p>
                    GeeksforGeeks is a computer science portal
                    for geeks. It contains well written, well
                    thought and well explained computer science
                    and programming articles, quizzes etc.
                </p>
            </div>
        </div>
    </div>
</body>
  
</html>

Producción:

Referencia: https://api.jquerymobile.com/collapsible/#event-expand

Publicación traducida automáticamente

Artículo escrito por AshokJaiswal 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 *