Autor Tema: atributo data-toggle jquery y Bootstrap modal collapse dropdown tab expandir  (Leído 33370 veces)

anarubia

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 36
    • Ver Perfil
No entiendo muy bien el código la función click sobre las anclas de las url, no entiendo el attr.data-toggle y el el carousel-control, ¿alguien me podía explicar este fragmento de código? . gracias de antemano

 
Código: [Seleccionar]
$('a[href*="#"]').on('click',function (e) {
     if ( $(this).attr('data-toggle') || ! this.hash ||
                $(this).hasClass("carousel-control") ){
 return;
 }
« Última modificación: 16 de Septiembre 2015, 13:14 por César Krall »

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Re:atributo data-toggle jquery y Bootstrap modal collapse dropdown tab expandir
« Respuesta #1 en: 16 de Septiembre 2015, 13:15 »
Hola Ana habría que ver el código completo para entender ese fragmento de código.

El código if ( $(this).attr('data-toggle') ) podría interpretarse como "si el elemento tiene definido el atributo data-toggle entonces..."

data-toggle es un atributo dentro de Bootstrap JS que liga el elemento al tipo de funcionamiento que muestra, por ejemplo:

data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"

Para entender todo esto hay que trabajar con Bootstrap (http://getbootstrap.com/) posiblemente combinado con jQuery.

Si elegimos collapse, aquello que queda afectado por el data-toggle queda oculto o se expande según pulsemos

Este es un ejemplo de código donde un texto queda oculto hasta que pulsamos en un botón (expande y retrae el texto según pulsemos):

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Elemento que se expande</h2>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Pulsa para expandir o retraer</button>
  <div id="demo" class="collapse">
    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.
  </div>
</div>

</body>
</html>


Esto se puede hacer con JavaScript sin necesidad de usar jQuery o Bootstrap, la ventaja de usar esto sería aprovechar código ya desarrollado para poder ir más rápido y aprovechar lo que han creado otros programadores (en estos casos los profesionales de jQuery y Bootstrap)

Saludos!
Responsable de departamento de producción aprenderaprogramar.com

anarubia

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 36
    • Ver Perfil
Re:atributo data-toggle jquery y Bootstrap modal collapse dropdown tab expandir
« Respuesta #2 en: 16 de Septiembre 2015, 15:43 »
Gracias, lo  he entendido muy bien, lo has explicado estupendamente. Aprovecho, para preguntarte sobre el target no entiendo muy bien su significado si se pone para hacer referencia a a cualquier elemento del DOM  o si es otra cosa, me lo podias explicar porfavor, por ejemplo en este codigo
Código: [Seleccionar]
function go_to_anchor( target ){
 var offset = parseInt($('body').css('paddingTop'));
 $('html, body').animate({
    'scrollTop': $(target).offset().top-offset
 }, 700, 'swing' );
 return false;
 }
crea  una funcion, guarda el valor del padding superior en el offset y le aplica una animacion al body, pero no entiendo ese target, cual es su significado en esta función. ¿ me lo podias explicar?, gracias

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Re:atributo data-toggle jquery y Bootstrap modal collapse dropdown tab expandir
« Respuesta #3 en: 18 de Septiembre 2015, 08:51 »
Hola, en este caso parece que la función está prevista para que se le pase el nombre de un ancla (anchor). Un ancla es una referencia que permite pasar de un punto a otro de una página que es larga.

Referencia de anclas (anchors): http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=508:hipervinculos-links-o-enlaces-html-etiqueta-a-atributos-href-target-y-title-tipos-de-links-img-cu00717b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192

Al pasarle el nombre de un ancla a la función, movería el foco o área visible a esa ancla con un efecto de animación.

Saludos!
Responsable de departamento de producción aprenderaprogramar.com

anarubia

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 36
    • Ver Perfil
Re:atributo data-toggle jquery y Bootstrap modal collapse dropdown tab expandir
« Respuesta #4 en: 18 de Septiembre 2015, 15:52 »
Gracias explicas muy bien. Saludos

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".