jQuery | seleccionable() y acordeón()

Posted on by Rudeus Greyrat

jQuery UI se utiliza para incorporar los efectos de gran alcance en el sitio web o páginas web.
En este artículo, se analizarán las interacciones y los widgets de la interfaz de usuario de jQuery, como seleccionables y de acordeón, que permiten seleccionar y mostrar elementos de manera lógica.

  1. Método seleccionable()
    Este método permite seleccionar los elementos con la ayuda del mouse. Usando jQuery UI, podemos seleccionar los elementos DOM ( D ocument O bject M odel ) que están disponibles para seleccionar. Esto se puede hacer haciendo clic en el objeto seleccionable con el mouse y realizando otro trabajo.
    Sintaxis:
    El método seleccionable() tiene dos formas y el uso de cada forma depende del requisito. Estos son los siguientes:- 
    $(selector, context).selectable (options);
    $(selector, context).selectable ("action", [params]);

    La tabla dada muestra las diferentes opciones que se pueden usar con el método seleccionable():

    Opción Objetivo
    autorefrescar Si el valor de esta opción se establece en «verdadero», permitirá calcular la posición y el tamaño de cada elemento seleccionado al comienzo de la
    operación de selección. El valor predeterminado de esta opción se establece en «verdadero».
    cancelar Esta opción se utiliza para prohibir la selección de los elementos DOM (elementos seleccionables). Si el valor de esta opción se establece en li , evitará la
    selección de todos los elementos de la lista en la página web. El valor predeterminado de esta opción es área de texto, entrada, botón, opción, selección. Esto significa que, por defecto, estos
    elementos no se pueden seleccionar en la página web.
    demora Esta opción se utiliza para producir el retraso entre el clic del usuario y el inicio de la selección del artículo. El objetivo principal de esta opción es evitar
    selecciones no deseadas. El valor predeterminado de esta opción es 0.
    filtrar Esta opción se utiliza para indicar la parte del elemento que se utiliza para seleccionar los elementos. El valor predeterminado de esta opción es *, lo que indica que el elemento se puede seleccionar haciendo clic en cualquier parte del elemento.
    desactivado Esta opción se usa para deshabilitar el proceso de selección. Cuando el valor de esta opción se establece en verdadero, deshabilita el proceso de selección. Para habilitar el
    proceso de selección, se usa la opción habilitar. El valor predeterminado de esta opción es falso.

    Ejemplo:

    • Funcionalidad por defecto –
      Código:

      <!doctype html>
      <html lang="en">
      <head>
      <title>jQuery UI Selectable() Method - Default functionality</title>
      <link rel="stylesheet" 
      href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <style type="text/css">
      #select .ui-selecting {
                          background: aqua;
                          }
      #select .ui-selected { 
                          background: yellow; 
                          color: green; 
                          }
      #select { 
              list-style-type: none; 
              margin: 0; 
              padding: 0; 
              width: 50%; 
              }
      #select li { 
              margin: 3px; 
              padding: 10px; 
              font-size: 1.4em; 
              height: 18px; 
              }
      </style>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
      $( function() {
          $( "#select" ).selectable();
      });
      </script>
      </head>
      <body>
      <h1 align="center">Geeks for Geeks</h1>
      <center>
      <ol id="select">
      <li class="ui-widget-content">Web Tech</li>
      <li class="ui-widget-content">Linux</li>
      <li class="ui-widget-content">DBMS</li>
      <li class="ui-widget-content">CBNST</li>
      <li class="ui-widget-content">Theory of Computation</li>
      </ol>
      </center>
      </body>
      </html>                    

      Salida:
      Antes de la selección:

      Después de la selección de la sección de Linux y DBMS :

      Nota: Utilice Ctrl + clic para seleccionar varias opciones.

    • Pantalla de cuadrícula –
      Código:

      <!doctype html>
      <html lang="en">
      <head>
      <title>jQuery UI Selectable() Method - Display as grid</title>
      <link rel="stylesheet" 
      href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <style type="text/css">
      #grid .ui-selecting { 
                          background: aqua;
                          }
      #grid .ui-selected { 
                      background: yellow; 
                      color: green; 
                      }
      #grid { 
          list-style-type: none; 
          margin: 0; 
          padding: 0; 
          width: 450px; 
          }
      #grid li { 
              margin: 3px; 
              padding: 1px; 
              float: left; 
              width: 50px; 
              height: 50px; 
              font-size: 2.5em; 
              text-align: center; 
              }
      </style>
      <script src="https://code.jquery.com/jquery-1.12.4.js">
      </script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
      </script>
      <script>
      $( function() {
          $( "#grid" ).selectable();
      });
      </script>
      </head>
      <body>
      <center>
      <h1>Geeks for Geeks</h1>
      <ol id="grid">
      <li class="ui-state-default">1</li>
      <li class="ui-state-default">2</li>
      <li class="ui-state-default">3</li>
      <li class="ui-state-default">4</li>
      <li class="ui-state-default">5</li>
      <li class="ui-state-default">6</li>
      <li class="ui-state-default">7</li>
      <li class="ui-state-default">8</li>
      <li class="ui-state-default">9</li>
      <li class="ui-state-default">10</li>
      <li class="ui-state-default">11</li>
      <li class="ui-state-default">12</li>
      <li class="ui-state-default">13</li>
      <li class="ui-state-default">14</li>
      <li class="ui-state-default">15</li>
      <li class="ui-state-default">16</li>
      <li class="ui-state-default">17</li>
      <li class="ui-state-default">18</li>
      <li class="ui-state-default">19</li>
      <li class="ui-state-default">20</li>
      <li class="ui-state-default">21</li>
      <li class="ui-state-default">22</li>
      <li class="ui-state-default">23</li>
      <li class="ui-state-default">24</li>
      <li class="ui-state-default">25</li>
      <li class="ui-state-default">26</li>
      <li class="ui-state-default">27</li>
      <li class="ui-state-default">28</li>
      </ol> 
      </center> 
      </body>
      </html>                    

      Salida:
      Antes de la selección:

      Después de la selección de los números requeridos de la cuadrícula:

  2. Método Accordion():
    El acordeón es un widget proporcionado por jQuery UI. El objetivo principal del acordeón es dividir el contenido de la página en una sección lógica. Cada sección consta de dos partes:
    1. Encabezado Esta parte contiene el título de la sección. La sección de encabezado generalmente se crea usando etiquetas de encabezado.
    2. Cuerpo Esta parte contiene el contenido de la sección. La sección del cuerpo generalmente se crea usando la etiqueta div.

    El acordeón en la página web se puede crear utilizando el método de acordeón() proporcionado por la biblioteca jQuery.
    Sintaxis:
    La sintaxis para usar el método acordeón es la siguiente

    $(selector).accordion (options)
    $(selector).accordion ("action", params)

    La tabla dada muestra las diferentes opciones que se pueden usar con el método de acordeón():

    OPCIÓN OBJETIVO
    activo Esta opción solo puede tomar valores booleanos y enteros. Cuando la opción se establece en falso, permitirá que los paneles se colapsen. El valor predeterminado de esta opción es verdadero.
    animar Esta opción puede tomar valores enteros, booleanos o de string. Esta opción se usa para producir animaciones mientras se abren los paneles. Si el valor de esta opción se establece en falso, deshabilitará la animación.
    desactivado Esta opción se usa para deshabilitar el acordeón. Cuando el valor de esta opción se establece en verdadero, deshabilita el acordeón. Para habilitar el proceso de acordeón, la opción deshabilitada se establece en falso. El valor predeterminado de esta opción es falso.

    Ejemplo:

    • Funcionalidad predeterminada: en la funcionalidad predeterminada, la sección del acordeón siempre está abierta.
      Código:

      <!doctype html>
      <html lang="en">
      <head>
      <title>Accordion Effect - Default functionality</title>
      <link rel="stylesheet" 
      href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js">
      </script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
      </script>
      <script>
      $(function() {
          $( "#gfg" ).accordion();
      });
      </script>
      </head>
      <body>
      <h1 align="center">Welcome to Geeks for Geeks</h1>
      <div id="gfg">
      <h3>Web Technology</h3>
      <div>
      <p>
          Web technology refers to the means by which computers 
          communicate with each other using markup languages and
          multimedia packages.
      </p>
      </div>
      <h3>CBNST</h3>
      <div>
      <p>
      Computer Based Numerical and Statistical Techniques: CBNST is
      use to optimize performance and minimize error in problem-solving
      application. Application of Computer Based Numerical and
      Statistical Techniques:
      </p>
      </div>
      <h3>Data Structures</h3>
      <div>
      <p>
      A data structure is a particular way of organizing data in a computer
       so that it can be used effectively. 
      </p>
      </div>
      <h3>Algorithms</h3>
      <div>
      <p>
      An algorithm is an unambiguous specification of how to solve a
      class of problems. Algorithms can perform calculation, data processing
      and automated reasoning tasks.
        
      </p>
      </div>
      </div>
      </body>
      </html>                    

      Salida:
      Antes de hacer clic en cualquier sección

      Después de hacer clic en la sección Estructuras de datos

    • Contenido contraíble: para eliminar la funcionalidad predeterminada, la opción contraíble se establece en verdadero.
      Código:

      <!doctype html>
      <html lang="en">
      <head>
      <title>jQuery UI Accordion - Collapsible Content</title>
      <link rel="stylesheet" 
      href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js">
      </script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
      </script>
      <script>
      $(function() {
          $( "#gfg" ).accordion({ collapsible: true});
      });
      </script>
      </head>
      <body>
      <h1 align="center">Welcome to Geeks for Geeks</h1>
      <div id="gfg">
      <h3>Web Technology</h3>
      <div>
      <p>
       Web technology refers to the means by which computers 
       communicate with each other using markup languages and 
       multimedia packages.
      </p>
      </div>
      <h3>CBNST</h3>
      <div>
      <p>
      Computer Based Numerical and Statistical Techniques: 
      CBNST is use to optimize performance and minimize error
      in problem-solving application.
      </p>
      </div>
      <h3>Data Structures</h3>
      <div>
      <p>
      A data structure is a particular way of organizing data in a computer
       so that it can be used effectively. 
      </p>
      </div>
      <h3>Algorithms</h3>
      <div>
      <p>
      An algorithm is an unambiguous specification of how to solve a class
      of problems. Algorithms can perform calculation, data processing and
      automated reasoning tasks.
      </p>
      </div>
      </div>
      </body>
      </html>                    

      Salida:
      Después de hacer clic en la opción Estructuras de datos una vez

      Después de hacer clic en la opción Estructuras de datos dos veces

Publicación traducida automáticamente

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