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 :
El codigo del archivo css:
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
0
