Στο προηγούμενο μέρος

Ο κώδικας που έχουμε μέχρι τώρα, δημιουργεί ένα function με το όνομα jTabber (που είναι και το όνομα του plugin μας), του δίνει δυνατότητα χρησης options, επιλέγει μέσω του function tabUlize τα στοιχεία που θέλουμε και τους δίνει την μορφοποίηση που χρειαζόμαστε για να χειριστούμε τα tabs. Μέχρι τώρα έχουμε το εξής:

(function( jQuery ){
	jQuery.fn.jTabber = function( options ) {
		return this.each(function() {
			var settings = {
				'state' : 'open'
			};
			jQuery.fn.tabUlize = function() {
				jQuery(this).wrap('
');
				jQuery('h2').wrap('

').append('');
				jQuery('p').wrap('

');
			};
			jQuery(this).tabUlize();
		});
	};
})( jQuery );

Συνεχίζουμε γράφοντας ακριβώς κάτω από το jQuery(this).tabUlize(); κάποια conditionals. Γράφοντας:

if ( options ) {jQuery.extend( settings, options );}

δίνουμε την δυνατότητα στο plugin μας να κάνει extend τα options του. Συνεχίζουμε γράφοντας :

if (options.state == 'open') {
	 jQuery('.tab-cont').addClass('open');
	 jQuery('.tab-cont').prev('.tab-head').addClass('open-head')
} else {
	jQuery('.tab-cont').hide().addClass('closed');
	jQuery('.tab-cont').prev('.tab-head').addClass('closed-head')
}

Ο παραπάνω κώδικας δίνει την αρχική κατάσταση στα tabs σύμφωνα με τα options και την τιμή τους. Συνεχίζουμε γράφοντας από κάτω

jQuery('.tab-head').click(function() {
	jQuery(this).next('.tab-cont').slideToggle(100, function() {
		if (jQuery(this).is(':visible')) {
			jQuery(this).addClass('open');
			jQuery(this).removeClass('closed');
			jQuery(this).prev('.tab-head').addClass('open-head')
			jQuery(this).prev('.tab-head').removeClass('closed-head')
		} else {
			jQuery(this).removeClass('open');
			jQuery(this).addClass('closed');
			jQuery(this).prev('.tab-head').removeClass('open-head')
			jQuery(this).prev('.tab-head').addClass('closed-head')
		}
	});
});

ο παραπάνω κώδικας είναι αυτός που δίνει την λειτουργικότητα που θέλουμε στα στοιχεία της σελίδας μας. Κάθε φορά που γίνεται κλικ σε ένα tab header, επιλέγουμε το αμέσως επόμενο div που έχει το class tab-cont, του κάνουμε ένα slideToggle, και ξεκινάμε μια διαδικασία ελέγχων για να προσθέσουμε ή να αφαιρέσουμε κάποια classes ώστε να κάνουμε τον κώδικα μας όσο πιο user friendly γίνεται. Πρόσθέτοντας και αφαιρώντας τις κλάσεις, μπορούμε να δώσουμε στον χρήστη την δυνατότητα να δώσει stlyes μέσω των CSS στα στοιχεία που έχουμε δημιουργήσει.

Τέλος γράφουμε το εξής:

jQuery('.tab-head').hover(function(){
	$(this).addClass('hover');
},
function(){
	jQuery('.tab-head').removeClass('hover');
}
);

για να δώσουμε επιπλέον κλάσεις όταν ο χρήστης περνάει τον κέρσορα πάνω από τα tabs. Πλέον είμαστε έτοιμοι. Το μόνο που έχουμε να κάνουμε είναι στο head της σελίδας μας να συμπεριλάβουμε το plugin μας με τον κώδικα:

%MINIFYHTML77aaa49abe8088c2068d99e714fecc202%

και από κάτω να καλέσουμε το plugin μας να εφαρμόσει την λειτουργικότητα του στο στοιχείο που θέλουμε, γράφοντας:

%MINIFYHTML77aaa49abe8088c2068d99e714fecc203%

Παρατηρήστε ότι δεν περνάμε αρχική τιμή, αλλά το plugin πάει και παίρνει ως αρχική τιμή αυτή που του ορίσαμε (δηλαδή ‘state’ : ‘open’)

Mπορείτε να κατεβάσετε δωρεάν το jTabber Plugin και να το χρησιμοποιήσετε όπως θέλετε στις δουλειές σας