Data-filter σε HTML5

[leonidas_fs]

Γεια χαρα παιδιά,

 

Εχω γράψει κάποια άρθα, τα οποία ειναι μεμονομένα. Δηλαδή κάθε άρθρο έχει την δική του html σελίδα.

 

Θέλω να κάνω μια ξεχωριστή html σελίδα, η οποία θα έχει όλα τα αρθρα μαζεμένα, αναλόγως τον τύπο που θα έχει κάθε άρθρο. π.χ άρθρα για παπούτσια, για ρούχα κτλ.

 

Πως μπορεί να γίνει αυτό; Με data-filter και αν ναι, πως;

Επεξ/σία 10 Νοεμβρίου 2014 από leonidas_fs

[leonidas_fs]

Κανείς;; Καμία εναλλακτική;

[defacer]

Not enough information.

[leonidas_fs]

Οκ λοιπόν ας πούμε εχω τις κάτωθι σελίδες.

nike.html, adidas.html, gucci.html, versace.html. Καθε σελίδα εχει div όπου μέσα στο div είναι κείμενο.

 

Θέλω να κανω μια σελίδα "articles.html", όπου εκει θα υπάρχει ενα checkbox ή κατι παρόμοιο anyway και ο χρήστης θα επιλέγει να διαβάσει άρθρα αναλόγως τον "τύπο". Π.χ αν θέλει να διαβάσει άρθρα μόνο για τσάντες, τότε θα του εμφανίσει μονο την gucci.html και την versace.html, εαν επιλέξει για παπούτσια τότε θα του εμφανίσει μονο την nike.html και την adidas.html!

 

Ευχαριστώ!

[nucleus]

Μπορείς να χρησιμοποιήσεις το παρακάτω

 

http://isotope.metafizzy.co/filtering.html

 

Δες το παράδειγμα.Στην δικιά σου περίπτωση τα buttons θα είναι οι επιλογές που έχεις πχ Τσάντες,Παπούτσια.

 

<button class="button" data-filter=".tsantes">Τσάντες</button>
<button class="button" data-filter=".papoytsia">Παπούτσια</button>

Μέσα στον container του isotope

<div class="isotope">
  <a class="element-item tsantes" data-category="tsantes" href="versace.html">
    <h3 class="name">Versace</h3>
  </a>
  <a class="element-item tsantes " data-category="tsantes" href="gucci.html">
    <h3 class="name">Gucci</h3>
  </a>
  <a class="element-item papoytsia " data-category="papoytsia" href="nike.html">
    <h3 class="name">Nike</h3>
  </a>
  <a class="element-item papoytsia " data-category="papoytsia" href="adidas.html">
    <h3 class="name">Adidas</h3>
  </a>
</div>

Συνοψίζοντας

 

Αν κάνεις edit το παράδειγμα εκεί που λέει το html βάλε και τα 2 παραπάνω κομμάτια.

 

Το html θα πρέπει να μοιάζει με το παρακάτω

 

 

 

<div id="filters" class="button-group">
  <button class="button is-checked" data-filter="*">show all</button>
 <button class="button" data-filter=".tsantes">Τσάντες</button>
<button class="button" data-filter=".papoytsia">Παπούτσια</button>
</div>

<div class="isotope">
  <div class="isotope">
  <a class="element-item tsantes" data-category="tsantes" href="versace.html">
    <h3 class="name">Versace</h3>
  </a>
  <a class="element-item tsantes " data-category="tsantes" href="gucci.html">
    <h3 class="name">Gucci</h3>
  </a>
  <a class="element-item papoytsia " data-category="papoytsia" href="nike.html">
    <h3 class="name">Nike</h3>
  </a>
  <a class="element-item papoytsia " data-category="papoytsia" href="adidas.html">
    <h3 class="name">Adidas</h3>
  </a>
</div>

 

 

Για δοκίμασε να πατήσεις τα Buttons.Κάτι τέτοιο ψάχνεις? Μπορείς μετά να μορφοποιήσεις τα links με css. Have fun