Ver Mensaje Individual
  #5 (permalink)  
Antiguo 26/05/2011, 11:13
Cambotero
 
Fecha de Ingreso: febrero-2010
Mensajes: 15
Antigüedad: 14 años, 10 meses
Puntos: 0
Respuesta: Problemas varios con JQuery

No te asustes


Este es el código que tenemos, dentro de él tenemos el código que se encarga de representar las pestañas (tabs), las ventanas emergentes (dialog) y slider.

Te ponemos todo porque creemos que cualquiera de lso componentes puede afectar.

<head>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<LINK REL=StyleSheet HREF= "estilos/estilos.css" TYPE="text/css" MEDIA=screen>
<link type="text/css" href="jqueryTabs/css/start/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<link rel="stylesheet" href="jquerySlider/css/start/jquery-ui-1.8.11.custom.css">
<script src="jquerySlider/development-bundle/jquery-1.5.1.js"></script>
<script type="text/javascript" src="jqueryTabs/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jqueryTabs/js/jquery-ui-1.8.11.custom.min.js"></script>
<script src="jqueryTabs/development-bundle/external/jquery.bgiframe-2.1.2.js"></script>
<script src="jqueryTabs/development-bundle/ui/jquery.ui.core.js"></script>
<script src="jqueryTabs/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="jqueryTabs/development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="jqueryTabs/development-bundle/ui/jquery.ui.button.js"></script>
<script src="jqueryTabs/development-bundle/ui/jquery.ui.draggable.js"></script>
<script src="jqueryTabs/development-bundle/ui/jquery.ui.position.js"></script>
<script src="jqueryTabs/development-bundle/ui/jquery.ui.resizable.js"></script>
<script src="jqueryTabs/development-bundle/ui/jquery.ui.dialog.js"></script>
<script src="jqueryTabs/development-bundle/ui/jquery.effects.core.js"></script>
<script src="jqueryTabs/development-bundle/ui/jquery.effects.blind.js"></script>
<script src="jqueryTabs/development-bundle/ui/jquery.effects.bounce.js"></script>
<script src="jqueryTabs/development-bundle/ui/jquery.effects.explode.js"></script>
<script src="jquerySlider/development-bundle/ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="jquerySlider/development-bundle/demos.css">
<style>
#demo-frame > div.demo { padding: 10px !important; };
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; font-size: 15px; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<script type="text/javascript">
$(function(){
<%
if (nombres_palanca != null){
%>

//AQUI CREAMOS SLIDERS DE MANERA DINAMICA
var tam_ini = <%=rango_ini.size()%>
var tam_fin = <%=rango_fin.size()%>
var array_ini = new Array(tam_ini);
var array_fin = new Array(tam_fin);
var array_valores_game = new Array(tam_ini);
<%int l;
for(l=0; l< rango_ini.size(); l++){
%>
array_ini[<%=l%>]= "<%=rango_ini.elementAt(l)%>";
array_fin[<%=l%>]= "<%=rango_fin.elementAt(l)%>";
array_valores_game[<%=l%>]= "<%=valores_game.elementAt(l)%>";
<%
}
%>
var indiceTS = <%=indice_ts%>
var indeceFT = <%=indice_ft %>
var i=0;
for (i;i<<%=nombres_palanca.size()%>;i++){
if ((i != indiceTS) && (i != indeceFT)){
$( "#"+i+"-div" ).slider({
orientation: "horizontal",
range: "min",
min: array_ini[i],
max: array_fin[i],
value: array_valores_game[i],
step: 0.1,
slide: function( event, ui) {
var n = document.getElementById("slider").value;
$( "#"+n+"-input" ).val( ui.value );
}
});
$( "#"+i+"-input" ).val( $( "#"+i+"-div" ).slider( "value" ) );
}
}
<%
}
%>

// CREACIÓN DE LOS TABS
$('#tabs').tabs();
<%
if (indice_li != null){
%>
var n = <%=li%>;
$('#tabs').tabs("select", n);
<%
}
%>
$('#graficasSimulacion').tabs();
<%
if (indice_li_graficas != null){
%>
var m = <%=li_graficas%>;
$('#graficasSimulacion').tabs("select", m);
<%
}
%>

$( "#dialog:ui-dialog" ).dialog( "destroy" );

var login = $( "#login" ),
name = $( "#name" ),
apellido = $( "#apellido" ),
email = $( "#email" ),
clave = $( "#clave" ),
allFields = $( [] ).add( login ).add( name ).add( apellido ).add( email ).add( clave ),
tips = $( ".validateTips" );

var name2 = $( "#name2" ),
allFields = $( [] ).add( name2 ),
tips = $( ".validateTips" );

function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}

$( "#dialog-form" ).dialog({
autoOpen: false,
height: 530,
width: 350,
modal: true,
buttons: {
"Modificar": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );

bValid = bValid && checkLength( login, "Usuario", 1);
bValid = bValid && checkLength( name, "Nombre", 1);
bValid = bValid && checkLength( apellido, "Apellido", 1);
bValid = bValid && checkmail( email, "Email", 1);
bValid = bValid && checkNombre( login );

if ( bValid ) {
document.perfil.submit();
$( this ).dialog( "close" );
}
},
Cancelar: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});

$( "#dialog-form2" ).dialog({
autoOpen: false,
height: 430,
width: 350,
modal: true,
buttons: {
"Guardar": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );

bValid = bValid && checkLength( name2, "Nombre", 1);
bValid = bValid && checkPartida( name2 );

if ( bValid ) {
document.guardar.antiguo.value = "<%=datos_usuario.elementAt(0) %>";
document.guardar.submit();
$( this ).dialog( "close" );
}
},
Cancelar: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});

$( "#dialog-form3" ).dialog({
autoOpen: false,
height: 430,
width: 350,
modal: true,
buttons: {
"Cargar": function() {
var i = 0;
var entro = false;
for (i;i<document.cargar.radio.length;i++){
entro = true;
if (document.cargar.radio[i].checked){
document.cargar.partida.value = i;
}
}
if (!entro){
document.cargar.partida.value = 0;
}
allFields.removeClass( "ui-state-error" );
document.cargar.antiguo.value = "<%=datos_usuario.elementAt(0) %>";
document.cargar.submit();
$( this ).dialog( "close" );
},
Cancelar: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});

$( "#dialog-form4" ).dialog({
autoOpen: false,
height: 430,
width: 350,
modal: true,
buttons: {
"Ver": function() {
var i = 0;
var entro = false;
for (i;i<document.ver.radio2.length;i++){
entro = true;
if (document.ver.radio2[i].checked){
document.ver.partida.value = i;
}
}
if (!entro){
document.ver.partida.value = 0;
}
allFields.removeClass( "ui-state-error" );
document.ver.antiguo.value = "<%=datos_usuario.elementAt(0) %>";
document.ver.submit();
$( this ).dialog( "close" );
},
Cancelar: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});

$( "#opener" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});

$( "#opener2" )
.button()
.click(function() {
$( "#dialog-form2" ).dialog( "open" );
});

$( "#openerCargar" )
.button()
.click(function() {
$( "#dialog-form3" ).dialog( "open" );
});

$( "#openerVer" )
.button()
.click(function() {
$( "#dialog-form4" ).dialog( "open" );
});

$( "#opener3" )
.button()
.click(function() {
document.guardar.antiguo.value = "<%=datos_usuario.elementAt(0) %>";
document.guardar.submit();
return false;
});

$( "#opener4" )
.button()
.click(function() {
document.simulacion.antiguo.value = "<%=datos_usuario.elementAt(0) %>";
document.simulacion.action = 'Controlador_volver_a_jugar';
document.simulacion.submit();
return false;
});

$( "#opener5" )
.button()
.click(function() {
document.simulacion.antiguo.value = "<%=datos_usuario.elementAt(0) %>";
document.simulacion.boton.value = "simular";
document.simulacion.submit();
return false;
});

$( "#opener6" )
.button()
.click(function() {
document.simulacion.antiguo.value = "<%=datos_usuario.elementAt(0) %>";
document.simulacion.boton.value = "simular_todo";
document.simulacion.submit();
return false;
});

$("#tabs ul.tabs li:eq(1) a").addClass("activo").show();
});


</script>
<style type="text/css">
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
<script type="text/javascript">