Suche im Forum:
Suchen


Autor Nachricht
Beitrag07.11.2010 um 10:45 (UTC)    
Titel: ist dieser Effekt mit Bordmitteln möglich?

Hallo,

also, wie ihr erkennen könnt möchte ich wissen, ob dies (siehe Bild), auch mit den hier zur verfügung steheneden Bordmitteln zu realisieren ist.

Das ist wie so ähnlich wie in einer Ordner-Stammverzweigung.

Einfach auf das kleine "Pluszeichen" klicken und schon öffnet sich darunter etwas mit mehr Infod (und das Plus wird zum Minus).

Ist wahrscheinlich sehr laienhaft ausgedrückt, doch mit Sicherheit ist das nachvollziehbar.

Mal schaun ob jemand mir helfen kann.

Vielen Dank im Voraus
Michael



By pinkcamel at 2010-11-07
Beitrag07.11.2010 um 10:58 (UTC)    
Titel:

hey, also ich kenne diese Funktion nur mit Javasrcipt. mir ist aufjeden fall grad keine reine CSS/HTML version bekannt.

normaler weiße macht man das halt mit dem verlinken des javasript und css datei aber da du diese daten nur hochlande kannst wenn ud ein premium account hast must du dies so machen ist halt ein zimmlich langes script





Code:
<script type="text/javascript">
var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};

Spry.Widget.Accordion = function(element, opts)
{
   this.element = this.getElement(element);
   this.defaultPanel = 0;
   this.hoverClass = "AccordionPanelTabHover";
   this.openClass = "AccordionPanelOpen";
   this.closedClass = "AccordionPanelClosed";
   this.focusedClass = "AccordionFocused";
   this.enableAnimation = true;
   this.enableKeyboardNavigation = true;
   this.currentPanel = null;
   this.animator = null;
   this.hasFocus = null;

   this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
   this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;

   this.useFixedPanelHeights = true;
   this.fixedPanelHeight = 0;

   Spry.Widget.Accordion.setOptions(this, opts, true);

   this.attachBehaviors();
};

Spry.Widget.Accordion.prototype.getElement = function(ele)
{
   if (ele && typeof ele == "string")
      return document.getElementById(ele);
   return ele;
};

Spry.Widget.Accordion.prototype.addClassName = function(ele, className)
{
   if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
      return;
   ele.className += (ele.className ? " " : "") + className;
};

Spry.Widget.Accordion.prototype.removeClassName = function(ele, className)
{
   if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
      return;
   ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};

Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
   if (!optionsObj)
      return;
   for (var optionName in optionsObj)
   {
      if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
         continue;
      obj[optionName] = optionsObj[optionName];
   }
};

Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(e, panel)
{
   if (panel)
      this.addClassName(this.getPanelTab(panel), this.hoverClass);
   return false;
};

Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(e, panel)
{
   if (panel)
      this.removeClassName(this.getPanelTab(panel), this.hoverClass);
   return false;
};

Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex)
{
   var panelA = this.currentPanel;
   var panelB;

   if (typeof elementOrIndex == "number")
      panelB = this.getPanels()[elementOrIndex];
   else
      panelB = this.getElement(elementOrIndex);
   
   if (!panelB || panelA == panelB)   
      return null;

   var contentA = panelA ? this.getPanelContent(panelA) : null;
   var contentB = this.getPanelContent(panelB);

   if (!contentB)
      return null;

   if (this.useFixedPanelHeights && !this.fixedPanelHeight)
      this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;

   if (this.enableAnimation)
   {
      if (this.animator)
         this.animator.stop();
      this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration, fps: this.fps, transition: this.transition });
      this.animator.start();
   }
   else
   {
      if(contentA)
      {
         contentA.style.display = "none";
         contentA.style.height = "0px";
      }
      contentB.style.display = "block";
      contentB.style.height = this.useFixedPanelHeights ? this.fixedPanelHeight + "px" : "auto";
   }

   if(panelA)
   {
      this.removeClassName(panelA, this.openClass);
      this.addClassName(panelA, this.closedClass);
   }

   this.removeClassName(panelB, this.closedClass);
   this.addClassName(panelB, this.openClass);

   this.currentPanel = panelB;

   return panelB;
};

Spry.Widget.Accordion.prototype.closePanel = function()
{
   // The accordion can only ever have one panel open at any
   // give time, so this method only closes the current panel.
   // If the accordion is in fixed panel heights mode, this
   // method does nothing.

   if (!this.useFixedPanelHeights && this.currentPanel)
   {
      var panel = this.currentPanel;
      var content = this.getPanelContent(panel);
      if (content)
      {
         if (this.enableAnimation)
         {
            if (this.animator)
               this.animator.stop();
            this.animator = new Spry.Widget.Accordion.PanelAnimator(this, null, { duration: this.duration, fps: this.fps, transition: this.transition });
            this.animator.start();
         }
         else
         {
            content.style.display = "none";
            content.style.height = "0px";
         }
      }      
      this.removeClassName(panel, this.openClass);
      this.addClassName(panel, this.closedClass);
      this.currentPanel = null;
   }
};

Spry.Widget.Accordion.prototype.openNextPanel = function()
{
   return this.openPanel(this.getCurrentPanelIndex() + 1);
};

Spry.Widget.Accordion.prototype.openPreviousPanel = function()
{
   return this.openPanel(this.getCurrentPanelIndex() - 1);
};

Spry.Widget.Accordion.prototype.openFirstPanel = function()
{
   return this.openPanel(0);
};

Spry.Widget.Accordion.prototype.openLastPanel = function()
{
   var panels = this.getPanels();
   return this.openPanel(panels[panels.length - 1]);
};

Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
{
   if (panel != this.currentPanel)
      this.openPanel(panel);
   else
      this.closePanel();

   if (this.enableKeyboardNavigation)
      this.focus();

   if (e.preventDefault) e.preventDefault();
   else e.returnValue = false;
   if (e.stopPropagation) e.stopPropagation();
   else e.cancelBubble = true;

   return false;
};

Spry.Widget.Accordion.prototype.onFocus = function(e)
{
   this.hasFocus = true;
   this.addClassName(this.element, this.focusedClass);
   return false;
};

Spry.Widget.Accordion.prototype.onBlur = function(e)
{
   this.hasFocus = false;
   this.removeClassName(this.element, this.focusedClass);
   return false;
};

Spry.Widget.Accordion.KEY_UP = 38;
Spry.Widget.Accordion.KEY_DOWN = 40;

Spry.Widget.Accordion.prototype.onKeyDown = function(e)
{
   var key = e.keyCode;
   if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
      return true;
   
   var panels = this.getPanels();
   if (!panels || panels.length < 1)
      return false;
   var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
   var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;

   while (nextPanel)
   {
      if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
         break;
      nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
   }

   if (nextPanel && currentPanel != nextPanel)
      this.openPanel(nextPanel);

   if (e.preventDefault) e.preventDefault();
   else e.returnValue = false;
   if (e.stopPropagation) e.stopPropagation();
   else e.cancelBubble = true;

   return false;
};

Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
{
   if (!panel)
      return;

   var tab = this.getPanelTab(panel);

   if (tab)
   {
      var self = this;
      Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelTabClick(e, panel); }, false);
      Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(e, panel); }, false);
      Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(e, panel); }, false);
   }
};

Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture)
{
   try
   {
      if (element.addEventListener)
         element.addEventListener(eventType, handler, capture);
      else if (element.attachEvent)
         element.attachEvent("on" + eventType, handler);
   }
   catch (e) {}
};

Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault)
{
   var content = this.getPanelContent(panel);
   if (isDefault)
   {
      this.currentPanel = panel;
      this.removeClassName(panel, this.closedClass);
      this.addClassName(panel, this.openClass);

      // Attempt to set up the height of the default panel. We don't want to
      // do any dynamic panel height calculations here because our accordion
      // or one of its parent containers may be display:none.

      if (content)
      {
         if (this.useFixedPanelHeights)
         {
            // We are in fixed panel height mode and the user passed in
            // a panel height for us to use.
   
            if (this.fixedPanelHeight)
               content.style.height = this.fixedPanelHeight + "px";
         }
         else
         {
            // We are in variable panel height mode, but since we can't
            // calculate the panel height here, we just set the height to
            // auto so that it expands to show all of its content.
   
            content.style.height = "auto";
         }
      }
   }
   else
   {
      this.removeClassName(panel, this.openClass);
      this.addClassName(panel, this.closedClass);

      if (content)
      {
         content.style.height = "0px";
         content.style.display = "none";
      }
   }
   
   this.attachPanelHandlers(panel);
};

Spry.Widget.Accordion.prototype.attachBehaviors = function()
{
   var panels = this.getPanels();
   for (var i = 0; i < panels.length; i++)
      this.initPanel(panels[i], i == this.defaultPanel);

   // Advanced keyboard navigation requires the tabindex attribute
   // on the top-level element.

   this.enableKeyboardNavigation = (this.enableKeyboardNavigation && this.element.attributes.getNamedItem("tabindex"));
   if (this.enableKeyboardNavigation)
   {
      var self = this;
      Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
      Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
      Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
   }
};

Spry.Widget.Accordion.prototype.getPanels = function()
{
   return this.getElementChildren(this.element);
};

Spry.Widget.Accordion.prototype.getCurrentPanel = function()
{
   return this.currentPanel;
};

Spry.Widget.Accordion.prototype.getPanelIndex = function(panel)
{
   var panels = this.getPanels();
   for( var i = 0 ; i < panels.length; i++ )
   {
      if( panel == panels[i] )
         return i;
   }
   return -1;
};

Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
{
   return this.getPanelIndex(this.currentPanel);
};

Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
{
   if (!panel)
      return null;
   return this.getElementChildren(panel)[0];
};

Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
{
   if (!panel)
      return null;
   return this.getElementChildren(panel)[1];
};

Spry.Widget.Accordion.prototype.getElementChildren = function(element)
{
   var children = [];
   var child = element.firstChild;
   while (child)
   {
      if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
         children.push(child);
      child = child.nextSibling;
   }
   return children;
};

Spry.Widget.Accordion.prototype.focus = function()
{
   if (this.element && this.element.focus)
      this.element.focus();
};

Spry.Widget.Accordion.prototype.blur = function()
{
   if (this.element && this.element.blur)
      this.element.blur();
};

/////////////////////////////////////////////////////

Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
{
   this.timer = null;
   this.interval = 0;

   this.fps = 60;
   this.duration = 500;
   this.startTime = 0;

   this.transition = Spry.Widget.Accordion.PanelAnimator.defaultTransition;

   this.onComplete = null;

   this.panel = panel;
   this.panelToOpen = accordion.getElement(panel);
   this.panelData = [];
   this.useFixedPanelHeights = accordion.useFixedPanelHeights;

   Spry.Widget.Accordion.setOptions(this, opts, true);

   this.interval = Math.floor(1000 / this.fps);

   // Set up the array of panels we want to animate.

   var panels = accordion.getPanels();
   for (var i = 0; i < panels.length; i++)
   {
      var p = panels[i];
      var c = accordion.getPanelContent(p);
      if (c)
      {
         var h = c.offsetHeight;
         if (h == undefined)
            h = 0;

         if (p == panel && h == 0)
            c.style.display = "block";

         if (p == panel || h > 0)
         {
            var obj = new Object;
            obj.panel = p;
            obj.content = c;
            obj.fromHeight = h;
            obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
            obj.distance = obj.toHeight - obj.fromHeight;
            obj.overflow = c.style.overflow;
            this.panelData.push(obj);

            c.style.overflow = "hidden";
            c.style.height = h + "px";
         }
      }
   }
};

Spry.Widget.Accordion.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };

Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
{
   var self = this;
   this.startTime = (new Date).getTime();
   this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};

Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
{
   if (this.timer)
   {
      clearTimeout(this.timer);

      // If we're killing the timer, restore the overflow
      // properties on the panels we were animating!

      for (i = 0; i < this.panelData.length; i++)
      {
         obj = this.panelData[i];
         obj.content.style.overflow = obj.overflow;
      }
   }

   this.timer = null;
};

Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
{
   var curTime = (new Date).getTime();
   var elapsedTime = curTime - this.startTime;

   var i, obj;

   if (elapsedTime >= this.duration)
   {
      for (i = 0; i < this.panelData.length; i++)
      {
         obj = this.panelData[i];
         if (obj.panel != this.panel)
         {
            obj.content.style.display = "none";
            obj.content.style.height = "0px";
         }
         obj.content.style.overflow = obj.overflow;
         obj.content.style.height = (this.useFixedPanelHeights || obj.toHeight == 0) ? obj.toHeight + "px" : "auto";
      }
      if (this.onComplete)
         this.onComplete();
      return;
   }

   for (i = 0; i < this.panelData.length; i++)
   {
      obj = this.panelData[i];
      var ht = this.transition(elapsedTime, obj.fromHeight, obj.distance, this.duration);
      obj.content.style.height = ((ht < 0) ? 0 : ht) + "px";
   }
   
   var self = this;
   this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};



</script>

<style type="text/css">
<!--

@charset "UTF-8";

.Accordion {
   border-left: solid 1px gray;
   border-right: solid 1px black;
   border-bottom: solid 1px gray;
   overflow: hidden;
}


.AccordionPanel {
   margin: 0px;
   padding: 0px;
}


.AccordionPanelTab {
   background-color: #CCCCCC;
   border-top: solid 1px black;
   border-bottom: solid 1px gray;
   margin: 0px;
   padding: 2px;
   cursor: pointer;
   -moz-user-select: none;
   -khtml-user-select: none;
}


.AccordionPanelContent {
   overflow: auto;
   margin: 0px;
   padding: 0px;
   height: 200px;
}

.AccordionPanelOpen .AccordionPanelTab {
   background-color: #EEEEEE;
}


.AccordionPanelTabHover {
   color: #555555;
}
.AccordionPanelOpen .AccordionPanelTabHover {
   color: #555555;
}

.AccordionFocused .AccordionPanelTab {
   background-color: #3399FF;
}


.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
   background-color: #33CCFF;
}


-->
</style>








<!--boddy teil-->


<div id="Accordion1" class="Accordion" tabindex="0">
  <div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
  </div>
  <div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
  </div>
</div>


<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
[/code]
______________
Beitrag07.11.2010 um 11:12 (UTC)    
Titel:

Danke für die schnelle Antwort.
Ich besitze einen Premium-Account.
Aber das ist ja irre viel Arbeit, wie es ausschaut.

Wohin mit dem Script? In text über dem Design?
Keine Ahnung von all dem, aber nochmals danke.






kohompa hat Folgendes geschrieben:
hey, also ich kenne diese Funktion nur mit Javasrcipt. mir ist aufjeden fall grad keine reine CSS/HTML version bekannt.

normaler weiße macht man das halt mit dem verlinken des javasript und css datei aber da du diese daten nur hochlande kannst wenn ud ein premium account hast must du dies so machen ist halt ein zimmlich langes script





Code:
<script type="text/javascript">
var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};

Spry.Widget.Accordion = function(element, opts)
{
   this.element = this.getElement(element);
   this.defaultPanel = 0;
   this.hoverClass = "AccordionPanelTabHover";
   this.openClass = "AccordionPanelOpen";
   this.closedClass = "AccordionPanelClosed";
   this.focusedClass = "AccordionFocused";
   this.enableAnimation = true;
   this.enableKeyboardNavigation = true;
   this.currentPanel = null;
   this.animator = null;
   this.hasFocus = null;

   this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
   this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;

   this.useFixedPanelHeights = true;
   this.fixedPanelHeight = 0;

   Spry.Widget.Accordion.setOptions(this, opts, true);

   this.attachBehaviors();
};

Spry.Widget.Accordion.prototype.getElement = function(ele)
{
   if (ele && typeof ele == "string")
      return document.getElementById(ele);
   return ele;
};

Spry.Widget.Accordion.prototype.addClassName = function(ele, className)
{
   if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
      return;
   ele.className += (ele.className ? " " : "") + className;
};

Spry.Widget.Accordion.prototype.removeClassName = function(ele, className)
{
   if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
      return;
   ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};

Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
   if (!optionsObj)
      return;
   for (var optionName in optionsObj)
   {
      if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
         continue;
      obj[optionName] = optionsObj[optionName];
   }
};

Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(e, panel)
{
   if (panel)
      this.addClassName(this.getPanelTab(panel), this.hoverClass);
   return false;
};

Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(e, panel)
{
   if (panel)
      this.removeClassName(this.getPanelTab(panel), this.hoverClass);
   return false;
};

Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex)
{
   var panelA = this.currentPanel;
   var panelB;

   if (typeof elementOrIndex == "number")
      panelB = this.getPanels()[elementOrIndex];
   else
      panelB = this.getElement(elementOrIndex);
   
   if (!panelB || panelA == panelB)   
      return null;

   var contentA = panelA ? this.getPanelContent(panelA) : null;
   var contentB = this.getPanelContent(panelB);

   if (!contentB)
      return null;

   if (this.useFixedPanelHeights && !this.fixedPanelHeight)
      this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;

   if (this.enableAnimation)
   {
      if (this.animator)
         this.animator.stop();
      this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration, fps: this.fps, transition: this.transition });
      this.animator.start();
   }
   else
   {
      if(contentA)
      {
         contentA.style.display = "none";
         contentA.style.height = "0px";
      }
      contentB.style.display = "block";
      contentB.style.height = this.useFixedPanelHeights ? this.fixedPanelHeight + "px" : "auto";
   }

   if(panelA)
   {
      this.removeClassName(panelA, this.openClass);
      this.addClassName(panelA, this.closedClass);
   }

   this.removeClassName(panelB, this.closedClass);
   this.addClassName(panelB, this.openClass);

   this.currentPanel = panelB;

   return panelB;
};

Spry.Widget.Accordion.prototype.closePanel = function()
{
   // The accordion can only ever have one panel open at any
   // give time, so this method only closes the current panel.
   // If the accordion is in fixed panel heights mode, this
   // method does nothing.

   if (!this.useFixedPanelHeights && this.currentPanel)
   {
      var panel = this.currentPanel;
      var content = this.getPanelContent(panel);
      if (content)
      {
         if (this.enableAnimation)
         {
            if (this.animator)
               this.animator.stop();
            this.animator = new Spry.Widget.Accordion.PanelAnimator(this, null, { duration: this.duration, fps: this.fps, transition: this.transition });
            this.animator.start();
         }
         else
         {
            content.style.display = "none";
            content.style.height = "0px";
         }
      }      
      this.removeClassName(panel, this.openClass);
      this.addClassName(panel, this.closedClass);
      this.currentPanel = null;
   }
};

Spry.Widget.Accordion.prototype.openNextPanel = function()
{
   return this.openPanel(this.getCurrentPanelIndex() + 1);
};

Spry.Widget.Accordion.prototype.openPreviousPanel = function()
{
   return this.openPanel(this.getCurrentPanelIndex() - 1);
};

Spry.Widget.Accordion.prototype.openFirstPanel = function()
{
   return this.openPanel(0);
};

Spry.Widget.Accordion.prototype.openLastPanel = function()
{
   var panels = this.getPanels();
   return this.openPanel(panels[panels.length - 1]);
};

Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
{
   if (panel != this.currentPanel)
      this.openPanel(panel);
   else
      this.closePanel();

   if (this.enableKeyboardNavigation)
      this.focus();

   if (e.preventDefault) e.preventDefault();
   else e.returnValue = false;
   if (e.stopPropagation) e.stopPropagation();
   else e.cancelBubble = true;

   return false;
};

Spry.Widget.Accordion.prototype.onFocus = function(e)
{
   this.hasFocus = true;
   this.addClassName(this.element, this.focusedClass);
   return false;
};

Spry.Widget.Accordion.prototype.onBlur = function(e)
{
   this.hasFocus = false;
   this.removeClassName(this.element, this.focusedClass);
   return false;
};

Spry.Widget.Accordion.KEY_UP = 38;
Spry.Widget.Accordion.KEY_DOWN = 40;

Spry.Widget.Accordion.prototype.onKeyDown = function(e)
{
   var key = e.keyCode;
   if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
      return true;
   
   var panels = this.getPanels();
   if (!panels || panels.length < 1)
      return false;
   var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
   var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;

   while (nextPanel)
   {
      if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
         break;
      nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
   }

   if (nextPanel && currentPanel != nextPanel)
      this.openPanel(nextPanel);

   if (e.preventDefault) e.preventDefault();
   else e.returnValue = false;
   if (e.stopPropagation) e.stopPropagation();
   else e.cancelBubble = true;

   return false;
};

Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
{
   if (!panel)
      return;

   var tab = this.getPanelTab(panel);

   if (tab)
   {
      var self = this;
      Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelTabClick(e, panel); }, false);
      Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(e, panel); }, false);
      Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(e, panel); }, false);
   }
};

Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture)
{
   try
   {
      if (element.addEventListener)
         element.addEventListener(eventType, handler, capture);
      else if (element.attachEvent)
         element.attachEvent("on" + eventType, handler);
   }
   catch (e) {}
};

Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault)
{
   var content = this.getPanelContent(panel);
   if (isDefault)
   {
      this.currentPanel = panel;
      this.removeClassName(panel, this.closedClass);
      this.addClassName(panel, this.openClass);

      // Attempt to set up the height of the default panel. We don't want to
      // do any dynamic panel height calculations here because our accordion
      // or one of its parent containers may be display:none.

      if (content)
      {
         if (this.useFixedPanelHeights)
         {
            // We are in fixed panel height mode and the user passed in
            // a panel height for us to use.
   
            if (this.fixedPanelHeight)
               content.style.height = this.fixedPanelHeight + "px";
         }
         else
         {
            // We are in variable panel height mode, but since we can't
            // calculate the panel height here, we just set the height to
            // auto so that it expands to show all of its content.
   
            content.style.height = "auto";
         }
      }
   }
   else
   {
      this.removeClassName(panel, this.openClass);
      this.addClassName(panel, this.closedClass);

      if (content)
      {
         content.style.height = "0px";
         content.style.display = "none";
      }
   }
   
   this.attachPanelHandlers(panel);
};

Spry.Widget.Accordion.prototype.attachBehaviors = function()
{
   var panels = this.getPanels();
   for (var i = 0; i < panels.length; i++)
      this.initPanel(panels[i], i == this.defaultPanel);

   // Advanced keyboard navigation requires the tabindex attribute
   // on the top-level element.

   this.enableKeyboardNavigation = (this.enableKeyboardNavigation && this.element.attributes.getNamedItem("tabindex"));
   if (this.enableKeyboardNavigation)
   {
      var self = this;
      Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
      Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
      Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
   }
};

Spry.Widget.Accordion.prototype.getPanels = function()
{
   return this.getElementChildren(this.element);
};

Spry.Widget.Accordion.prototype.getCurrentPanel = function()
{
   return this.currentPanel;
};

Spry.Widget.Accordion.prototype.getPanelIndex = function(panel)
{
   var panels = this.getPanels();
   for( var i = 0 ; i < panels.length; i++ )
   {
      if( panel == panels[i] )
         return i;
   }
   return -1;
};

Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
{
   return this.getPanelIndex(this.currentPanel);
};

Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
{
   if (!panel)
      return null;
   return this.getElementChildren(panel)[0];
};

Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
{
   if (!panel)
      return null;
   return this.getElementChildren(panel)[1];
};

Spry.Widget.Accordion.prototype.getElementChildren = function(element)
{
   var children = [];
   var child = element.firstChild;
   while (child)
   {
      if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
         children.push(child);
      child = child.nextSibling;
   }
   return children;
};

Spry.Widget.Accordion.prototype.focus = function()
{
   if (this.element && this.element.focus)
      this.element.focus();
};

Spry.Widget.Accordion.prototype.blur = function()
{
   if (this.element && this.element.blur)
      this.element.blur();
};

/////////////////////////////////////////////////////

Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
{
   this.timer = null;
   this.interval = 0;

   this.fps = 60;
   this.duration = 500;
   this.startTime = 0;

   this.transition = Spry.Widget.Accordion.PanelAnimator.defaultTransition;

   this.onComplete = null;

   this.panel = panel;
   this.panelToOpen = accordion.getElement(panel);
   this.panelData = [];
   this.useFixedPanelHeights = accordion.useFixedPanelHeights;

   Spry.Widget.Accordion.setOptions(this, opts, true);

   this.interval = Math.floor(1000 / this.fps);

   // Set up the array of panels we want to animate.

   var panels = accordion.getPanels();
   for (var i = 0; i < panels.length; i++)
   {
      var p = panels[i];
      var c = accordion.getPanelContent(p);
      if (c)
      {
         var h = c.offsetHeight;
         if (h == undefined)
            h = 0;

         if (p == panel && h == 0)
            c.style.display = "block";

         if (p == panel || h > 0)
         {
            var obj = new Object;
            obj.panel = p;
            obj.content = c;
            obj.fromHeight = h;
            obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
            obj.distance = obj.toHeight - obj.fromHeight;
            obj.overflow = c.style.overflow;
            this.panelData.push(obj);

            c.style.overflow = "hidden";
            c.style.height = h + "px";
         }
      }
   }
};

Spry.Widget.Accordion.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };

Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
{
   var self = this;
   this.startTime = (new Date).getTime();
   this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};

Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
{
   if (this.timer)
   {
      clearTimeout(this.timer);

      // If we're killing the timer, restore the overflow
      // properties on the panels we were animating!

      for (i = 0; i < this.panelData.length; i++)
      {
         obj = this.panelData[i];
         obj.content.style.overflow = obj.overflow;
      }
   }

   this.timer = null;
};

Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
{
   var curTime = (new Date).getTime();
   var elapsedTime = curTime - this.startTime;

   var i, obj;

   if (elapsedTime >= this.duration)
   {
      for (i = 0; i < this.panelData.length; i++)
      {
         obj = this.panelData[i];
         if (obj.panel != this.panel)
         {
            obj.content.style.display = "none";
            obj.content.style.height = "0px";
         }
         obj.content.style.overflow = obj.overflow;
         obj.content.style.height = (this.useFixedPanelHeights || obj.toHeight == 0) ? obj.toHeight + "px" : "auto";
      }
      if (this.onComplete)
         this.onComplete();
      return;
   }

   for (i = 0; i < this.panelData.length; i++)
   {
      obj = this.panelData[i];
      var ht = this.transition(elapsedTime, obj.fromHeight, obj.distance, this.duration);
      obj.content.style.height = ((ht < 0) ? 0 : ht) + "px";
   }
   
   var self = this;
   this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};



</script>

<style type="text/css">
<!--

@charset "UTF-8";

.Accordion {
   border-left: solid 1px gray;
   border-right: solid 1px black;
   border-bottom: solid 1px gray;
   overflow: hidden;
}


.AccordionPanel {
   margin: 0px;
   padding: 0px;
}


.AccordionPanelTab {
   background-color: #CCCCCC;
   border-top: solid 1px black;
   border-bottom: solid 1px gray;
   margin: 0px;
   padding: 2px;
   cursor: pointer;
   -moz-user-select: none;
   -khtml-user-select: none;
}


.AccordionPanelContent {
   overflow: auto;
   margin: 0px;
   padding: 0px;
   height: 200px;
}

.AccordionPanelOpen .AccordionPanelTab {
   background-color: #EEEEEE;
}


.AccordionPanelTabHover {
   color: #555555;
}
.AccordionPanelOpen .AccordionPanelTabHover {
   color: #555555;
}

.AccordionFocused .AccordionPanelTab {
   background-color: #3399FF;
}


.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
   background-color: #33CCFF;
}


-->
</style>








<!--boddy teil-->


<div id="Accordion1" class="Accordion" tabindex="0">
  <div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
  </div>
  <div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
  </div>
</div>


<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
[/code]
Beitrag07.11.2010 um 11:23 (UTC)    
Titel:

1. Gewünschte Seite öffnen
2. Editorleiste: "Quellcode"
3. Dort dann in die entsprechende Stelle kopieren

Vielleicht interessiert dich auch folgende Variante.
Vorschau: http://www.web-cube.de.tl/Test.htm

Code:
<script type="text/javascript">
function getElementsByClass(searchClass,node,tag) {
   var classElements = new Array();
   if ( node == null ) node = document;
   if ( tag == null ) tag = '*';
   var els = node.getElementsByTagName(tag);
   var elsLen = els.length;
   var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
   var j = 0;
   for (var i = 0, j = 0; i < elsLen; i++) {
      if ( pattern.test(els[i].className) ) {
         classElements[j] = els[i]; j++;
      }
   }
   return classElements;
}

window.onload = function() {
   var spoilers = getElementsByClass('spoiler');
   for(x in spoilers) {
      spoilers[x].getElementsByTagName('span')[0].style.display = 'none';
   }
};

function spoiler(obj) {
   var st = obj.getElementsByTagName('span')[0].style;
   st.display = (st.display == 'none' || st.display == '') ? 'block' : 'none';
}
</script>
<p class="spoiler">
   <b>Überschrift</b>
   <input type="button" value="+/-" onclick="spoiler(this.parentNode);" />
   <span>Text</span>
</p>


Hoffe ich konnte helfen


Zuletzt bearbeitet von web-cube am 07.11.2010, 12:26, insgesamt einmal bearbeitet
Beitrag07.11.2010 um 11:46 (UTC)    
Titel:

also webcube version ist auf jedenfall unkomplezierte aber so finde ich nicht so schön ^^

hier bsp:
http://kohompa.de.tl/Titel-der-neuen-Seite.htm

@pink-camel knnst du auch javasript daten (.js) daten hochladen weis da grad nicht o bescehit wenn ja dann schick ich dir die version wo du dannimmer auf die datei verlinkst (also dann ist der code welchen du auf deine seite postest viel kürzer)
______________
Beitrag08.11.2010 um 11:01 (UTC)    
Titel:

Keine Ahnung, was Du mit "Javascript-Daten hochladen" meinst.

Deine Lösung ist schgon fast richtig, wenn ich z.B. auf Label 1 klicke geht dies zwar auf (hier sollten dann ja die anderen Infos erscheinen), doch wenn ich nochmals auf Label 1 klicke sollte es sich wieder schließen oder?

Wo schreibe ich überhaupt die Infos, also alle Daten rein?

Vielen Dank nochmals!
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de