se puede ordenar contenido con Javascript?

[djkiku]

Hola!

Estoy creando una tienda online, y al no contratar ningun hosting la hago a traves de HTML y JAVASCRIPT

Quisiera saber si es posible poner una etiqueta HTML por ejemplo: SONY
Y crear un enlace que al clicar en el, todos los contenidos que contengan SONY aparescan y todo lo demas desaparesca..

es una manera de ordenador el contenido.. por el precio igual, se puede poner el precio y de manera automatica ordenador de mayor a menor ?


Hasta aqui llevo mi tienda: http://portatiles-muy-baratos.blogspot.com.es/

Muchas Gracias a todos!

[Dradi7]

Este ejemplo te puede servir

http://www.evoluted.net/thinktank/de...ltering-part2/

[djkiku]

Wauuw Dradi7, esta excelentisimo!

El problema es saberlo hacer funcionar no? Veo que tiene algunos que otros archivos .js, y lo dificil es compajinar los elementos con los botones que hagan sus funciones!

Con algo mucho mas simple y facil de entender también me iria mas que bien!

Es el inconveniente de ser un novato.. jeje

[Dradi7]

Bueno te voy a explicar como funciona este codigo,

Primero necesitas lo siguientes script nada mas

jQuery
jQuery Easing
jQuery Quicksand

Luego primero el HTML como lo debes manejar

Primero necesitas los filtros, tu ya lo acomodas bonito para que parezca filtros

Código HTML:

<ul id="filterOptions">
    <li class="active"><a href="#" class="all">All</a></li>
    <li><a href="#" class="prem">Premier League</a></li>
    <li><a href="#" class="champ">Championship</a></li>
    <li><a href="#" class="league1">League 1</a></li>
    <li><a href="#" class="league2">League 2</a></li>
  </ul>
 

filterOptions = viene siendo el contenedor de los filtros
filterOptions li a = viene siendo el filtro respectivo a realizar en donde class es el filtro a buscar en tu listado lo que esta dentro del link solo viendo siendo la etiqueta a mostrar en el filtro

Código HTML:

<ul class="ourHolder">
    <li class="item" data-id="id-1" data-type="league2">
      <img src="images/accrington-stanley.jpg" alt="Accrington Stanley" />
      <h3>Accrington Stanley</h3>
    </li>
    <li class="item" data-id="id-2" data-type="prem">
      <img src="images/arsenal.jpg" alt="Arsenal" />
      <h3>Arsenal</h3>
    </li>
    <li class="item" data-id="id-3" data-type="league2">
      <img src="images/burton-albion.jpg" alt="Burton Albion" />
      <h3>Burton Albion</h3>
    </li>
    <li class="item" data-id="id-4" data-type="champ">
      <img src="images/cardiff-city.jpg" alt="Cardiff City" />
      <h3>Cardiff City</h3>
    </li>
    <li class="item" data-id="id-5" data-type="champ">
      <img src="images/derby-county.jpg" alt="Derby County" />
      <h3>Derby County</h3>
    </li>
    <li class="item" data-id="id-6" data-type="prem">
      <img src="images/everton.jpg" alt="Everton" />
      <h3>Everton</h3>
    </li>
    <li class="item" data-id="id-7" data-type="league2">
      <img src="images/morecambe.jpg" alt="Morecambe" />
      <h3>Morecambe</h3>
    </li>
    <li class="item" data-id="id-8" data-type="champ">
      <img src="images/norwich-city.jpg" alt="Norwich City" />
      <h3>Norwich City</h3>
    </li>
    <li class="item" data-id="id-9" data-type="league1">
      <img src="images/notts-county.jpg" alt="Notts County" />
      <h3>Notts County</h3>
    </li>
    <li class="item" data-id="id-10" data-type="champ">
      <img src="images/reading.jpg" alt="Reading" />
      <h3>Reading</h3>
    </li>
    <li class="item" data-id="id-11" data-type="league1">
      <img src="images/sheffield-wednesday.jpg" alt="Sheffield Wednesday" />
      <h3>Sheffield Wednesday</h3>
    </li>
    <li class="item" data-id="id-12" data-type="prem">
      <img src="images/sunderland.jpg" alt="Sunderland" />
      <h3>Sunderland</h3>
    </li>
    <li class="item" data-id="id-13" data-type="prem">
      <img src="images/tottenham-hotspur.jpg" alt="Tottenham Hotspur" />
      <h3>Tottenham Hotspur</h3>
    </li>
    <li class="item" data-id="id-14" data-type="champ">
      <img src="images/watford.jpg" alt="Watford" />
      <h3>Watford</h3>
    </li>    
  </ul>
 

ourHolder = viene siendo el contenedor de toda la informacion que vas a listar
ourHolder li = viene siendo cada item que cuenta el listado, class significa que es un item de la data, data-id solamente es un correlativo, data-type este atributo es que te va a permitir hacer la magia es decir poder filtrarlo de acuerdo lo que esta arriba, lo que esta dentro de li ya viene siendo solo informacion a mostrar.

Saludos

[djkiku]

Woooo lo explicas tan bien que lo entendi a la primera!!!! Mil y una gracias!!! Voy enseguida a probarlo! :)
Muchisimas gracias! Muy agradecido!