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

anarubia · « **en:** 14 de Septiembre 2015, 17:12 »

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;
 }

César Krall · « **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!

anarubia · « **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 · « **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!

anarubia · « **Respuesta #4 en:** 18 de Septiembre 2015, 15:52 »

Gracias explicas muy bien. Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

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

anarubia

atributo data-toggle jquery y Bootstrap modal collapse dropdown tab expandir

César Krall

Re:atributo data-toggle jquery y Bootstrap modal collapse dropdown tab expandir

anarubia

Re:atributo data-toggle jquery y Bootstrap modal collapse dropdown tab expandir

César Krall

Re:atributo data-toggle jquery y Bootstrap modal collapse dropdown tab expandir

anarubia

Re:atributo data-toggle jquery y Bootstrap modal collapse dropdown tab expandir

Preguntas y respuestas