load σελίδας σε κύρια σελίδα

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

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

Απάντηση
argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

load σελίδας σε κύρια σελίδα

Δημοσίευση από argate7 » 25 Ιαν 2013 13:24

Καλησπέρα,

Αρχικά να εξηγήσω τι κάνω έως τώρα...

Έχω μία σελίδα στην οποία έχω ένα div μέσα στο οποίο εμφανίζονται οι σελίδες που θέλω. Αυτή η σελίδα(η βασική) έχει ένα σταθερό μενού οπότε έχω global navigation. Αυτό που θέλω τώρα να κάνω είναι από τις υποσελίδες να ανοίγω νέες σελίδες που να εμφανίζονται στο div της πρώτης. Πως μπορώ να το κάνω αυτό?

Παρακάτω σας παραθέτω ένα μικρό παράδειγμα του τι έχει γίνει έως τώρα.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jq ... ery.min.js" type="text/javascript"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("#home").click(function(){
$("#response").load("home.html");
});
$("#about").click(function(){
$("#response").load("about.html");
});
$("#contact").click(function(){
$("#response").load("contact.html");
});
});
</script>
<div id="response"></div>
<ul>
<li><a href="#" id="home" >Home</a></li>
<li><a href="#" id="about" >About</a></li>
<li><a href="#" id="contact" >Contact</a></li>
</ul>
</body>
</html>

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

load σελίδας σε κύρια σελίδα

Δημοσίευση από alou » 25 Ιαν 2013 13:53

Κάνε το function σου έτσι και θα λειτουργεί για όλα τα link που θες, συνδέοντας το id με το όνομα του html αρχείου

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

$&#40;'.menu-links a'&#41;.live&#40;'click', function&#40;e&#41; &#123;
e.preventDefault;
var pagelink = $&#40;this&#41;.attr&#40;'id'&#41;;
$&#40;"#response"&#41;.load&#40;pagelink + ".html"&#41;; 
&#125;&#41;
Μόνο στην html σου, βάλε ένα class="menu-links" στα ul που θα έχεις στοιχεία που θα φορτώνεις.

Βάζω live γιατί κάποια link που θα είναι στα html αρχεία που θα καλείς δεν θα υπάρχουν στο dom ready, οπότε λογικά θα σου χρειαστεί.

Επίσης, το preventDefault ( και όχι return false) δεν αφήνει τα ενοχλητικά κουνήματα της σελίδας όταν το link είναι απλά #

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

load σελίδας σε κύρια σελίδα

Δημοσίευση από argate7 » 25 Ιαν 2013 14:06

Δεν μπορώ να καταλάβω τι εννοείς. Μπορείς να γίνεις λίγο πιο συγκεκριμένος? Ο κώδικας δηλαδή πως θα πρέπει να είναι?

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

load σελίδας σε κύρια σελίδα

Δημοσίευση από alou » 25 Ιαν 2013 16:39

Κάπως έτσι

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

<!DOCTYPE html>
<html>
<head>
<script src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script>
$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;

$&#40;'.menu-links a'&#41;.live&#40;'click', function&#40;e&#41; &#123;
e.preventDefault;
var pagelink = $&#40;this&#41;.attr&#40;'id'&#41;;
$&#40;"#response"&#41;.load&#40;pagelink + ".html"&#41;;
&#125;&#41; 

&#125;&#41;;
</script>
<div id="response"></div>
<ul class="menu-links">
<li><a href="#" id="home" >Home</a></li>
<li><a href="#" id="about" >About</a></li>
<li><a href="#" id="contact" >Contact</a></li>
</ul>
</body>
</html>
και στη σελίδα που θα ανοίγεις, π.χ. about.html εκτός από περιεχόμενο, θα έχεις πάλει ένα

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

<ul class="menu-links">
<li><a href="#" id="alpha" >Αλφα</a></li> ->θα σε πάει στο alpha.html
<li><a href="#" id="vita" >Βήτα</a></li> ->θα σε πάει στο vita.html
kok
</ul>

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

load σελίδας σε κύρια σελίδα

Δημοσίευση από argate7 » 25 Ιαν 2013 16:50

Συγγνώμη αλλά δοκιμάζω αυτό που μου έστειλες και δε δουλεύει.

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

load σελίδας σε κύρια σελίδα

Δημοσίευση από argate7 » 25 Ιαν 2013 17:00

Εντάξει φίλε μου. Τελικά δουλεύει. Επειδή είχα τις σελίδες σε φακέλους τύπου subpages έδωσα το όνομα του path και παίζει. Ευχαριστώ πολύ για τη βοήθεια! Ήταν πραγματικά πολύτιμη!!

Καλό απόγευμα!!

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

load σελίδας σε κύρια σελίδα

Δημοσίευση από alou » 25 Ιαν 2013 17:02

Μια χαρά δουλεύει
http://alou.gr/demos/loadhtml

Κάνε paste αυτά που έχεις να δούμε το λάθος

edit: OK :D

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

load σελίδας σε κύρια σελίδα

Δημοσίευση από argate7 » 25 Ιαν 2013 17:09

Από το πρωί ψάχνω να βρω πως θα μπορέσω να κλείνω το παράθυρο (tab ή γενικότερα τον browser που χρησιμοποιώ) και να μου πετάει ένα μήνυμα. Ξέρεις πως γίνεται αυτό?

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

load σελίδας σε κύρια σελίδα

Δημοσίευση από alou » 25 Ιαν 2013 17:41

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

window.onbeforeunload = function &#40;&#41; &#123;
    return "Που πας ρε Καραμήτρο;";
&#125;
με προσοχή. Θα βγαίνει μήνυμα είτε κλείσει παράθυρο είτε αλλάξει url κάποιος, το βρίσκω πολύ εκνευρισικό εκτός αν υπάρχει κάποια διαδικασία που δεν έχει ολοκληρωθεί.

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

load σελίδας σε κύρια σελίδα

Δημοσίευση από argate7 » 25 Ιαν 2013 17:43

Το βρήκα τελικά. Αλλά με πρόλαβες μέχρι να το βάλω στο project που έφτιαχνα.

Ευχαριστώ πολύ φίλε μου!

Καλό βράδυ! Και καλό ΣΚ.

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

load σελίδας σε κύρια σελίδα

Δημοσίευση από argate7 » 26 Ιαν 2013 05:57

Και κάτι τελευταίο. Θέλω κάθε φορά που επιλέγω να μπω σε μια σελίδα (πχ από την index να μπαίνω στο about) να μου γίνεται στο μενού selected η επιλογή που έχω κάνει. Ας μπαίνω μετά σε πιο χαμηλές σελίδες (subpages), με νοιάζει να είναι πάντα selected η πρώτη επιλογή κατηγορίας και σε περίπτωση που επιλέξω άλλη κατηγορία τότε να αλλάζει.

Μπορώ να το κάνω με κάποιο session που ενδεχομένως να έχει κάθε subpage, αλλά πως θα το δηλώνω στην index για να ξέρει ποια θα θέσει ως selected από τις επιλογές του μενού? Επίσης πως θα αλλάζει? Με κάποιο τύπου refresh στο μενού του?

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

load σελίδας σε κύρια σελίδα

Δημοσίευση από alou » 26 Ιαν 2013 18:28

Για το parent menu απλά θα προσθέσεις ένα

$('--parent element tou main menu-- ul.menu-links').removeClass('active');
$(this).addClass('active');

στο function και με css το κάνεις ότι θες. Για τα άλλα, θα βάλεις active η κάποιο class για να παίξεις με css στο αντίστοιχο submenu στην html κάθε σελίδας. Αν έχω καταλάβει καλά τη δομή σου δηλαδή.

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

load σελίδας σε κύρια σελίδα

Δημοσίευση από argate7 » 28 Ιαν 2013 11:10

Θέλω να πατάω το about και να αλλάζει το class="active" από το home για παράδειγμα που ήμουν προηγουμένως και να γίνεται class="" ή να φεύγει εντελώς και ταυτόχρονα να γίνεται class="active" στην επιλογή about του menu. Δοκίμασα αυτό που μου πρότεινες αλλά ή δεν το βάζω σωστά στον κώδικα ή κάτι δεν είναι σωστό.

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

<!DOCTYPE html>
<html>
<head>
<script src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script>
$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;

$&#40;'.menu-links a'&#41;.live&#40;'click', function&#40;e&#41; &#123;
e.preventDefault;
var pagelink = $&#40;this&#41;.attr&#40;'id'&#41;;
$&#40;"#response"&#41;.load&#40;"pages/"+pagelink + ".html"&#41;;
&#125;&#41;;

&#125;&#41;;
</script>
   <div id="buttons">
    	<ul class="menu-links">
		<li style="padding-bottom&#58;10px;" class='active'><a href="#" id="home" >Home</a></li>
		<li style="padding-bottom&#58;10px;" class=''><a href="#" id="about" >About</a></li>
		<li style="padding-bottom&#58;10px;" class=''><a href="#" id="contact" >Contact</a></li>
	</ul>
   </div>
<div id="response" style="height&#58;300px; width&#58;300px;"></div>
</body>
</html> 
Αυτός είναι ο κώδικας μέχρι στιγμής. Τι θα πρέπει να αλλάξω και που να προσθέσω τις γραμμές κώδικα που μου πρότεινες?

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

load σελίδας σε κύρια σελίδα

Δημοσίευση από alou » 28 Ιαν 2013 17:53

Δεν έβαλες το κομμάτι που προσθαφαιρεί το active class, για δοκίμασε έτσι:

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

<!DOCTYPE html>
<html>
<head>
<script src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script>
$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;

$&#40;'.menu-links a'&#41;.live&#40;'click', function&#40;e&#41; &#123;
e.preventDefault;
var pagelink = $&#40;this&#41;.attr&#40;'id'&#41;;
$&#40;"#response"&#41;.load&#40;"pages/"+pagelink + ".html"&#41;;
$&#40;'#buttons li'&#41;.removeClass&#40;'active'&#41;;
$&#40;this&#41;.addClass&#40;'active'&#41;;
&#125;&#41;;

&#125;&#41;;
</script>
   <div id="buttons">
       <ul class="menu-links">
      <li style="padding-bottom&#58;10px;" class='active'><a href="#" id="home" >Home</a></li>
      <li style="padding-bottom&#58;10px;"><a href="#" id="about" >About</a></li>
      <li style="padding-bottom&#58;10px;"><a href="#" id="contact" >Contact</a></li>
   </ul>
   </div>
<div id="response" style="height&#58;300px; width&#58;300px;"></div>
</body>
</html>

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

load σελίδας σε κύρια σελίδα

Δημοσίευση από argate7 » 28 Ιαν 2013 20:39

Με αυτό που έστειλες, σβήνει το active. Αλλά δεν ενεργοποιεί τη νέα επιλογή για να την κάνει active.

Απάντηση

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

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

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