lunes, 25 de febrero de 2013
domingo, 24 de febrero de 2013
El widget menu
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/ui-lightness/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
$("#menu").menu();
}
</script>
<title>Menu</title>
<style>
#menu{
width:250px;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Primera generación</a>
<ul>
<li><a href="#">Gea</a></li>
<li><a href="#">Eros</a></li>
<li><a href="#">Tártaro</a></li>
<li><a href="#">Urano</a></li>
<li><a href="#">Titanes</a></li>
<li><a href="#">Cíclopes</a></li>
<li><a href="#">Hecatónquiros</a></li>
</ul>
</li>
<li><a href="#">Segunda generación</a>
<ul>
<li><a href="#">Crono</a></li>
<li><a href="#">Rea</a></li>
<li><a href="#">Titanes</a></li>
</ul>
</li>
<li><a href="#">Tercera generación</a>
<ul>
<li><a href="#">Zeus</a></li>
<li><a href="#">Hera</a></li>
<li><a href="#">Poseidón</a></li>
<li><a href="#">Deméter</a></li>
<li><a href="#">Hestia</a></li>
<li><a href="#">Hades</a></li>
<li><a href="#">Ares</a></li>
<li><a href="#">Hermes</a></li>
<li><a href="#">Hefesto</a></li>
<li><a href="#">Atenea</a></li>
<li><a href="#">Apolo</a></li>
<li><a href="#">Artemisa</a></li>
</ul>
</li>
</ul>
</body>
</html>
El widget progressbar()
El widget progress bar nos peritirá seguir un proceso de carga, aunque generalmente necesitamos relacionarlo con alguna función Ajax.<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/ui-lightness/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
//$("#barra").progressbar({value:41});
var b = $("#barra");
var e = $("#etiqueta");
b.progressbar({
value: false,
change: function() {
e.text( b.progressbar( "value" ) + "%" );
},
complete: function() {
e.text( "Completo!" );
}
});
function progreso() {
var val = b.progressbar( "value" ) || 0;
b.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progreso, 100 );
}
}
setTimeout( progreso, 3000 );
}
</script>
<title>Progress</title>
<style>
#etiqueta {
float: left;
margin-left: 50%;
margin-top: 5px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
</head>
<body>
<div id="barra"><div id="etiqueta">Cargando...</div></div>
</body>
</html>
sábado, 23 de febrero de 2013
El widget Dialog de jQuery UI
El widget dialog() es bastante sencillo, pero poderooosooooo. Nos permitirá hacer ventanas de mensaje, sin que sean consideradas ventanas de diálogo o pop-ups. Con sus diferentes parámetros podemos dar opciones de confirmación y cancelación, asi como mostrar diferentes íconos. También podemos darle efectos de entrada y de salida.<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/ui-lightness/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
//$("#mensaje").dialog( {show: {effect: "blind",duration: 1000},hide: {effect: "explode",duration: 1000}});
/*$("#mensaje").dialog( {modal: true,
height:280,
width:500,
buttons:{Continue: function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
}); */
$("#mensaje").dialog( {modal: true,
height:280,
width:500,
buttons:{Ok: function() {
$( this ).dialog( "close" );
}
}
});
}
</script>
<title>Base de UI</title>
<style>
.centra{
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<div id="mensaje" title="Advertencia">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 50px 0;"></span>La siguiente página contiene material real y explicito,
que podría afectar la sensibilidad
del espectador.</p><p class="centra">Se recomienda discreción.</p>
</div>
</body>
</html>
miércoles, 20 de febrero de 2013
La iteración rezisable en jQuery UI
Por media de esta iteración podemos cambiar el tamaño de una división, en tiempo de ejecución, arrastrando la esquina inferior izquierda.<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/ui-lightness/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
$("#arrastrame").resizable();
$("#sueltame").droppable({drop:onSuelta});
}
function onSuelta(){
$("#sueltame").css("background-color", "#F60");
$("#sueltame").text("Afrodita es la diosa del amor");
}
</script>
<title>Draggable</title>
<style>
#arrastrame{
background-image:url(imagenes/afrodita160x196.jpg);
background-repeat:no-repeat;
background-size:100%;
width:160px;
height:196px;
text-align:center;
}
#sueltame{
width:400px;
height:400px;
border:solid 1px black;
background-color:pink;
text-align:center;
position:absolute;
left:250px;
top:50px;
}
</style>
</head>
<body>
<div id="sueltame">Diosa del amor</div>
<div id="arrastrame">Arrástrame</div>
</body>
</html>
martes, 19 de febrero de 2013
El método ajax()
Para tener completo control en el envío y recepción de datos, podemos utilizar el método ajax(), el cual es más completo, pero al tener tantos parámetros (32 parámetros opcionales, algunos de los cuales ya están desactualizados) se recomienda mejor utilizar métodos como load(), post() o get(). Aqui se da un ejemplo de cómo utilizar los principales parámetros:<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Val</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
$("#popular").click(function(){
onLeePoema("0")
});
$("#clasico").click(function(){
onLeePoema("1")
});
$("#romantico").click(function(){
onLeePoema("2")
});
}
function onLeePoema(tipo){
$.ajax({
async:true,
type:"POST",
dataType:"html",
contentType:"application/x-www-form-urlencoded",
url:"poemaPOST.php",
data:"poema="+tipo,
beforeSend: inicioEnvio,
success: llegadaEnvio,
error: errorEnvio
});
}
function inicioEnvio(){
$("div").text("Inicio carga...");
}
function llegadaEnvio(datos){
$("div").html(datos);
}
function errorEnvio(datos){
$("div").text("No se pudo, lo siento");
}
</script>
</head>
<body>
<button id="popular">Poema popular</button>
<button id="clasico">Poema clásico</button>
<button id="romantico">Poema romántico</button>
<div></div>
</body>
</html>
Curso completo: https://www.udemy.com/jquery-y-mobile/
Ejemplo: http://pacoarce.com/jQuery/ajax.html
lunes, 18 de febrero de 2013
El método POST para enviar parámetros desde jQuery
El método pos enviía la información por medio de los bloques Multipurpose Internet Mail Extensions o MIME (en español "extensiones multipropósito de correo de internet") y en jQuery nunca guarda la información en el caché del navegador.El primer parámetro que ncesitamos es la URL, posteriormente se envían los parámetros como si ffueran un objeto hecho al vuelo (con llaves) y porteriormente, y de forma opcional, tenemos una función de callback que se ejecuta scuando se termina la carga de nuestro archivo.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>POST</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
$("#popular").click(function(){ onLeePoema("0");});
$("#clasico").click(function(){ onLeePoema("1");});
$("#romantico").click(function(){ onLeePoema("2");});
}
function onLeePoema(tipo){
$.post("poemaPOST.php",
{
poema:tipo
},
function(data, estatus){
$("div").html(data);
});
}
</script>
</head>
<body>
<button id="popular">Poema popular</button>
<button id="clasico">Poema clásico</button>
<button id="romantico">Poema romántico</button>
<div></div>
</body>
</html>
Suscribirse a:
Entradas (Atom)