Show/Hide Text

Joomla! forum. Joomla! Questions and Answers.

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

Απάντηση
Άβαταρ μέλους
07
Δημοσιεύσεις: 435
Εγγραφή: 28 Απρ 2001 03:00
Τοποθεσία: Buenos Aires

Show/Hide Text

Δημοσίευση από 07 » 29 Ιουν 2012 20:45

Καλησπέρα! Έχω το Joomla 2.5 . Μέσα σε ένα article θέλω τα εξής..κάποιες εικόνες ή icons και από δίπλα το αντίστοιχο text π.χ τρόφιμα. Η λέξη τρόφιμα να είναι σε στυλ link , και μόλις το πατάει ο χρήστης να εμφανίζει (και με ξανά κλικ να κρύβει) κάποιο συγκεκριμένο text.
Πως θα το κάνω αυτό? Έχω δει κάποια tutorials se jquery και javascript αλλά δε με βοηθάνε.Υπάρχει κάτι πιο συγκεκριμένο για joomla ας πούμε?

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

Show/Hide Text

Δημοσίευση από alou » 29 Ιουν 2012 21:52

Αυτό που θες είναι συνδυασμός html και javascript, μόνο αν δώσεις την html που χρησιμοποιείς μπορεί να σε βοηθήσει κάποιος. Δεν έχει σχέση αν είναι joomla ή wordpess ή...

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

Άβαταρ μέλους
07
Δημοσιεύσεις: 435
Εγγραφή: 28 Απρ 2001 03:00
Τοποθεσία: Buenos Aires

Show/Hide Text

Δημοσίευση από 07 » 29 Ιουν 2012 23:16

Βασικά έφτιαξα το εξής με τη βοήθεια ενός tutorial. Και θέλω να το βάλω σε ένα article στο joomla 2.5 . Πως θα το κάνω? Δοκίμασα κάτι plugins αλλά μου βγάλανε το χριστάκι... :roll:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ΠΡΟΙΟΝΤΑ</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<style>

body&#123;
font-family&#58;Verdana, Geneva, sans-serif;
font-size&#58;14px;&#125;

#slidingDiv, #slidingDiv_2&#123;
	height&#58;320px;
	background-color&#58; #ffffff;
	padding&#58;20px;
	margin-top&#58;5px;
	border-bottom&#58;1px solid #000000;
	display&#58;none;
&#125;



</style>


</head>

<body>


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

$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;


   $&#40;'.show_hide'&#41;.showHide&#40;&#123;			 
		speed&#58; 1000,  // speed you want the toggle to happen	
		easing&#58; '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
		changeText&#58; 1, // if you dont want the button text to change, set this to 0
		showText&#58; 'View',// the button text to show when a div is closed
		hideText&#58; 'Close' // the button text to show when a div is open
					 
	&#125;&#41;; 


&#125;&#41;;

</script>

 <a href="#" class="show_hide" rel="#slidingDiv">ΤΡΟΦΙΜΑ</a><br />
    <div id="slidingDiv">
<ul>
  <li>Φρούτα κ λαχανικά</li>
  <li>Ελιά κ ελαιόλαδο</li>
  <li>Τυροκομικά</li>
  <li>Χυμοί φρούτων</li>
  <li>Φυσικό μεταλλικό νερό</li>
  <li>Ανθρακούχο νερό</li>
  <li>Ζυμαρικά</li>
  <li>Αραβοσιτέλαιο</li>
  <li>Κομπόστες</li>
  <li>Γλυκά κουταλιού</li>
  <li>Μπαχαρικά</li>
  <li>Ηλιέλαιο</li>
  <li>Ψαρικά</li>
  <li>Δημητριακά-Σπόρους</li>
  <li>Σοκολατοειδή</li>
  <li>Μπισκότα</li>
  <li>Βαμβάκι</li>
  <li>Κοτόπουλα<br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  </li>
</ul>
    </div>
    
   <p></p>
    
 <a href="#" class="show_hide" rel="#slidingDiv_2">ΔΟΜΙΚΑ ΥΛΙΚΑ</a><br />
    <div id="slidingDiv_2">
       <ul>
  <li>Αλουμίνια</li>
  <li>Μάρμαρα</li>
  <li>Περλίτης</li>
  <li>Πετροβάμβακας</li>
  <li>Κόκκος πλαστικού</li>
  <li>Μπετόν-Τσιμέντο-Σκυρόδερμα</li>
  <li>Είδη Υγιεινής</li>
  <li>Βιομηχανικοί σωλήνες</li>
  <li>Έπιπλα κουζίνας</li>
  <li>Μαρμαροψηφίδες</li>
  <li>Χαρτί-Χαρτόνι</li>
  <li>Ασβέστη <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  </li>
</ul>
    </div> 
    
    

</div>

<?php include '../includes/footer.php';?>

</body>
</html>

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

Show/Hide Text

Δημοσίευση από alou » 30 Ιουν 2012 00:34

Τα script που χρησιμοποιείς θα μπεί με λίγες αλλαγές που έκανα στο index.php του template σου

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

<script src="https&#58;//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/js/showHide.js" type="text/javascript"></script>

<script type="text/javascript">
$.noConflict&#40;&#41;;
jQuery&#40;document&#41;.ready&#40;function&#40;$&#41; &#123;
   $&#40;'.show_hide'&#41;.showHide&#40;&#123;         
      speed&#58; 1000,  // speed you want the toggle to happen   
      easing&#58; '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
      changeText&#58; 1, // if you dont want the button text to change, set this to 0
      showText&#58; 'View',// the button text to show when a div is closed
      hideText&#58; 'Close' // the button text to show when a div is open
               
   &#125;&#41;;


&#125;&#41;;

</script> 
... είτε ακριβώς πριν το </head> είτε στο τέλος (πριν το </body>) για να μην καθυστερεί το φόρτωμα της σελίδας.

Το αρχείο showHide.js θα το βάλεις στο templates/to template sou/js/showHide.js

Στο άρθρο, απλά θα βάλεις ότι html έχεις εδώ (αφού έχεις τον editor σε μορφή εισαγωγής html εννοείται) και το άρθρο σου θα είναι ΟΚ.

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

<a href="#" class="show_hide" rel="#slidingDiv">ΤΡΟΦΙΜΑ</a><br />
    <div id="slidingDiv">
<ul>
  <li>Φρούτα κ λαχανικά</li>
  <li>Ελιά κ ελαιόλαδο</li>
  <li>Τυροκομικά</li>
  <li>Χυμοί φρούτων</li>
  <li>Φυσικό μεταλλικό νερό</li>
  <li>Ανθρακούχο νερό</li>
  <li>Ζυμαρικά</li>
  <li>Αραβοσιτέλαιο</li>
  <li>Κομπόστες</li>
  <li>Γλυκά κουταλιού</li>
  <li>Μπαχαρικά</li>
  <li>Ηλιέλαιο</li>
  <li>Ψαρικά</li>
  <li>Δημητριακά-Σπόρους</li>
  <li>Σοκολατοειδή</li>
  <li>Μπισκότα</li>
  <li>Βαμβάκι</li>
  <li>Κοτόπουλα </li>
</ul>
    </div>
   
 <a href="#" class="show_hide" rel="#slidingDiv_2">ΔΟΜΙΚΑ ΥΛΙΚΑ</a><br />
    <div id="slidingDiv_2">
       <ul>
  <li>Αλουμίνια</li>
  <li>Μάρμαρα</li>
  <li>Περλίτης</li>
  <li>Πετροβάμβακας</li>
  <li>Κόκκος πλαστικού</li>
  <li>Μπετόν-Τσιμέντο-Σκυρόδερμα</li>
  <li>Είδη Υγιεινής</li>
  <li>Βιομηχανικοί σωλήνες</li>
  <li>Έπιπλα κουζίνας</li>
  <li>Μαρμαροψηφίδες</li>
  <li>Χαρτί-Χαρτόνι</li>
  <li>Ασβέστη </li>
</ul>
    </div>
</div> 
Οτιδήποτε αφορά styling, δηλαδή

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

#slidingDiv, #slidingDiv_2&#123;
   height&#58;320px;
   background-color&#58; #ffffff;
   padding&#58;20px;
   margin-top&#58;5px;
   border-bottom&#58;1px solid #000000;
   display&#58;none;
&#125; 
και πιθανώς τα περιεχόμενα του style.css αν σε ενδιαφέρουν (που πιθανότατα είναι απομεινάρια του tutorial που κοίταζες μαζί με το footer.php οπότε ξέχνα τα), καλύτερα να τα βάλεις μέσα σε ένα αρχείο css που ήδη καλεί το template σου (κατά πάσα πιθανότητα, templates/to template sou/css/template.css).

Υπόψιν επίσης ότι με κάποια άλλη επέκταση που έχεις, πιθανό να είναι ήδη φορτωμένη η jquery και να δημιουργεί πρόβλημα. Αν μπερδευτείς ή δε δουλεύει κάτι σωστά, link.[/code]

Απάντηση

Επιστροφή στο “Joomla! γενικά”

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

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