JQuery-Slider für Textbereiche

[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

[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>