Posts Tagged ‘ jquery ’

ixedit jquery muy rápido


ixedit  de    http://www.ixedit.com/ es una aplicación gratuita y sencilla de utilizar,  sirve para generar código jquery de forma visual, sin más, su video de demostración

definitivamente jquery instantáneo

Anuncios

star rating con html, php, js y un txt


Para la parte del css me he basado en el código de Komodo Media, e cual pueden encontrar aqui
Lo interesante de este script es que uso jquery y guardo la votación en un archivo de texto y así ya no requiero una base de datos

El diseño de las star rating en el form html

Las instrucciones detalladas como ya indique las pueden encontrar en Komodo Media, asi que yo me voy a limitar a copiar el código del formulario.

1
2
3
4
5
6
7
8
9
10
11
12
13
<form method=”post” action=”index.php”>
<ul class=’star-rating’>
<li class=’current-rating’ style=’width:<?php echo 25 * round($promedio);?>px;’>Currently 3.5/6 Stars.</li>
<li><a href=’#’ title=’1′ class=’one-star’>1</a></li>
<li><a href=’#’ title=’2′ class=’two-stars’>2</a></li>
<li><a href=’#’ title=’3′ class=’three-stars’>3</a></li>
<li><a href=’#’ title=’4′ class=’four-stars’>4</a></li>
<li><a href=’#’ title=’5′ class=’five-stars’>5</a></li>
<li><a href=’#’ title=’6′ class=’six-stars’>6</a></li>
</ul>
<input value=”0″ />
<input value=”Votar” />
</form>

La hoja de estilos y el grafico de las estrellas lo encuentran en el archivo zip al final del tutorial

AJAX

Ahora necesito que cuando se le de click a una estrella, esta se marque y el valor del campo hiddden “my_vote” se modifique
Para eso voy a hacer un simple javascript invocando mi librería jquery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src=”jquery-1.2.6.min.js”></script>
<script>
$(document).ready(function(){
// Detecto la estrella que es presionada
$(“li.star a”).click(function(event){
// Recojo el valor de la estrella
valor_actual=$(this).attr(“title”);
// Cambio el estilo para mostrar la estrella seleccionada
$(“li.current-rating”).css(“width”, valor_actual*25);
// Cambio el valor del campo hidden
$(“#my_vote”).attr(“value”, valor_actual);
});
});
</script>

Ya tenemos las estrellas, tambien se marcan las estrellas, ahora nos falta guardar la votación
<h2>Guardar la votación</h2>
Para eso debemos crear un archivo llamado datos.txt y deben asegurarnos que sea escribible, el codigo php requerido es:

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
// Verificamos si se ha votado
if (isset($_POST[‘my_vote’])) {
Abrimos el archivo datos.txt
$filename = ‘datos.txt’;
// Capturamos el valor del voto
$somecontent = $_POST[‘my_vote’].”\n”;
// Verificamos que nuestro archivo sea escribible
if (!$handle = fopen($filename, ‘a’)) {
echo “Cannot open file ($filename)”;
exit;
}
// Escribimos $somecontent en nuestro archivo
if (fwrite($handle, $somecontent) === FALSE) {
// Marcamos error de escritura
echo “Cannot write to file ($filename)”;
exit;
}
// El archivo se escribio correctamente y lo cerramos
fclose($handle);
}
//abro el archivo para lectura
$archivo = fopen (“datos.txt”, “r”);
$num_lineas = 0;
while (!feof ($archivo)) {
// Leo linea por linea las votaciones pasadas
if ($linea = fgets($archivo)){
// Guardo la cantidad de votaciones y sus valores
$num_lineas++;
$valores[$num_lineas]=$linea;
}
}
fclose ($archivo);
//print_r($valores);
// Calculo el total
$total=0;
for ($i=1; $i&lt;=$num_lineas; $i++) {
$total=$total+$valores[$i];
}
// Hallo el promedio y lo redondeo
$promedio=$total/$num_lineas;
echo “total: “.round($promedio);
?&gt;

formato para tablas con jquery


fuente: elWebmaster.com

La tabla es un objeto al que resulta difícil darle estilo, debido a la particularidad de su código. La mayoría de los diseñadores y desarrolladores usan div para reemplazar la tabla, ya que es mucho más fácil darle estilo.

Aún así, utilizamos tablas en muchas de nuestras aplicaciones diarias. En esta nota te presentamos 15 plugins jQuery útiles para visualizar, ordenar, filtrar y manipular los datos en una tabla.

1. DataTables

DataTables es un muy potente plugin de jQuery que ofrece una gran cantidad de características. Por ejemplo, puedes tener filtrado sobre la marcha, auto-carga de datos ajax, paginación, ordenamiento de columnas, resaltado de columnas ordenadas, plug-in de apoyo, temable por CSS o jQuery UI ThemeRoller y también una documentación completa.

sitio de DataTables»

2. uiTableFilter

Sigue leyendo