jQuery Plugin - slidePanel

$('#panel2').slidePanel({
    triggerName: '#trigger2',
    triggerTopPos: '20px',
    panelTopPos: '10px' });

Panel 1 nutzt die jQuery ajax load() Methode um den Inhalt einer anderen WB-Seite zu laden. Das Panel bleibt immer an der gleichen Stelle (position: fixed). Das HTML dazu:

<a class="trigger left" id="trigger1" href="#">panel 1</a>
<div id="panel1" class="panel left">&nbsp;</div>

Panel 2 zeigt den Inhalt eines Divs dieser Seite. Es wird vorher automatisch versteckt.

<a class="trigger right" href="#" id="trigger2">panel 2</a>

<div class="panel right" id="panel2">
<h3>Statischer Inhalt</h3>

<p>Das ist der Inhalt des versteckten Div <em>panel2</em>.</p>
 

    $('#panel2').slidePanel({
      triggerName: '#trigger2',
      triggerTopPos: '20px',
      panelTopPos: '10px'
    });
 </div> 

Panel 3 nutzt auch jQuery ajax load() um Daten aus einer externen Datei (ajax.html) zu laden. Die Datei befindet sich im WB-Root, der Pfad dorthin ist relativ..

<a class="trigger right" href="#" id="trigger3">panel 3</a>
<div class="panel right" id="panel3">&nbsp;</div>

Panel 4 nutzt ebenfalls jQuery ajax load() um Daten aus einer externen Datei (ajax.html) zu laden, diesmal im media-Ordner. Das Panel liegt innerhalb eines Div (position: relative).

<div style="width:500px; height:200px; border:1px solid #ccc; margin:0 auto">
  <a class="trigger left" id="trigger4" href="#">panel 4</a>
  <div id="panel4" class="panel left">&nbsp;</div>
</div>

Autor: www.jqeasy.com/jquery-slide-panel-plugin/