Sliding Side Bar con Jquery

kceres · #1 (**permalink**) 16/07/2009, 09:46

Hola amigos....estoy buscando como puedo hacer el ejemplo que esta en esta web http: //devblab.net/sliding/ pero que sea con jquery, ellos utilizan mootools, si alguien tiene algun ejemplo parecido a este usando jquery o javascript solamente y puede facilitarmelo se lo agradeceria...gracias.

PD. le quitan el espacio que hay despues del http: para que funcione el link

saludos, kceres

stock · #2 (**permalink**) 16/07/2009, 11:30

es muy sencillo, utiliza solamente alguno de los efectos que vienen con jQuery

http://docs.jquery.com/Effects

lo demás es solo CSS

saludos

mateando · #3 (**permalink**) 16/07/2009, 11:52

Como todabia no puedo poner direccions, te dejo este codigo, para que copies y hagas pruebas:

Código:


<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple Slide Panel</title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

	$(".btn-slide").click(function(){
		$("#panel").slideToggle("slow");
		$(this).toggleClass("active"); return false;
	});
	
	 
});
</script>

<style type="text/css">
body {
	margin: 0 auto;
	padding: 0;
	width: 570px;
	font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
	outline: none;
}
#panel {
	background: #754c24;
	height: 200px;
	display: none;
}
.slide {
	margin: 0;
	padding: 0;
	border-top: solid 4px #422410;
	background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
	background: url(images/white-arrow.gif) no-repeat right -50px;
	text-align: center;
	width: 144px;
	height: 31px;
	padding: 10px 10px 0 0;
	margin: 0 auto;
	display: block;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
}
.active {
	background-position: right 12px;
}
</style>
</head>

<body>

<div id="panel">
	<!-- you can put content here -->
</div>

<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>

</body>
</html>

Es simple, solo añade la libreria Jquery y ya...
A partir de aca, se pueden añadri mas efectos, o intentar de voltearlo, para que haga slide a partir del margen izquierdo por ejemplo..

Espero que te sirva para indagar mas....

Saludos!

P.D: Busca en google como "jQuery Slide Panel"

guiles00 · #4 (**permalink**) 16/07/2009, 12:38

No encuentro donde colocar la pregunta, sepan disculpar el off topic pero necesito ayuda!!

Tengo este problema:

Quiero utilizar una ventana principal para cargar varios campos de texto y abro un popup para seleccionar los datos a cargar. Queria saber como puedo hacer para utilizar la misma ventana popup para cada uno de los campos de texto que tengo.

Te paso como tengo el codigo.

Ventana principal:

<input type="text" name="nombre1" id="nombre1" ><A HREF="#" onClick="popup()" >agregar</A><br>
<input type="text" name="nombre2" id="nombre2" ><A HREF="#" onClick="popup()" >agregar</A><br>

Ahi abro la misma ventana popup pero no se como hacer para que diferencie entre un link y el otro asi me carga el dato en el campo que corresponde.

Esto esta en la ventana popup:
function enviar(texto){
opener.document.persona.nombre.value = texto;
}

Aca no se como decirle a esta funcion que en vez de poner opener.document.persona.nombre1.value, ponga opener....persona.nombre2

Gracias de antemano!

kceres · #5 (**permalink**) 16/07/2009, 13:52

Me puse a hacerlo y por suerte me salio bien jejeje...yo lo tenia como me muestras en el ejemplo, pero yo no lo queria asi, pongo el ejemplo que hice para que lo vean y si le sirve que lo aprovechen, lo unico que le falta es un poco de CSS.

Yo que queria que inicialmente saliera cerrada la pestanna y cuando diera el click sobre ella se desplegara hacia arriba y no hacia abajo que es como normalmente sale el efecto, ahora la que hice hace lo que deseaba.

Saludos, kceres

Código HTML:

<html>
<head>
<script language="javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript">
	$(document).ready(function(){
		$('#bbb').css('height','0px');
		$('#aaa').click(function(){
			$('#bbb').css('z-index','1000');
			$('#aaa').css('z-index','1001');
			if($('#bbb').css('height')!=0+'px'){
			  $('#bbb').animate({width:100, height:0, top:305, left:9}, "fast");
			  $('#aaa').animate({width:100, height:20, top:285, left:9}, "fast");
			}else{
			  $('#bbb').animate({width:100, height:120, top:185, left:9}, "fast");
			  $('#aaa').animate({width:100, height:20, top:165, left:9}, "fast");
			}
		})
	})
</script>
</head>
<body>
<div style="width:300px; height:298px; border: solid 1px #000000;">
	<div id="aaa" style="width:100px; height:20px; background-color:#CCCCCC; text-align:center; position: absolute; top: 285px;">
		<a>Pistas</a>
	</div>
	<div id="bbb" style="width:100px; height:120px; background-color:#0099CC; position: absolute; top: 305px;">
		
	</div>
	<div style="height:2px; width:150px; background-color:#000000; position: absolute; top: 305px;"></div>
</div>
</body>
</html>

JavierB · #6 (**permalink**) 16/07/2009, 14:31

Mensaje movido al foro de Frameworks desde Javascript.

Saludos,