INDICACIONES PREVIAS. DESCARGAR LOS

INDICACIONES PREVIAS.
DESCARGAR LOS SCRIPTS DE MOOTOOLS.
DESCARGAR EL SCRIPT DE TRINY TABLE.
PASOS:
1. Crear la carpeta de los scripts.
2. Copiar los scripts de mootools y de tinytable a la carpeta de los scripts.
3. MOOTOOLS.
3.1. Colocar Id al formulario y a todos los campos del formulario para poder trabajar con el DOM.
3.2. Llamar los scripts de mootools con el siguiente código.
<script type="text/javascript" src="scripts/mootools.js"></script>
<script type="text/javascript" src="scripts/mootools-more.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
validate = new Form.Validator.Inline("frmDatos");
$('btnConvertir').addEvent('click', function() {
validate.validate();
});
});
</script>
3.3. En los elementos sombreados debes colocar el nombre del formulario y del botón.
3.4. En cada campo del formulario debes colocar la clase que validará la información digitada.

required.

minLength.

maxLength.

validate‐integer.

validate‐numeric.

validate‐digits

validate‐alpha

validate‐alphanum

validate‐date

validate‐email

validate‐url

validate‐currency‐dollar
3.5. En la hoja de estilo de tu documento HTML debes colocar los siguientes estilos.
.validation-passed { border-color: blue; } /* campo valido */
.validation-failed { border-color: red; background-color: #F8E0E0 } /* campo invalido */
.validation-advice { color: #C00; font-size: 11px; } /* mensaje de error */
4. TINYTABLE
4.1. Copiar las imágenes para la paginación y búsqueda en la tabla.
4.2. Debes tener creada la tabla (filas, columnas, encabezados y celdas).
4.3. Crear los DIVS de la tinyTable
<div id="tablewrapper">
<div id="tableheader">
<div class="search">
<select id="columns" onchange="sorter.search('query')"></select>
<input type="text" id="query" onkeyup="sorter.search('query')" />
</div>
<span class="details">
<div>Registros <span id="startrecord"></span>-<span id="endrecord"></span> de <span
id="totalrecords"></span></div>
<div><a href="javascript:sorter.reset()">Reiniciar</a></div>
</span>
</div>
<table cellpadding="0" cellspacing="0" border="0" id="table" class="tinytable">
Codigo de la tabla aquí
</table>
<div id="tablefooter">
<div id="tablenav">
<div>
<img src="./imagenes/first.gif" width="16" height="16" alt="First Page"
onclick="sorter.move(-1,true)" />
<img src="./imagenes/previous.gif" width="16" height="16" alt="First Page"
onclick="sorter.move(-1)" />
<img src="./imagenes/next.gif" width="16" height="16" alt="First Page"
onclick="sorter.move(1)" />
<img src="./imagenes/last.gif" width="16" height="16" alt="Last Page"
onclick="sorter.move(1,true)" />
</div>
<div>
<select id="pagedropdown"></select>
</div>
<div>
<a href="javascript:sorter.showall()">Ver todos</a>
</div>
</div>
<div id="tablelocation">
<div>
<select onchange="sorter.size(this.value)">
<option value="5">5</option>
<option value="10" selected="selected">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span>Entradas por página</span>
</div>
<div class="page">Página <span id="currentpage"></span> de <span
id="totalpages"></span></div>
</div>
</div>
</div>
4.4. Colocar el <thead></thead> para los encabezados de columna y el <tbody></tbody> para el
contenido de la tabla.
4.5. Colocar los encabezados <H3> a los encabezados de columna y su hay algún campo que no se
requiera ordenarlo colocar class=”nosort”
<tr>
<th class="nosort"><h3>id</h3></th>
<th><h3>Nombre</h3></th>
<th><h3>Valor en $</h3></th>
<th colspan="2"><h3>Conversión</h3></th>
</tr>
4.6. Llamar el script de tinyTable.
<script type="text/javascript" src="scripts/script.js"></script>
<script type="text/javascript">
var sorter = new TINY.table.sorter('sorter','table',{
headclass:'head',
ascclass:'asc',
descclass:'desc',
evenclass:'evenrow',
oddclass:'oddrow',
evenselclass:'evenselected',
oddselclass:'oddselected',
paginate:true,
size:10,
colddid:'columns',
currentid:'currentpage',
totalid:'totalpages',
startingrecid:'startrecord',
endingrecid:'endrecord',
totalrecid:'totalrecords',
hoverid:'selectedrow',
pageddid:'pagedropdown',
navid:'tablenav',
sortcolumn:1,
sortdir:1,
init:true
});
</script>
4.7. En la hoja de estilos debes colocar los siguientes estilos.
/*Estilos para las tablas de datos*/
#tablewrapper {width:100%; margin:0 auto}
#tableheader {height:55px}
.search {float:left; padding:6px; border:1px solid #c6d5e1; background:#fff}
#tableheader select {float:left; font-size:12px; width:125px; padding:2px 4px 4px}
#tableheader input {float:left; font-size:12px; width:225px; padding:2px 4px 4px; margin-left:4px}
.details {float:right; padding-top:12px}
.details div {float:left; margin-left:15px; font-size:12px}
.tinytable {width:90%; border-left:1px solid #c6d5e1; border-top:1px solid #c6d5e1; borderbottom:none}
.tinytable th {background:url(imagenes/header-bg.gif); text-align:left; color:#cfdce7; border:1px solid
#fff; border-right:none}
.tinytable th h3 {font-size:10px; padding:6px 8px 8px; color: white}
.tinytable td {padding:4px 6px 6px; border-bottom:1px solid #c6d5e1; border-right:1px solid #c6d5e1}
.tinytable .head h3 {background:url(imagenes/sort.gif) 7px center no-repeat; cursor:pointer; paddingleft:18px}
.tinytable .desc, .sortable .asc {background:url(imagenes/header-selected-bg.gif)}
.tinytable .desc h3 {background:url(imagenes/desc.gif) 7px center no-repeat; cursor:pointer; paddingleft:18px}
.tinytable .asc h3 {background:url(imagenes/asc.gif) 7px center no-repeat; cursor:pointer; paddingleft:18px}
.tinytable .head:hover, .tinytable .desc:hover, .tinytable .asc:hover {color:#fff}
.tinytable .evenrow td {background:#fff}
.tinytable .oddrow td {background:#ecf2f6}
.tinytable td.evenselected {background:#ecf2f6}
.tinytable td.oddselected {background:#dce6ee}
.tinytable tfoot {background:#fff; font-weight:bold}
.tinytable tfoot td {padding:6px 8px 8px}
#tablefooter {height:15px; margin-top:20px}
#tablenav {float:left}
#tablenav img {cursor:pointer}
#tablenav div {float:left; margin-right:15px}
#tablelocation {float:right; font-size:12px}
#tablelocation select {margin-right:3px}
#tablelocation div {float:left; margin-left:15px}
.page {margin-top:2px; font-style:italic}
#selectedrow td {background:#c6d5e1}