Σύστημα tabs βασιμένο σε javascript

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

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

Απάντηση
Άβαταρ μέλους
philos
Δημοσιεύσεις: 264
Εγγραφή: 30 Αύγ 2007 23:32

Σύστημα tabs βασιμένο σε javascript

Δημοσίευση από philos » 19 Ιαν 2013 22:33

Έχουμε το σύστημα tabs της μηχανής vBulletin. Όταν μεταφέρεσαι από το ένα tab στο άλλο, προβάλλονται πληροφορίες που έχουν φορτωθεί ήδη στον browser (δηλαδή δεν γίνεται κάποιο ajax load, με το που ανοίγεις τη σελίδα όλα τα δεδομένα όλων των tabs έχουν φορτωθεί). Η μετάβαση μεταξύ των tabs γίνεται χωρίς page reload.
Ο κώδικας html για δύο tab με ονομασία Name1 και Name2 είναι ο ακόλουθος:

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

	<div id="my_tabs">	
		  <div id="name1" class="tborder content_block">
        <h4 class="thead block_title">
        <a name="name1"></a>
        <span class="block_name">Name1</span>
        </h4>
        <div class="block_content" id="collapseobj_name1" style=""> 
                <!-- name1 content -->
        </div>
      </div> 
      
      <div id="name2" class="tborder content_block">
        <h4 class="thead block_title">
        <a name="name2"></a>
        <span class="block_name">Name2</span>
        </h4>
        <div class="block_content" id="collapseobj_name2" style=""> 
                <!-- name2 content -->
        </div>
      </div>  
	</div>	
	
	<script type="text/javascript">
	<!--
	vBulletin.register_control&#40;"vB_TabCtrl", "my_tabs", "$selected_tab", "&raquo;", "profile.php?u=2&do=loadtab&tabid=&#123;1&#58;tabid&#125;"&#41;;
	//-->
	</script>
Ας υποθέσουμε ότι τα tabs βρίσκονται στη σελίδα page.php, η οποία έχει πάνω πάνω αυτό τον κώδικα:

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

	if &#40;!$GET&#91;'tab'&#93;&#41;
	&#123;
		$selected_tab = $GET&#91;'tab'&#93;;
	&#125;
	else
	&#123;
		$selected_tab = '';
	&#125;	
			

Αν μπούμε στον σύνδεσμο page.php?tab=name2, η σελίδα που θα φορτώσει θα έχει ανοιχτό το tab Name2.
Τι θέλω να κάνω; Εφόσον υπάρχει η μεταβλητή tab, σκέφτηκα όταν ανοίγει μια σελίδα, να φορτώνουν (php κώδικας και queries) μόνο τα δεδομένα του tab που έχει οριστεί στον σύνδεσμο. Αυτό θα επιτευχθεί βάζοντας κάποιες if ($GET['tab'] == 'X') στο page.php.
Το πρόβλημα: τα tabs δεν είναι linkable. Δηλαδή μεταβαίνεις άμεσα από το ένα tab στο άλλο αν πατήσεις πάνω τους. Αυτό που θέλω είναι όταν κάνω click στο tab Name2 να γίνεται page reload στη σελίδα page.php?tab=name2, ώστε να δουλέψει η if ($GET['tab'] == 'X'). Πως μπορώ να το κάνω; Δοκίμασα να βάλω <a href=""></a> σε όλα τα πιθανά σημεία του παραπάνω html κώδικα, όμως με τίποτα δεν γίνεται linkable η ονομασία των tabs.
Εδώ μπορείτε να βρείτε και τον κώδικα javascript του συστήματος. Κάτι μου λέει ότι η επέμβαση που χρειάζεται είναι πολύ απλή.
Μακάρι έστω να μπορούσα να βάζω <a href στον html κώδικα ώστε τα tabs να είναι σύνδεσμοι.
Please help!

:-? :)

Άβαταρ μέλους
philos
Δημοσιεύσεις: 264
Εγγραφή: 30 Αύγ 2007 23:32

Σύστημα tabs βασιμένο σε javascript

Δημοσίευση από philos » 26 Φεβ 2013 22:11

Κανείς; :(

Άβαταρ μέλους
panxer
Δημοσιεύσεις: 113
Εγγραφή: 26 Ιουν 2011 20:29
Τοποθεσία: Athens, Greece
Επικοινωνία:

Σύστημα tabs βασιμένο σε javascript

Δημοσίευση από panxer » 27 Φεβ 2013 02:01

Κοιτάζοντας το πρόχειρα,
εκεί που είναι το

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

 
vB_TabCtrl.prototype.switch_tab = function &#40;D, E&#41; &#123;
    if &#40;this.selected_tab_id != D || E&#41; &#123;
        var C, B, A;
        this.hide_menu&#40;&#41;;
        this.selected_tab_id = D;
        this.selected_tab = YAHOO.util.Dom.get&#40;this.selected_tab_id + "_tab"&#41;;
αν θες να κρατήσεις το tab naming που έχει ήδη όπως φαίνεται, για να μην αλλάζεις ονόματα, βάλε από κάτω ένα

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

window.location = 'http&#58;//example.com/page.php?tab=' + this.selected_tab;  
Θα σε πετάξει -λογικά- εκεί που θες.

Πρέπει έπειτα στο php κομμάτι να κάνεις output με τα σωστά dom classes το κάθε tab, όπως φαίνεται να το κάνει στο js όταν κάνεις select ένα νέο tab
ή
να πειράξεις το js να διαβάζει σε ποιο ?tab= είσαι για να κάνει το class sorting. Τα functions υπάρχουν ήδη.

ΥΓ. Προσωπική άποψη, που δεν έχει να κάνει με αυτό που ζητάς - πες το και συμβουλή: Πολύ περισσότερο θα κερδίσεις σε resources και UI feel βάζοντας τα mysql queries που γίνονται πιο συχνά access σε έναν memcached και να τα τραβάς από κεί, παρά να τραβήξεις τον δρόμο που φαίνεται να πηγαίνεις

Άβαταρ μέλους
philos
Δημοσιεύσεις: 264
Εγγραφή: 30 Αύγ 2007 23:32

Σύστημα tabs βασιμένο σε javascript

Δημοσίευση από philos » 27 Φεβ 2013 12:25

Σε ευχαριστώ πολύ για την απάντηση! Αυτό με το memcached θα το ψάξω σύντομα γιατί θα μου χρειαστεί, αλλά επί της παρούσης βιάζομαι. :oops:

Λοιπόν, δουλεύει με την ακόλουθη γραμμή:

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

window.location ='http&#58;//example.com/page.php?tab=' + this.selected_tab_id;
(δλδ ήθελε το tab_id)

ΟΜΩΣ όταν φορτώνω τη σελίδα, γίνεται συνεχώς reload στο
http://example.com/page.php?tab=Χ
... ακόμα και αν δεν έχω κάνει click σε tab. Απλά ανανεώνεται ασταμάτητα μέχρι να πατήσω διακοπή φόρτωσης στον browser. :(

Αν πατήσω πολλές φορές click σε άλλο tab (πολλές φορές = για να προλάβει ο browser να αντιληφθεί το click καθώς κάνει συνεχώς reload), τότε πράγματι με μεταβαίνει στο ?tab=Y, και αρχίζει ένας νέος κύκλος page reload, αυτή τη φορά στο ?tab=Y

Καμιά ιδέα; Πρέπει να είναι εύκολη η διόρθωση αυτή :idea:

Άβαταρ μέλους
panxer
Δημοσιεύσεις: 113
Εγγραφή: 26 Ιουν 2011 20:29
Τοποθεσία: Athens, Greece
Επικοινωνία:

Σύστημα tabs βασιμένο σε javascript

Δημοσίευση από panxer » 27 Φεβ 2013 12:52

Μήπως να έβαζες το window.location μια γραμμή πάνω από το

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

this.load_tab_content&#40;this.selected_tab_id&#41;; 
Πρόσεχε, το js ελέγχει αν το dom είναι στο tab είναι σωστό (δλδ αλλάζει το dom και μετά ελέγχει πάλι να δει αν έχει αλλάξει το tab κλπ), αν δεν έχεις ήδη βάλει έλεγχο για το _GET['page'] για να κάνεις render τα tabs με τα σωστά classes από το πρώτο page load θα σου κάνει πάλι infinite loop.

Πέρασε το αν θέλεις σε ένα jsfiddle είναι αρκετά περίεργο να το διαβάσει και να σε βοηθήσει κάποιος έτσι.[/i]

Άβαταρ μέλους
philos
Δημοσιεύσεις: 264
Εγγραφή: 30 Αύγ 2007 23:32

Σύστημα tabs βασιμένο σε javascript

Δημοσίευση από philos » 27 Φεβ 2013 13:51

panxer έγραψε:Μήπως να έβαζες το window.location μια γραμμή πάνω από το

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

this.load_tab_content&#40;this.selected_tab_id&#41;; 
Πρόσεχε, το js ελέγχει αν το dom είναι στο tab είναι σωστό (δλδ αλλάζει το dom και μετά ελέγχει πάλι να δει αν έχει αλλάξει το tab κλπ), αν δεν έχεις ήδη βάλει έλεγχο για το _GET['page'] για να κάνεις render τα tabs με τα σωστά classes από το πρώτο page load θα σου κάνει πάλι infinite loop.

Πέρασε το αν θέλεις σε ένα jsfiddle είναι αρκετά περίεργο να το διαβάσει και να σε βοηθήσει κάποιος έτσι.[/i]
Το δοκίμασα, αλλά τώρα δεν γίνεται τίποτα όταν επιλέγω το tab, απλά εμφανίζει τα περιεχόμενα, όπως πρώτα, χωρίς να αλλάζει η τοποθεσία σε ?tab=X

Το έβαλα! http://jsfiddle.net/etVpP/

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Σύστημα tabs βασιμένο σε javascript

Δημοσίευση από alou » 27 Φεβ 2013 14:35

Αυτό που καταλαβαίνω και σου λέει φαντάζομαι ο panxer είναι να φτιάξεις σωστά τα active classes των tab από server side ώστε να υπάρχει σωστή αντιστοιχία active class και περιεχομένου στο τσεκάρισμα που γίνεται από την js (ή να αφαιρέσεις το check, που δεν ξέρω τι άλλο πιθανως θα δημιουργήσει) για να αποφύγεις το συνεχές load.

Άβαταρ μέλους
panxer
Δημοσιεύσεις: 113
Εγγραφή: 26 Ιουν 2011 20:29
Τοποθεσία: Athens, Greece
Επικοινωνία:

Σύστημα tabs βασιμένο σε javascript

Δημοσίευση από panxer » 27 Φεβ 2013 15:03

Ακριβώς ^

Άβαταρ μέλους
philos
Δημοσιεύσεις: 264
Εγγραφή: 30 Αύγ 2007 23:32

Σύστημα tabs βασιμένο σε javascript

Δημοσίευση από philos » 27 Φεβ 2013 23:25

Και πως το κάνω αυτό στο περίπου; Η αλήθεια είναι ότι δεν κατάλαβα τι πρέπει να κάνω :)
Υποθέτω όμως ότι μπορεί να υπάρχει κάποιος πιο εύκολος δρόμος ώστε να κάνω απλώς linkable προς ?tab=NAME τα tabs.

Άβαταρ μέλους
philos
Δημοσιεύσεις: 264
Εγγραφή: 30 Αύγ 2007 23:32

Σύστημα tabs βασιμένο σε javascript

Δημοσίευση από philos » 01 Μαρ 2013 00:37

Παιδιά το κατάφερα!!

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

vB_TabCtrl.prototype.click_tab = function &#40;B&#41; &#123;
    var A = YAHOO.util.Event.getTarget&#40;B&#41;;
    while &#40;A.getAttribute&#40;"tab_id"&#41; == null && A.tagName.toUpperCase&#40;&#41; != "HTML"&#41; &#123;
        A = A.parentNode
    &#125;
    this.switch_tab&#40;A.getAttribute&#40;"tab_id"&#41;&#41;;
   window.location = 'page.php?tab=' + this.selected_tab_id; // ΕΔΩ
    YAHOO.util.Event.stopEvent&#40;B&#41;
&#125;;

Άβαταρ μέλους
philos
Δημοσιεύσεις: 264
Εγγραφή: 30 Αύγ 2007 23:32

Σύστημα tabs βασιμένο σε javascript

Δημοσίευση από philos » 03 Μαρ 2013 23:24

Αν και άπειρος, κατάφερα να φτιάξω ένα σύστημα φόρτωσης δεδομένων μέσω ajax.
Το event έχει τη μορφή

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

onmouseup="return sc_fetch_data&#40;'datatype'&#41;;"

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

				        <h4 class="thead block_title">
				        <a name="announcements"></a>
				        <span class="block_name"><a href="#" onmouseup="return sc_fetch_data&#40;'datatype'&#41;;">Ανακοινώσεις</a></span>
				        </h4>
Όμως υπάρχει ένα πρόβλημα: το tab αλλάζει αρκεί να πατήσεις το πλαισιό του, ενώ στην προκειμένη πρέπει να πατήσεις ακριβώς πάνω στον τίτλο του tab για να τρέξει το event. Αν ο χρήστης πατήσει στον κενό χώρο του πλαισίου του tab, το tab θα αλλάξει, αλλά το event δεν θα τρέξει. :(

Μια λύση που δοκίμασα και είναι αποτελεσματική, είναι η χρήση "onmouseover", αφού και λίγο να πέσει στον τίτλο ο δείκτης, φορτώνονται τα δεδομένα, όμως δεν είναι αποδοτική αφού μπορεί να γίνουν εκ παραδρομής περισσότερα από ένα requests.

Καμιά ιδέα;

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Σύστημα tabs βασιμένο σε javascript

Δημοσίευση από alou » 04 Μαρ 2013 07:39

Κράτα τα περιεχόμενα κάθε tab σε μεταβλητές με αρχική τιμή "" και όρισέ τις έξω από το scope του function. Στο onmouseup τσέκαρε πρώτα αν η μεταβλητή είναι == "" και μετά κάνε το ajax call αν χρειάζεται.

Απάντηση

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

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

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