Φιλτράρισμα και Ταξινόμηση σελίδας με JQuery

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

Φιλτράρισμα και Ταξινόμηση σελίδας με JQuery

Δημοσίευση από fafos » 12 Φεβ 2011 17:27

Tώρα τελευταία είναι της μόδας να εμφανίζουμε τα δεδομένα με Ajax μίας σελίδας φιλτράροντάς τα ανάλογα με την-τις κατηγορίες που ανήκουν ή αλλαζοντάς τους την ταξινόμηση εμφάνισης (οριζόντια ή κάθετα). Το παρακάτω βοήθημα δείχνει πως μπορούμε να το κάνουμε με την Jquery.


Φιλτράρισμα ανάλογα με τις κατηγορίες:


Υποθέτουμε ότι σε μία σελίδα του site μας εμφανίζουμε κάποια άρθρα τα οποία ανήκουν σε διαφορετικές κατηγορίες. Κάποια από αυτά

μπορεί να ανήκουν και σε πάνω από 1 κατηγορίες. Δυναμικά (π.χ. με php) θα πρέπει να ζητήσουμε από την βάση μας να μας δώσει τα

άρθρα της ανάλογης κατηγορίας με κάποια id κατηγορίας (π.χ. ?category=123) και αναγκαστικά θα κάνει refresh στην σελίδα. Με τον

παρακάτω τρόπο δεν χρειάζεται να καλέσουμε βάση ή να ανανεώσουμε την σελίδα αφού όλα γίνονται με Ajax.


DEMO: http://istopoli.com/tuts/filters/


σε αυτό το demo έχω κάποια άρθρα που ανήκουν στις κατηγορίες "Λαχανικά", "Ψάρια" και "Κρέατα". Άλλα άρθρα ανήκουν σε μία κατηγορία

και άλλα σε 2 κατηγορίες (μπορούν να ανήκουν σε όσες κατηγορίες θέλουμε).

Το Script:

Κώδικας: Επιλογή όλων

<script type="text/javascript" src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
	$&#40;'ul#filtro a'&#41;.click&#40;function&#40;&#41; &#123;
		$&#40;this&#41;.css&#40;'outline','none'&#41;;
		$&#40;'ul#filtro .current'&#41;.removeClass&#40;'current'&#41;;
		$&#40;this&#41;.parent&#40;&#41;.addClass&#40;'current'&#41;;
		
		var filtro = $&#40;this&#41;.attr&#40;"title"&#41;;
				
		if&#40;filtro == 'all'&#41; &#123;
			$&#40;'div#content .filtro.hidden'&#41;.fadeIn&#40;'slow'&#41;.removeClass&#40;'hidden'&#41;;
		&#125; else &#123;
			
			$&#40;'div#content .filtro'&#41;.each&#40;function&#40;&#41; &#123;
				if&#40;!$&#40;this&#41;.hasClass&#40;filtro&#41;&#41; &#123;
					$&#40;this&#41;.fadeOut&#40;'normal'&#41;.addClass&#40;'hidden'&#41;;
				&#125; else &#123;
					$&#40;this&#41;.fadeIn&#40;'slow'&#41;.removeClass&#40;'hidden'&#41;;
				&#125;
			&#125;&#41;;
		&#125;
		
		return false;
	&#125;&#41;;
&#125;&#41;;

</script>
Το μενού με τις κατηγορίες:

Κώδικας: Επιλογή όλων

		<h2>Φιλτράρισμα</h2>
		<ul id="filtro">
			<li class="cat current"><a href="#" title="all">Όλα</a></li>
			<li class="cat "><a href="#" title="laxanika">Λαχανικά</a></li>
			<li class="cat "><a href="#" title="psaria">Ψάρια</a></li>
			<li class="cat "><a href="#" title="kreata">Κρέατα</a></li>
		</ul>
			<div style="clear&#58;both;"></div>

Τα δεδομένα της σελίδας μας:

Κώδικας: Επιλογή όλων

		<div id="content">


<ul class="switch">		
		
	<li class="filtro laxanika"><div> test laxanika</div></li>	
		
	<li class="filtro psaria"><div> test psaria</div></li>	
	
	<li class="filtro kreata"><div> test kreata</div></li>			
		
			
	<li class="filtro psaria"><div > test psaria 2</div></li>	
		
	<li class="filtro laxanika"><div> test laxanika 2</div></li>	
	
	<li class="filtro kreata"><div> test kreata 2</div></li>			
		
	<li class="filtro laxanika"><div> test laxanika 3</div></li>		
		
	<li class="filtro psaria"><div> test psaria 3</div></li>	
	
	<li class="filtro kreata"><div > test kreata 3</div></li>				
		
	<li class="filtro laxanika kreata"><div> test laxanika kai kreata</div></li>		
		
	<li class="filtro psaria kreata"><div> test psaria kai kreata</div></li>	
	
	<li class="filtro kreata psaria"><div > test kreata kai psaria</div></li>			
		
</ul>		
		
		
		</div>

Στο script του λέω με να πάρει τις τιμές που δίνω στο "title" των links που έχω στο μενού:

var filtro = $(this).attr("title");

με το "all" του ζητάω να εμφανίσει όλα τα δεδομένα ανεξαρτήτως κατηγορίας. Αν πατήσω κάποιο άλλο link θα πάρει την τιμή του title και

θα ψάξει στα δεδομένα να βρει όλα τα <li> που έχουν μέσα στην class την ανάλογη τιμή:

<a href="#" title="laxanika">Λαχανικά</a>

<li class="filtro laxanika"><div> test laxanika</div></li>

(περιττό να αναφέρω ότι αυτές οι τιμές πρέπει να είναι στα Αγγλικά)

Στο συγκεκριμένο παράδειγμα έχω εφέ εμφάνισης το fade... μπορείτε να βάλετε όποιο εφέ θέλετε της jquery... δείτε ένα demo με slide:

http://istopoli.com/tuts/filters/filter-slide.html


Για να πάρετε τον κώδικα κάντε δεξί κλικ πάνω στις σελίδες των demo και αντιγράψτε τον κώδικα!
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

Φιλτράρισμα και Ταξινόμηση σελίδας με JQuery

Δημοσίευση από fafos » 12 Φεβ 2011 17:28


Αλλαγή Εμφάνισης Δεδομένων Σελίδας:


Εδώ αλλάζουμε την εμφάνιση των άρθρων σε οριζόντια ή κάθετα boxes.

DEMO: http://istopoli.com/tuts/filters/switch.html


Το Script:

Κώδικας: Επιλογή όλων

<script type="text/javascript" src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script>
$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;
 		  $&#40;"ul.switch"&#41;.fadeIn&#40;"slow"&#41;.addClass&#40;"boxes"&#41;;
		        $&#40;"ul.switch"&#41;.removeClass&#40;"switch-cur"&#41;;	 
	$&#40;"a.switch-icon"&#41;.toggle&#40;function&#40;&#41;&#123;
	  $&#40;this&#41;.addClass&#40;"switch-cur"&#41;; 
	  $&#40;"ul.switch"&#41;.fadeOut&#40;"slow", function&#40;&#41; &#123;
		    $&#40;this&#41;.slideDown&#40;1000&#41;.removeClass&#40;"boxes"&#41;;
		&#125;&#41;;	

	  &#125;, function &#40;&#41; &#123;
      $&#40;this&#41;.removeClass&#40;"switch-cur"&#41;;	  

	  $&#40;"ul.switch"&#41;.fadeOut&#40;"slow", function&#40;&#41; &#123;
		  $&#40;this&#41;.slideDown&#40;1000&#41;.addClass&#40;"boxes"&#41;;
		&#125;&#41;;
	&#125;&#41;; 

&#125;&#41;;

</script>

Το εικονίδιο αλλαγής:

Κώδικας: Επιλογή όλων

		<h2>Εμφάνιση</h2>
 		<a href="#" class="switch-icon"></a> 

CSS:

Κώδικας: Επιλογή όλων

<style>


.main ul li a&#58;link,.main ul li a&#58;visited,.main ul li a&#58;active &#123;
display&#58;block;
color&#58;#FFF;
width&#58;176px;
margin-bottom&#58;5px;
background-color&#58;#5badff;
border&#58;1px solid #353535;
font-size&#58;12px;
font-family&#58;Verdana;
padding&#58;3px 3px 3px 10px;
&#125;

.main ul li &#123;
color&#58;#FFF;
list-style-image&#58;none;
list-style-type&#58;none;
&#125;

.main ul &#123;
float&#58;left;
margin-left&#58;0;
padding&#58;0;
&#125;

.main ul li a&#58;hover &#123;
background-color&#58;#353535;
border&#58;1px solid #424242;
&#125;

ul.switch li &#123;
font-size&#58;12px;
font-family&#58;Verdana;
font-weight&#58;700;
color&#58;#fff;
background-color&#58;#0080ff;
text-align&#58;center;
width&#58;200px;
height&#58;100px;
position&#58;relative;
float&#58;left;
margin&#58;5px 5px 15px;
padding&#58;10px;
&#125;

ul.boxes li &#123;
font-size&#58;12px;
font-family&#58;Verdana;
font-weight&#58;700;
color&#58;#fff;
background-color&#58;#0080ff;
text-align&#58;center;
margin-bottom&#58;15px;
width&#58;800px;
height&#58;80px;
padding&#58;10px;
&#125;

.switch &#123;
list-style-type&#58;none;
&#125;

a.switch-icon &#123;
width&#58;28px;
height&#58;22px;
line-height&#58;22px;
display&#58;block;
background&#58;url&#40;switch-icon.png&#41; no-repeat;
outline&#58;none;
text-indent&#58;-9999px;
margin&#58;10px 0;
padding&#58;0;
&#125;

a&#58;hover.switch-icon &#123;
filter&#58;alpha&#40;opacity=75&#41;;
opacity&#58;.75;
-ms-filter&#58;"progid&#58;DXImageTransform.Microsoft.Alpha&#40;Opacity=75&#41;";
&#125;

a.switch-cur &#123;
background-position&#58;left bottom;
&#125;



</style>

Τα δεδομένα της σελίδας είναι ακριβώς όπως και στον κώδικα για το φιλτράρισμα!


Εδώ πατώντας το εικονίδιο του λέμε να αλλάξει την διάταξη των δεδομένων από οριζόντια σε κάθετα και το αντίθετο. Στην

πραγματικότητα δεν κάνει τίποτα άλλο από το να αλλάζει το style του <ul> από "switch" σε "boxes" και το αντίστροφο. Μέσα στο css

έχουμε αυτές τις classes αλλάζοντας τον τρόπο εμφάνισης:

Κώδικας: Επιλογή όλων

ul.switch li &#123;
font-size&#58;12px;
font-family&#58;Verdana;
font-weight&#58;700;
color&#58;#fff;
background-color&#58;#0080ff;
text-align&#58;center;
width&#58;200px;
height&#58;100px;
position&#58;relative;
float&#58;left;
margin&#58;5px 5px 15px;
padding&#58;10px;
&#125;

ul.boxes li &#123;
font-size&#58;12px;
font-family&#58;Verdana;
font-weight&#58;700;
color&#58;#fff;
background-color&#58;#0080ff;
text-align&#58;center;
margin-bottom&#58;15px;
width&#58;800px;
height&#58;80px;
padding&#58;10px;
&#125;

Μπορείτε να δείτε τον κώδικα με δεξιό κλικ πάνω στην σελίδα του demo.


Το φιλτράρισμα και η ταξινόμηση μπορούν να εφαρμοστούν στην ίδια σελίδα χωρίς πρόβλημα απλώς χρησιμοποιώντας και τα 2 scripts.

Δείτε ένα demo εδώ:


http://istopoli.com/tuts/filters/switch-filter.html


Το css που εφαρμόζω στα demos είναι δοκιμαστικά. Μπορείτε να βάλετε ότι style θέλετε.
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες