Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: 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
$('a[href*="#"]').on('click',function (e) {
if ( $(this).attr('data-toggle') || ! this.hash ||
$(this).hasClass("carousel-control") ){
return;
}
-
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):
<!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!
-
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
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
-
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!
-
Gracias explicas muy bien. Saludos