Seite 1 von 1
JQuery-Slider für Textbereiche
Verfasst: So 29. Apr 2012, 21:37
von uwe-schmitt
Das Modul
http://www.contenido-wiki.org/wiki/inde ... ide_in_out läuft, wie ich heute festgestellt habe, nicht mehr unter dem IE9. Da es eh auf Mootools baut und JQuery ja irgendwie Standard zu werden scheint, möchte ich anfragen, ob es mit JQuery schon eine Umsetzung des Moduls gibt oder aber eine angedacht ist?
Viele Grüße
Uwe
Re: JQuery-Slider für Textbereiche
Verfasst: Mi 2. Mai 2012, 23:39
von xmurrix
Hallo uwe-schmitt,
hier ist eine auf jQuery portierte Version des Sliders. Die Lösung is nicht unbedingt sauber implementiert, funktioniert aber...
Modul-Beschreibung:
Code: Alles auswählen
Slide In, Slide Out
Einen Abschnitt ein- oder ausblenden.
Autor: media-konzept kuster, Walti Zubler
Version: 1.1 vom 24.10.2008
Version: 1.2 vom 02.05.2012, Murat Purc, auf jQuery portiert
Modul-Eingabe:
Code: Alles auswählen
?><?php
echo "<table cellspacing=\"0\" cellpadding=\"10\" border=\"0\">";
echo "<tr><td>Link-Text zum Oeffnen:</td>";
echo "<td><input type=\"text\" name=\"CMS_VAR[0]\" value=\"CMS_VALUE[0]\" size=\"20\" /></td>";
echo "<tr><td>Link-Text zum schliessen:</td>";
echo "<td><input type=\"text\" name=\"CMS_VAR[1]\" value=\"CMS_VALUE[1]\" size=\"20\" /></td>";
echo "<tr><td>Link-Text-CSS-Class:</td>";
echo "<td><input type=\"text\" name=\"CMS_VAR[2]\" value=\"CMS_VALUE[2]\" size=\"20\" /></td>";
echo "</table>";
Modul-Ausgabe:
Code: Alles auswählen
<?php
$slide_modul_nr = (isset($slide_modul_nr)) ? ++$slide_modul_nr : 1;
switch ($slide_modul_nr) {
case 1 : $cms_html_txt = "CMS_HTML[100]"; break;
case 2 : $cms_html_txt = "CMS_HTML[101]"; break;
case 3 : $cms_html_txt = "CMS_HTML[102]"; break;
case 4 : $cms_html_txt = "CMS_HTML[103]"; break;
case 5 : $cms_html_txt = "CMS_HTML[104]"; break;
case 6 : $cms_html_txt = "CMS_HTML[105]"; break;
case 7 : $cms_html_txt = "CMS_HTML[106]"; break;
case 8 : $cms_html_txt = "CMS_HTML[107]"; break;
case 9 : $cms_html_txt = "CMS_HTML[108]"; break;
case 10: $cms_html_txt = "CMS_HTML[109]"; break;
}
?>
<script type="text/javascript">
$(document).ready(function() {
var $toggleLink = $("#v_toggle_<?php echo $slide_modul_nr ?>"),
$content = $("#vertical_slide_<?php echo $slide_modul_nr ?>"),
slide_txt_0 = "<?php echo "CMS_VALUE[0]" ?>",
slide_txt_1 = "<?php echo "CMS_VALUE[1]" ?>";
$toggleLink.click(function(e) {
e.stopPropagation();
$content.slideToggle("slow", function() {
$toggleLink.html(($toggleLink.html() == slide_txt_0) ? slide_txt_1 : slide_txt_0);
});
return false;
});
<?php if (!$edit) : ?>
$content.hide();
<?php endif; ?>
});
</script>
<div class="<?php echo "CMS_VALUE[2]" ?>"><a id="v_toggle_<?php echo $slide_modul_nr ?>" href="#"><?php echo "CMS_VALUE[0]" ?></a></div>
<div id="vertical_slide_<?php echo $slide_modul_nr ?>">
<div class="text3"><?php echo $cms_html_txt ?></div>
</div>
Im Layout ist dann im head-Bereich jQuery einzubinden, z. B.:
Code: Alles auswählen
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>