Creando un simple menu con jquery

Lunes, 1. Marzo 2010

Codigo html:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Menu</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div id="menu">
<label id="opcion1">Opcion1</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label id="opcion2">Opcion2</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label id="opcion3">Opcion3</label>
</div>
<div id="desplegable1">
<a href="#">Enlace1</a>
<br />
<a href="#">Enlace2</a>
<br />
<a href="#">Enlace3</a>
<br />
<a href="#">Enlace4</a>
<br />
<a href="#">Enlace5</a>
<br />
<a href="#">Enlace6</a>
</div>
<div id="desplegable2">
<a href="#">Enlace7</a>
<br />
<a href="#">Enlace8</a>
<br />
<a href="#">Enlace9</a>
<br />
<a href="#">Enlace10</a>
<br />
<a href="#">Enlace11</a>
<br />
<a href="#">Enlace12</a>
</div>
<div id="desplegable3">
<a href="#">Enlace13</a>
<br />
<a href="#">Enlace14</a>
<br />
<a href="#">Enlace15</a>
<br />
<a href="#">Enlace16</a>
<br />
<a href="#">Enlace17</a>
<br />
<a href="#">Enlace18</a>
</div>
</body>
</html>

Codigo css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#menu {
    border: 1px solid #000000;
    text-align: center;
}
#desplegable1 {
    position: absolute;
    left: 407px;
    border: 1px solid #000000;
    }
#desplegable2 {
    position: absolute;
    left: 482px;
    border: 1px solid #000000;
    }
#desplegable3 {
    position: absolute;
    left: 560px;
    border: 1px solid #000000;
}
a {
    text-decoration: none;
    color: #00CCFF;
}

Codigo js:

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
$(document).ready(function() {
$("#opcion1").mouseover(dentro);
$("#opcion1").mouseout(fuera);
$("#opcion2").mouseover(dentro2);
$("#opcion2").mouseout(fuera2);
$("#opcion3").mouseover(dentro3);
$("#opcion3").mouseout(fuera3);
$("#desplegable1").css("display", "none");
$("#desplegable2").css("display", "none");
$("#desplegable3").css("display", "none");
function dentro() {
$("#desplegable1").css("display", "inline");
$("#desplegable1").mouseover(dentro_submenu);
}
function fuera() {
$("#desplegable1").css("display", "none");
$("#desplegable1").mouseout(fuera_submenu);
}
function dentro2() {
$("#desplegable2").css("display", "inline");
$("#desplegable2").mouseover(dentro_submenu2);
}
function fuera2() {
$("#desplegable2").css("display", "none");
$("#desplegable2").mouseout(fuera_submenu2);
}
function dentro3() {
$("#desplegable3").css("display", "inline");
$("#desplegable3").mouseover(dentro_submenu3);
}
function fuera3() {
$("#desplegable3").css("display", "none");
$("#desplegable3").mouseout(fuera_submenu3);
}
function dentro_submenu() {
$("#desplegable1").css("display", "inline");
}
function fuera_submenu() {
$("#desplegable1").css("display", "none");
}
function dentro_submenu2() {
$("#desplegable2").css("display", "inline");
}
function fuera_submenu2() {
$("#desplegable2").css("display", "none");
}
function dentro_submenu3() {
$("#desplegable3").css("display", "inline");
}
function fuera_submenu3() {
$("#desplegable3").css("display", "none");
}
}
);

Publicado en JS, Programacion, jquery by v0ltr4n - No hay comentarios

Validacion de formularios con PHP y JS

Miércoles, 5. Agosto 2009

Bueno aqui unos simples ejemplos ^^

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
#contenedor{
  text-align: center;
  }
#validar{
  border: 1px #C0C0C0 solid;
  }
#boton{
  border: 1px #C0C0C0 solid;
  }
</style>
</head>
<body>
<br />
<div id="contenedor">
<form action="" name="asd" method="POST">
<label>Campo a validar</label>
<br />
<input type="text" id="validar" name="validar" size="30" maxlength="30" />
<br />
<br />
<?php
  //Comprobamos que este vacio
  if (isset($_POST['validar'])) {
      $validar = htmlspecialchars(trim($_POST['validar']));
      //comprobamos que no este vacio al mandar el formulario
      if ($validar == '') {
          echo "<label>El campo " . $validar . " esta vacio</label>
<br />";
      }
  }
?>
<input type="submit" id="boton" value="Validar">
</form>
</div>
</body>
</html>

JS:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   
    <head>
        <script type="text/javascript">
            //iniciamos la funcion para la validacion
            function validacion() {
                //obtenemos el valor del campo por DOM
                var validar = document.getElementById('validar');
                var nvalidar = validar.name;
                //comprobamos que no este vacion el campo
                if (validar.value == '') {
                    alert("El campo " + nvalidar + " esta vacion");
                } else {
                    //si no esta vacio el campo, mandamos formulario
                    document.forms.asd.submit();
                }
            }
        </script>
        <style type="text/css">
            #contenedor{ text-align: center; } #validar{ border: 1px #C0C0C0 solid;
            } #boton{ border: 1px #C0C0C0 solid; }
        </style>
    </head>
    <body>
        <br />
        <div id="contenedor">
            <form action="" name="asd" method="POST">
                <label>
                    Campo a validar
                </label>
                <br />
                <input type="text" id="validar" name="validar" size="30" maxlength="30"
                />
                <br />
                <br />
                <input type="button" id="boton" value="Validar" onclick="validacion()">
            </form>
        </div>
    </body>
</html>

Publicado en JS, PHP by v0ltr4n - No hay comentarios