我来自阿根廷,我的名字是塞巴斯蒂安。
我年轻的发展学生,我试图为我的妻子做一个dinamic网站。
这是(目前)只是一种股票管理。
我应用Jquery UI Dialog为它提供样式和动画,但我有一些验证问题。对不起,如果我的英语表达很难理解的话。
现在你会告诉我我的代码。
<script type="text/javascript">
$(document).ready(function(){
/* Mostrar div de actualizar producto */
$("#btnactualizar_producto").click(function(evento) {
$("#actualizar_producto").css("display", "block");
$("#ingresar_producto_nuevo").css("display", "none");
$("#ingresar_compra").css("display", "none");
});
$("#btnnuevo_producto").click(function(evento) {
$("#ingresar_producto_nuevo").css("display", "block");
$("#actualizar_producto").css("display", "none");
$("#ingresar_compra").dialog("close");
$("#ingresar_producto_nuevo").dialog({ <!-- ------> muestra la ventana -->
width: '500', <!-- -------------> ancho de la ventana -->
height: '125',<!-- -------------> altura de la ventana -->
show: "scale", <!-- -----------> animación de la ventana al aparecer -->
hide: "scale", <!-- -----------> animación al cerrar la ventana -->
resizable: "false", <!-- ------> fija o redimensionable si ponemos este valor a "true" -->
position: "center",<!-- ------> posicion de la ventana en la pantalla (left, top, right...) -->
modal: "true" <!-- ------------> si esta en true bloquea el contenido de la web mientras la ventana esta activa (muy elegante) -->
});
});
/* Mostrar div de ingresar compra */
$("#btningresar_compra").click(function(evento) {
$("#ingresar_compra").css("display", "block");
$("#actualizar_producto").css("display", "none");
$("#ingresar_producto_nuevo").css("display", "none");
$("#ingresar_compra").dialog({ <!-- ------> muestra la ventana -->
width: '320', <!-- -------------> ancho de la ventana -->
height: '100',<!-- -------------> altura de la ventana -->
show: "scale", <!-- -----------> animación de la ventana al aparecer -->
hide: "scale", <!-- -----------> animación al cerrar la ventana -->
resizable: "false", <!-- ------> fija o redimensionable si ponemos este valor a "true" -->
position: "center",<!-- ------> posicion de la ventana en la pantalla (left, top, right...) -->
modal: "true" <!-- ------------> si esta en true bloquea el contenido de la web mientras la ventana esta activa (muy elegante) -->
});
});
$("#btnproducto_existente").click(function(evento) {
$("#ingresar_producto_existente").css("display", "block");
$("#actualizar_producto").css("display", "none");
$("#ingresar_compra").dialog("close");
$("#ingresar_producto_existente").dialog({ <!-- ------> muestra la ventana -->
width: '500', <!-- -------------> ancho de la ventana -->
height: '125',<!-- -------------> altura de la ventana -->
show: "scale", <!-- -----------> animación de la ventana al aparecer -->
hide: "scale", <!-- -----------> animación al cerrar la ventana -->
resizable: "false", <!-- ------> fija o redimensionable si ponemos este valor a "true" -->
position: "center",<!-- ------> posicion de la ventana en la pantalla (left, top, right...) -->
modal: "true" <!-- ------------> si esta en true bloquea el contenido de la web mientras la ventana esta activa (muy elegante) -->
});
});
$("#listbox_nombre").change(function(evento) {
$id_temp = "";
$id = "";
var $id_temp = $("#listbox_nombre").find(':selected').val();
$id = encodeURIComponent($id_temp);
$("#listbox_colores").load("pedir_colores.php?prod='"+$id+"'");
});
});
'
风格:
<style>
.ui-dialog .ui-widget-content
{
color: #FFFFFF;
font-size: 12px;
}
/*Para cambiar el fondo de la cabecera*/
.ui-dialog .ui-widget-header
{
background: #FFFF33;
}
/*Para cambiar el contenido de la cabecera, tamaño de fuente, color de fuente, ...*/
.ui-dialog .ui-dialog-titlebar
{
color: #FFFFF;
font-family: arial;
font-size: 13px;
}
.contenido {
width:460px;
margin:10 auto;
}
.ventana{
display: none; <!-- -------------------------> es importante ocultar las ventanas previamente -->
color:#808080;
line-height:8px;
font-size:8px;
text-align:justify;
}
.tb_color{
width:50;
}
.tb_peso{
width:50;
}
.tb_precio{
width:55;
}
</style> '
和HTML:
<table width="475" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="475" align="center">
<input type="button" id="btningresar_compra" value="Ingresar compra" align="middle" />
<input type="button" id="btnactualizar_producto" value="Actualizar producto" align="middle" /></td>
</tr>
</table>
<div id="ingresar_compra" align="center" class="ventana" title="Ingresar compra" style="display: none;">
<table width="300" align="center">
<tr>
<td width="300" align="center">
<input type="button" id="btnnuevo_producto" value="Producto nuevo" align="middle" />
<input type="button" id="btnproducto_existente" value="Producto existente" align="middle" />
</td>
</tr>
</table>
</div>
<div id="ingresar_producto_nuevo" align="center" class="ventana" title="Ingresar producto nuevo" style="display: none;">
<form name="ingresar_producto_nuevo" method="post" action="ingresar_datos.php">
<table width="460" border="0" id="tabla_producto_nuevo" align="center" cellpadding="2" cellspacing="2">
<tr align="center" valign="middle">
<td>
<input type="text" id="sndnombre" name="sndnombre" size="20" placeholder="Nombre del producto" value="">
<input type="number" id="sndcolor" name="sndcolor" size="4" placeholder="Color" value="" required class="tb_color">
<input type="number" id="sndpeso" name="sndpeso" min="0" step="0,01" size="5" placeholder="Peso" step="0.01" value="" class="tb_peso"
required pattern="\d{1,3}\.\d{1,3}">
<input type="number" id="sndprecio" name="sndprecio" size="3" placeholder="Precio" value=""class="tb_precio"
required pattern="\d{1,3}\.\d{1,3}">
</td>
</tr>
<tr align="center" valign="middle">
<td>
<input type="submit" align="center" value="Aceptar" />
</td>
</tr>
</table>
</form>
</div>
<div id="ingresar_producto_existente" align="center" class="ventana" title="Ingresar producto existente" style="display: none;">
<form name="ingresar_producto_existente" method="post" action="ingresar_compra.php">
<table width="460" border="0" align="center" cellpadding="2" cellspacing="2">
<tr align="center" valign="middle">
<td>
<?php
#Pedimos la base de datos del stock
$nombres = pedir_nombres();
#Iniciamos el listbox del nombre producto
echo "<select id='listbox_nombre' name='listbox_nombre' size='1'>";
echo "<option value='' disabled='disabled' selected='selected'>Seleccionar producto</option>";
#Formateamos las opciones de los nombres
foreach ($nombres as $index)
{
echo "<option>".$index."</option>";
}
#Cerramos el menú
echo"</select>";
?>
<select id="listbox_colores" name="listbox_colores" size="1"></select>
<input type="number" id="nombre_producto_existente" name="agregarpeso" class="tb_peso" placeholder="Peso" step="0.1" value="" required>
</td>
</tr>
<tr align="center" valign="middle">
<td>
<input type="submit" align="center" value="Aceptar" />
</td>
</tr>
</table>
</form>
</div>
<div id="actualizar_producto" align="center" style="display: none;">
<form name="actualizarproducto" method="post" action="actualizar_datos.php">
<table width="391" border="0" align="center" cellpadding="2" cellspacing="2">
<tr align="center" valign="middle">
<td>
<?php
#Pedimos la base de datos del stock
$nombres = pedir_nombres();
#Iniciamos el listbox del nombre producto
echo "<select id='update_nombre' name='update_nombre' size='1'>";
echo "<option value='' disabled='disabled' selected='selected'>Seleccionar producto</option>";
#Formateamos las opciones de los nombres
foreach ($nombres as $index)
{
echo "<option>".$index."</option>";
}
#Cerramos el menú
echo"</select>";
?>
<input type="number" name="updatecolor" size="4" placeholder="Color" value="" required>
<input type="number" name="updatepeso" size="5"placeholder="Peso" step="0.01" value="" required>
<input type="number" name="updateprecio" size="3" placeholder="Precio" value="" required>
</td>
</tr>
<tr align="center" valign="middle">
<td>
<input type="submit" align="center" value="Actualizar producto" />
<input type="button" id="actualizar_cancelar" align="center" value="Cancelar" />
</td>
</tr>
</table>
</form>
</div>
我为每个表单创建了一个div,因为它正在思考所有类似于UI dinamic对话框。
验证的模式在HTML表单中是明确的,但UI对话框不理解这一点,我不知道为什么...
拜托,任何解决方案都非常被我接受和高兴。
我知道UI Dialog在使用这种验证模式时遇到了什么问题,或者这与她的拥有者有关。在这种情况下,我需要知道如何将UI Dialog验证模式设置为我的表单。
Y需要为具有两位小数的正数制作模式。
抱歉,感谢您的帮助。我在等待并试图解决这个问题。
答案 0 :(得分:0)
好的...
我解决了它。
我正在使用类型=&#34;数字&#34;对于文本框,数字在html5中。
更改类型=&#34;文字&#34;并设置你想要的模式,验证是完美的,就像我想要的那样。
对于我看到这个问题的每个人,可能就是答案。
3个小时试图找到一个解决方案......我面前有3把钥匙。