JQuery - Problema con tabs de jquery

   
Vista:

Problema con tabs de jquery

Publicado por Fernando (1 intervención) el 07/06/2012 00:58:11
Hola gente!
desde hace dias estoy tratanto de hacer un formulario de ingreso de datos, y cuando logre que quedara mas o menos bien, use un tab de jquery y logre que se "desajustaran" todos los input y texts
y ya no se bien por donde mas buscar, agradeceria que alguien me oriente un poco!
Desde ya muchas gracias !

El codigo html + php :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<html>
<head>
<title>Carga Cartas de Porte</title>
 
<link rel="stylesheet" type="text/css" href="css/estilos.css" />
 
<!-- NECESARIO PARA EL AUTOCOMPLETE -->
<script src="jquery/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jquery/css/ui-lightness/jquery-ui-1.8.18.custom.css"/>
 
<script>
	$(function() {
		$( "#tabs" ).tabs();
	});
</script>
</head>
<body>
 
<form id="alta_cp" name="alta_cp" method="post" action="procesaalta_cp.php">
 
<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Granos Transportados</a></li>
		<li><a href="#tabs-2">Datos Auxiliares</a></li>
		<li><a href="#tabs-3">Destino</a></li>
	</ul>
 
<div id="tabs-1">
  <span class="left">
   	<label>Cuenta Stock</label>
    <input type="text" name="txtcuesto" id="txtcuesto" maxlength="25" size="25" value="" />
    <input type="hidden" name="idcuesto" id="idcuesto" value="0"/>
  </span>
 
  <span class="right">
	<label>Remitente</label>
    <input type="text" name="txtcuerem" id="txtcuerem" maxlength="25" size="25" value="" />
    <input type="hidden" name="idcuerem" id="idcuerem" value="0"/>
  </span>
 
  <span class="left">
    <label>Tipo de Carta</label>
       <select name="selectcp" >
       <option value="1" >CP Recibidas</option>
       <option value="2" >CP Recibidas Propias</option>
	   <option value="3" >CP Recibidas con cambio de Destino</option>
       <option value="4" >CP Recibidas Propias con cambio de Destino</option>
       <option value="5" >CP Propias Emitidas </option>
       <option value="6" >CP Propias Emitidas para Terceros</option>
       </select>
  </span>
 
 
  <span class="right">
    <label>CP Sucursal</label>
    <input name="txtsuccp" type="text" id="txtsuccp" maxlength="4" size="07" value="0" />
  </span>
 
  <span class="left">
      <label>CP Numero</label>
	  <input name="txtnumcp" type="text" id="txtnumcp" maxlength="8" size="10" value="0" />
   </span>
 
   <span class="right">
    <label>CEE N</label>
    <input name="txtnumcee" type="text" id="txtnumcee" size="15" value="0" />
   </span>
 
  </div>
 
  <div id="tabs-2">
	<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
 
  <div id="tabs-3">
	<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque    rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
  </div>
 
</div>
 
</form>
 
</body>
</html>


El codigo del archivo css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
body {
	font-family: Arial, Helvetica, sans-serif;
	background: #FAAC58;
}
 
input{
	border: 1px #888 solid;
}
 
p
{
 margin:10px;
}
 
 
#alta_cp {
	width: 800px;
	height: 600px;
	border: 1px #666666 solid;
	background: #FACC2E;
	padding: 10px;
	margin: auto;   /* indica si esta centrado o alineado el form en pantalla */
    font-size:09pt;
 
}
 
 
.left
{
 width:400px;
 float:left;
}
 
 .right
{
 width:400px;
 float:right;
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Problema con tabs de jquery

Publicado por xve (557 intervenciones) el 07/06/2012 07:47:43
Hola Fernando, he probado tu codigo, y el problema que veo, es que no te caben dos fila juntas, no?

Disminuye los tamaños del estilo left y right a 350, veras como te funciona bien.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema con tabs de jquery

Publicado por Fernando (10 intervenciones) el 07/06/2012 15:11:23
Hola xve !

Gracias, es como tu dices nomas !

Ahora, un detalle, el tabs de jquery tiene como una banda blanca, que el primer tab no se "expande" hasta el ultimo input, tienes alguna idea por que?

Saludos y gracias por la solucion !
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Problema con tabs de jquery

Publicado por xve (557 intervenciones) el 07/06/2012 16:03:00
Hola Fernando, creo que es por el estilo del div...
prueba a añadir este estilo:
1
#tabs-1 {display:block;}

o
1
#tabs-1 {display:table;}

Espero que te sirva...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema con tabs de jquery

Publicado por Fernando (10 intervenciones) el 07/06/2012 23:42:24
Hola xve,
funciono, gracias por los comentarios y la buena onda !!!
Saludos !
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar