JQuery es mi framework favorito para el desarrollo de paginas web interactivas, ademas de tener exelentes herramientas en su web, en esta entrada les mostrare como usar JQuery ui el cual pueden personalizar desde este sitio http://jqueryui.com/themeroller/.
Paso 1. Configurar nuestro theme en con las opciones que están en las pestañas y despues dar click en download theme.
Después se mostrara una pagina como la siguiente den click en download , seleccionen todas las opciones.
Descomprimir el zip con nombre jquery-ui-1.8.2.custom, tendrá los siguientes archivos.
Paso 2. Creamos un archivo html llamado prueba.html y otro dentro de la carpeta css que se llame prueba.css
Codigo de prueba.html:
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/le-frog/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<link type="text/css" href="css/prueba.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
</head>
<body>
<div id="ui_contededor" class="ui-widget">
<div id="ui_1" class="ui_1">
<h3 class="ui-widget-header ui-corner-all">Widget</h3>
<div class="ui-widget-content ui-corner-top">
<a>Prueba</a>
</div>
</div>
<div id="espacio" class="espacio"></div>
<div id="ui_2" class="ui_2">
<h3 class="ui-widget-header ui-corner-all">Widget</h3>
<div class="ui-widget-content ui-corner-top">
<a>Prueba</a>
</div>
</div>
</div>
</body>
</html>
Codigo de prueba.css
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.espacio{
padding: 4px;
width: 1%;
margin-left: 2px;
float: left;
}
.ui_1{
float: left;
width: 400px;
}
.ui_2{
float: left;
width: 400px;
}
Salida:
En este ejemplo creamos dos widgets por medio de dos div la manera de como se logra esto es por medio de los css, ejemplo: para poner en encabezado ocupamos lo siguiente
<h3 class="ui-widget-header ui-corner-all">Widget</h3>
y para el contenido:
<div class="ui-widget-content ui-corner-top">
Pero podemos empezar a jugar con los css de jquery algunos son los siguientes:
Widget Containers
.ui-widget: Crea un contenedor de Widgets (Aplica estilos css)
.ui-widget-header: Crea un encabezado de un widget (Aplica estilos css)
.ui-widget-content: Aplica estilos al contenido del widget
Misc Visuals
Corner Radius helpers (Estilos de bordes)
- .ui-corner-tl: Applies corner-radius to top left corner of element.
- .ui-corner-tr: Applies corner-radius to top right corner of element.
- .ui-corner-bl: Applies corner-radius to bottom left corner of element.
- .ui-corner-br: Applies corner-radius to bottom right corner of element.
- .ui-corner-top: Applies corner-radius to both top corners of element.
- .ui-corner-bottom: Applies corner-radius to both bottom corners of element.
- .ui-corner-right: Applies corner-radius to both right corners of element.
- .ui-corner-left: Applies corner-radius to both left corners of element.
- .ui-corner-all: Applies corner-radius to all 4 corners of element.
En nuestro ejemplo el contenido solo tiene borde redondeado en la parte de arriba, pero si queremos que tenga solo del lado derecho, solo es cuestion de ocupar el estilo correspondiente ejemplo:
<div id="ui_1" class="ui_1">
<h3 class="ui-widget-header ui-corner-right">Widget</h3>
<div class="ui-widget-content ui-corner-top">
<a>Prueba</a>
<a>Prueba</a>
</div>
</div>
