webthreads.de - Web 2.0, Web-Entwicklung und Netzkultur von Markus Kühle

Akkordeon Effekt mit der Yahoo! User Interface Library

Der Akkordion Effekt ist in der letzten Zeit durch die Verwendung von JavaScript Bibliotheken immer populärer geworden. In dem webthreads WM 2006 Info Mashup wurde dieser Effekt für die Darstellung der WM Stadien sowie der WM Länder genutzt.
Einige Bibliotheken bieten diesen Effekt schon von Haus aus an und mann kann ihn direkt einsetzen. Mit der Yahoo! User Interface Library (YUI) muss man sich diesen Effekt erst noch “bauen”. Im folgenden wird erläutert was zu diesem Effekt benötigt wird und wie das Ergebnis aussehen kann. Wie schon im Artikel zu dem WM Info Mashup angekündigt hier nun also das erste Tutorial.

Gliederrung:



Live Beispiel
Das fertige Akkordion Beispiel sieht am Ende wie folgt aus:


Benötigte YUI Library Komponenten

Die YUI Library kann bei SourceForge heruntergeladen werden. Anschließend die entsprechenden Komponenten aus dem build Verzeichnis in ein geeignetes Unterverzeichnis kopieren (hier wird das Verzeichnis js verwendet) und in die HTML Seite einbinden:

<!-- Yahoo! User Interface Library --> <script type="text/javascript" src="js/yahoo/yahoo.js"></script> <script type="text/javascript" src="js/yahoo/event.js"></script> <script type="text/javascript" src="js/yahoo/dom.js"></script> <script type="text/javascript" src="js/yahoo/animation.js"></script>


Aufbau des HTML für die Akkordion Elemente

Ein Akkordion hat immer eine Überschrift und den eigentlichen Inhalt. Im folgenden accordion header und accordion body gennant. Somit wird jeweils ein <div> Element für den accordion header und accordion body benötigt und auch gleich ein entsprechender CSS-Klassenname für das Design und zur späteren Identifikation definiert. Ein Accordion Element (also accordion header und accordion body) wird wiederum mit einem weiteren <div> Element gekapselt und auch wieder mit einem entsprechendem CSS-Klassenname versehen.

Ein vollständiges Accordion Element sieht nun wie folgt aus:

<div class="accordionItem"> <div class="accordionHeader">accordion header</div> <div class="accordionBody">accordion body</div> </div>

Eine letzte Kapselung wird bei einer Menge von accordion items erstellt um dem JavaScript Aufruf zu vereinfachen.
Der vollständige HTML Code für ein Accordion mit drei Elementen sieht wie folgt aus:

<div id="myAccordion" class="accordion"> <div class="accordionItem"> <div class="accordionHeader">accordion header 1</div> <div class="accordionBody" style="height:100px;">accordion body</div> </div> <div class="accordionItem"> <div class="accordionHeader">accordion header 2</div> <div class="accordionBody" style="overflow:auto">accordion body</div> </div> <div class="accordionItem"> <div class="accordionHeader">accordion header 3</div> <div class="accordionBody">accordion body</div> </div> </div>

Durch die Angabe der Höhe des ersten accordion body mit style=”height:100px” wird die Höhe der Akkordion Elemente konfiguriert und gleichzeit das initial geöffnete Element definiert.

CSS Definitionen

Die CSS Klassennamen sind für die jeweiligen Element schon definiert – nun fehlen nur noch die entsprechenden CSS Klassendefinitionen. Generell muss natürlich die Gesamtbreite des Akkordions angegeben werden sonst erscheint dieser über die gesamte verfügbar Breite der Seite. Aber auch der accordion header sowie der accordion body müssen mit Höhen ausgestattet werden, wobei zu beachten ist, dass bei dem accordion body nur das initial aktive Element eine Höhe direkt angegeben bekommt und per default alle anderen eine Höhe von 0 Pixel haben.

<style type="text/css" media="screen"> .accordion { width: 300px; border: 1px solid #999999; font-family: Helvetica,Arial,sans-serif; font-size: 12px; color: #000000; } .accordionHeader { height: 16px; background-color: #CFD8E4; border: 1px solid #999999; font-size: 14px; padding: 1px 0px 1px 3px; cursor: pointer; } .accordionBody { height: 0px; overflow: hidden; padding: 0px 2px; background-color: #EEEEEE; } </style>

Per default ist der accordion body bei meinem Beispiel mit dem style overflow:hidden gesetzt. Das bedeutet, dass auch bei einer größeren Datenmenge für einen accordion body kein Scollbalken erscheint. Möchte man einen Scrollbalken haben so muss der style entweder nur für das entsprechende Akkordion Elemement oder generell in der CSS-Klasse auf overflow:auto gesetzt werden. In meinem Beispiel hat das zweite Akkordion Element einen Scrollbalken.
Es sei noch erwähnt, dass die CSS Definitionen zwecks des guten Stils natürlich in eine eigene CSS Datei ausgelagert werden sollten. In diesem Beispiel werden der Übersicht wegen die CSS Definitionen nicht ausgelagert um den HTML Code direkt mit den dazugehörigen CSS Angaben sehen zu können.


Akkordion JavaScript

Das JavaScript für die Akkordion Effekt kann in drei Teile aufgeteilt werden.

Der JavaScript Code der nun erstellt wird sollte so allgemein wie nur möglich sein, damit er einfach wiederverwendet werden kann. Aus diesem Grund wurden bei dem Erstellen des HTMLs eindeutige Klassennamen verwendet, die zum einen den Zweck haben eine einheiltiche Gestaltung zu gewährleisten und zum anderen eine einfache Identifikation zu ermöglichen. Zudem wurde dem gesamten Akkordion eine eindeutige ID vergeben. Diese Id wird verwendet um ein Akkordion Objekt zu erstellen.

Wem die kompletten JavaScript Erläuterungen zu viel sind, der kann sich nur das folgende JavaScript Grundgerüst sowie die Erstellung ein solches Akkordion Objektes anschauen und gleich zu den Resourcen springen um entweder nur die accordion.js oder das gesamte Beispiel herunterzuladen. Generell reichen die bisherigen Erläuterungen und das accordion.js aus um ein Akkordion Effekt zu erstellen.

Grundgerüst des Akkordion JavaScript

Es wird eine Accordion Funktion erstellt, die als Parameter die Id des Akkordion Rahmen <div> Elements erhält. Schöner Stil ist natürlich, wenn der JavaScript Code in eine separate Datei ausgelagert wird. In diesem Beispiel heisst diese Datei accordion.js. Das Grundgerüst für die Accordion Funktion sieht wie folgt aus:

function Accordion(id) {
  // Akkordion JavaScript Code
}

Um für den oben beschriebenen Akkordion HTML Code den Akkordion Effekt zu geben wird folgender Code genutzt:

<script type="text/javascript" src="js/accordion.js"></script>

<script type="text/javascript">
var  myAccordions;

  function init() {
    accordionWMCities = new Accordion("myAccordion");
  }
  YAHOO.util.Event.addListener(window, 'load', init);
</script>

Dabei wird die YUI Event Funktionalität genutzt um das Akkordion Objekt nach dem Erstellen des DOMs mit dem onLoadzu erzeugen.


Über alle gegebenen Akkordion Elemente iterieren

Nachdem das Erstellen eines Akkordion Objektes geklärt ist werden nun als erstes anhand der übergebenen Akkordion Id die Akkordion Elemente geholt und lokal gespeichert.
In der YUI Library besteht seit der Version 0.10.0 die Möglichkeit Dom Elemente anhand ihres CSS-Klassennamens zu selektieren. Die Funktion ist in er Dom Komponente zu finden (siehe auch JSDoc der DOM-Funktion) und lautet:

Array YAHOO.util.Dom.getElementsByClassName( className,  tag,  root)

Es würde reichen wenn nur der CSS-Klassenname angegeben wird. Für eine Verbesserung der Performance sollte allerdings der Tag Name der Elemente nach denen gesucht wird (in unserem Fall ist das ein <div>) und ein Start Knoten angegeben werden.

function Accordion(id) {
  // Speicher das Element der übergebenen ID als Akkordion Container
  this.accContainer = document.getElementById(id);

  // Alle Elemente mit der CSS-Klasse 'accordionItem' holen
  this.accItems =
     YAHOO.util.Dom.getElementsByClassName("accordionItem", "div", this.accContainer);

  // default Akkordion body Höhe definieren
  this.accItemBodyHeight = 0;

  // Über alle Akkordion Elemente iterieren und jedes einzelne in einem Array speichern
  for (var i=0; i<this.accItems.length; i++) {
    ...
  }
}


Jedes Akkordion Element speichern und das aktive Element finden

In der for Schleife wird nun über jedes Akkordion Element (CSS Klasse accordionItem) iteriert und jedes Element sowie deren accordion Header und accordion Body soll gespeichert werden. Gleichzeitig soll geprüft werden ob das aktuelle Element das aktive Element ist. Das aktive Element hat als einzigstes Element eine Höhe im accordion body definiert.

  for (var i=0; i<this.accItems.length; i++) {
    // Aktuelles Akkordion Element als Eltern-Element f?r dazugeh?rigen Header und 
    // Body speichern
    this.accItems[i].parent = this;
    // Akkordion Header und Body des aktuellen Akkordion Elements holen und speichern
    this.accItems[i].header =
      YAHOO.util.Dom.getElementsByClassName("accordionHeader", "div",
        this.accItems[i])[0];
    this.accItems[i].body =
      YAHOO.util.Dom.getElementsByClassName("accordionBody", "div",
        this.accItems[i])[0];

    // Prüfen ob das aktuelle Akkordion Element das aktive Element ist (also eine 
    // größere Höhe f?r den accordion body gesetzt hat). Normalerweise sollte nur ein
    // Element eine Höhe größer 0 Pixel definiert haben. Wenn die Höhe größer der
    // Höhe des bisherigen aktiven Akkordion oder am Anfang 0 Pixel ist wird dieser 
    // als aktives Element gespeichert.
    if (this.accItems[i].body.offsetHeight > this.accItemBodyHeight) {
      this.accItemBodyHeight = this.accItems[i].body.offsetHeight;
      this.activeItem = this.accItems[i];
      this.activeItem.body.style.height = this.accItemBodyHeight + "px";
    }

    ...
  }


Jedem Element die Akkordion Animation als Click-Event registieren

Als letztes muss nur noch die Animation für das Zusammenfahren des aktiven Elements und das Ausdehnen des selektierten Elements definiert werden. Dies wird mit Hilfe der Animation und Event Kompontente der YUI Library implementiert. Auf die Animation Komponente wird in diesem Tutorial nicht weiter eingegangen. Dieses Thema wird separat in einem weiteren Tutorial behandelt.

  for (var i=0; i<this.accItems.length; i++) {
    ...

    // Einen Click Event Listener für jeden accordion header registrieren
    YAHOO.util.Event.addListener(this.accItems[i].header, "click", function(){
      // Wenn auf das aktive Element geklickt wurde - nichts machen
      if(this.parent.activeItem == this){
          return;
      }

      // Für das aktive Element eine "Schrumpf" Animation definieren
      var shrinkLastAccAnim = new YAHOO.util.Anim(this.parent.activeItem.body, {
      height:{from:this.parent.accItemBodyHeight, to:0}}, 0.5);

      // Für das angeklickte Elment eine "Ausdehnen" Animation definieren
      var expandNewActiveAccAnim = new YAHOO.util.Anim(this.body, {
      height:{from:0, to:this.parent.accItemBodyHeight}}, 0.5);

      // Selektiertes Element als aktives Element setzen
      expandNewActiveAccAnim.onStart.subscribe(function() {
        this.parent.activeItem = this;
      }, this, true);

      // Animation starten
      shrinkLastAccAnim.animate();
      expandNewActiveAccAnim.animate();
    }, this.accItems[i], true);

  }


Vollständiger JavaScript Code

Der gesamte JavaScript Code für den Accordion Effekt ist im folgenden Listing zu erkennen. Dieser ist ausführlich kommentiert und sieht auf den ersten Blick evtl. komplexer aus als er wirklich ist. Die Hälfte des Listings besteht aus Kommentaren. Das JavaScript für den Akkordion Effekt kann auch direkt als Datei heruntergeladen werden (siehe Ressourcen).

function Accordion(id) {
  // Speicher das Element der ?bergebenen ID als Akkordion Container
  this.accContainer = document.getElementById(id);

  // Alle Elemente mit der CSS-Klasse 'accordionItem' holen
  this.accItems =
    YAHOO.util.Dom.getElementsByClassName("accordionItem", "div", this.accContainer);

  // default Akkordion body H?he definieren
  this.accItemBodyHeight = 0;

  // ?ber alle Akkordion Elemente iterieren und jedes einzelne in einem Array speichern
  for (var i=0; i<this.accItems.length; i++) {
    // Aktuelles Akkordion Element als Eltern-Element f?r dazugeh?rigen Header und 
    // Body speichern
    this.accItems[i].parent = this;
    // Akkordion Header und Body des aktuellen Akkordion Elements holen und speichern
    this.accItems[i].header =
      YAHOO.util.Dom.getElementsByClassName("accordionHeader", "div",
        this.accItems[i])[0];
    this.accItems[i].body =
      YAHOO.util.Dom.getElementsByClassName("accordionBody", "div",
        this.accItems[i])[0];

    // Prüfen ob das aktuelle Akkordion Element das aktive Element ist (also eine 
    // größere Höhe f?r den accordion body gesetzt hat). Normalerweise sollte nur ein
    // Element eine Höhe größer 0 Pixel definiert haben. Wenn die Höhe größer der
    // Höhe des bisherigen aktiven Akkordion oder am Anfang 0 Pixel ist wird dieser 
    // als aktives Element gespeichert.
    if (this.accItems[i].body.offsetHeight > this.accItemBodyHeight) {
      this.accItemBodyHeight = this.accItems[i].body.offsetHeight;
      this.activeItem = this.accItems[i];
      this.activeItem.body.style.height = this.accItemBodyHeight + "px";
    }

    // Einen Click Event Listener f?r jeden accordion header registrieren
    YAHOO.util.Event.addListener(this.accItems[i].header, "click", function(){
      // Wenn auf das aktive Element geklickt wurde - nichts machen
      if(this.parent.activeItem == this){
        return;
      }

      // F?r das aktive Element eine "Schrumpf" Animation definieren
      var shrinkLastAccAnim = new YAHOO.util.Anim(this.parent.activeItem.body, {
        height:{from:this.parent.accItemBodyHeight, to:0}}, 0.5);

      // F?r das angeklickte Elment eine "Ausdehnen" Animation definieren
      var expandNewActiveAccAnim = new YAHOO.util.Anim(this.body, {
        height:{from:0, to:this.parent.accItemBodyHeight}}, 0.5);

      // Selektiertes Element als aktives Element setzen
      expandNewActiveAccAnim.onStart.subscribe(function() {
        this.parent.activeItem = this;
      }, this, true);

      // Animation starten
      shrinkLastAccAnim.animate();
      expandNewActiveAccAnim.animate();
    }, this.accItems[i], true);
  }

  // Letzte Prüfung, falls mehrere Elemente eine Höhe angegeben haben. Es wird 
  // nur das aktive Element offen gelassen. Alle anderen Akkordion Elemente 
  // erhalten die Höhe 0 Pixel.
  for(var i=0; i<this.accItems.length; i++){
    if(this.activeItem != this.accItems[i]){
      this.accItems[i].body.style.height = 0 + "px";
    }
  }
};


Ressourcen

Das hier beschriebene Beispiel kann noch einmal separat auf einer eigenen HTML Seite angesehen werden: Link
Zudem kann das gesamte Beispiel komplett zum entpacken heruntergeladen werden: AkkordionBeispiel.zip
Oder auch nur der Akkordion JavaScript: accordion.js

Viel Spass beim Ausprobieren.

Ähnliche Artikel, die dich interessieren könnten:

    None Found

15 Kommentare zu 'Akkordeon Effekt mit der Yahoo! User Interface Library' »»


Kommentare

  1. Kommentar by Thomas | 25.08.2006 at 10:13:36

    Leider ist der Inhalt mit deaktivierten Javascript nicht erreichbar …

  2. Kommentar by Markus | 27.08.2006 at 11:35:13

    Mmmhh.. ich hab das eben getestet und mein JavaScript ausgeschaltet aber bei mir sehe ich noch alles und der Artikel ist abrufbar. Evtl. könntest du mir noch deinen Browser verraten.

  3. Kommentar by Thomas | 13.09.2006 at 09:55:35

    Ich meine das Accordion… ohne Javascript kann ich die geschlossenen Divs nicht sehen

    Browser ist Firefox

  4. Kommentar by Markus | 13.09.2006 at 15:01:05

    Die geschlossenen Divs werden mit JavaScript gesteuert. D.h. ohne JavaScript funktionieren die Akkordions nicht. Ich würde auch behaupten, dass man ohne JavaScript auch keinen Akkordeon Effekt hinbekommt. Auch ohne die Animation beim Öffnen und Schließen eines Divs – also zwischen visibility=”hidden” und visibility=”visible” wirst du nicht ohne JavaScript hinbekommen.

    Daher ist es auch verständlich warum du die geschlossenen div Blöcke nicht sehen kannst.

  5. Kommentar by Thomas | 14.09.2006 at 17:50:14

    Ich möchte ja auch nicht, dass der Accordion Effekt an sich ohne Javascript funktioniert. Aber für Leute, die Javascript deaktiviert haben ist der Inhalt nicht zugänglich … am besten wäre es wenn alle Divs ohne Javascript einfach geöffnet sind. (wenn das möglich ist)

  6. Kommentar by corpore | 17.11.2006 at 10:38:08

    Vielen Dank für das ausführliche und saubere Tutorial. Mir ist allerdings aufgefallen, daß es im IE v7 Probleme gibt. Die div height proerty scheint nicht richtig gesetzt zu werden und die Quetschkomode fällt auseinander. Alles top in Firefox.

    Grüße!!

    P.S. @Thomas
    Wer heutzutage Javascript und Cookies disabled ist es selber Schuld wenn Inhalte nicht rüberkommen… da hab ich kein Mitgefühl.

  7. Kommentar by Michael Rölle | 04.04.2007 at 15:36:06

    Cooler Effekt, werde ich auch mal ausprobieren. Vielen Dank für das Tut!

  8. Kommentar by Marc | 05.04.2007 at 11:31:39

    @corpore: Damit das Beispiel auch im IE 7 richtig funktioniert, muss der DOCTYPE geändert werden. Erste Zeile in der index.html einfach durch z.B. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> ersetzen.

    Vielen Dank für dieses ausführliche Tutorial!

  9. Kommentar by Markus | 05.04.2007 at 11:42:52

    @Marc: Vielen Dank für diesen Hinweis!! Bin bisher leider nicht dazu gekommen das ganze nochmal im IE7 durchzutesten.


Trackbacks & Pingbacks »»

  1. Pingback by webthreads.de » WM 2006 hat begonnen – WM Info Mashup | 21.06.2006 at 09:26:01

    [...] Erstellen einen Akkordion Effekts mit der YUI Library [...]

  2. [...] webthreads.de » Akkordeon Effekt mit der Yahoo! User Interface Library Der Akkordion Effekt ist in der letzten Zeit durch die Verwendung von JavaScript Bibliotheken immer populärer geworden. In dem webthreads WM 2006 Info Mashup wurde dieser Effekt für die Darstellung der WM Stadien sowie der WM Länder genutzt. [...]

  3. [...] Neben den Beispielen erläutert er kurz warum die Yahoo User Interface (YUI) Library den Vorzug gegenüber anderen Effekt Bibliotheken erhält. Während zum Beispiel Script.aculo.us viele Effekte schon von Haus aus liefert, müssen mit der YUI Library diese oft erst noch erstellt werden. Als Beispiel dazu siehe auch den bei webthreads beschriebenen Akkordion Effekt mit der YUI Libray, der bei der YUI Library erst noch implementiert werden muss während er bei anderen Bibliotheken schon als fertiger Effekt mitgeliefert wird. Aber genau das ist der große Vorteil der YUI Library denn die YUI Library gibt ein schönes Grundgerüst vor mit dem eigene Effekte einfach erstellt werden können. Aus diesem Grund wird bei der YUI Library auch von Utilities, wie zum Beispiel der YUI Animation utility, gesprochen und es besteht ein Unterschied zwischen den YUI Utilities (z.B. Animation, Event oder Drag and Drop) und Controls (z.B. Calendar, Container oder Slider). [...]

  4. [...] akkordeon-effekt-mit-der-yahoo-user-interface-library/ [...]

  5. Pingback by webthreads.de » Google verwendet YUI JavaScript Library? | 17.04.2007 at 08:47:10

    [...] Komponenten die der Entwickler für eigene Entwicklungen nutzen kann (siehe z.b. mein Tutorial über einen Akkordion Effekt mit der YUI [...]

  6. [...] webthreads.de » Akkordeon Effekt mit der Yahoo! User Interface Library Der Akkordion Effekt ist in der letzten Zeit durch die Verwendung von JavaScript Bibliotheken immer populärer geworden. In dem webthreads WM 2006 Info Mashup wurde dieser Effekt für die Darstellung der WM Stadien sowie der WM Länder genutzt. [...]

Hinterlasse ein Kommentar »»

Bad Behavior has blocked 3842 access attempts in the last 7 days.

100mg cialis
cheapest viagra world
50mg cialis
viagra 50mg online
Buy viagra Buffalo
Buy viagra Rome
cheapest price for viagra and xanax
cialis brand cialis 100mg
rx viagra 100mg
viagra buy do nu
cialis cialis information
buy buy online sale viagra viagra
discount viagra overseas
cheapest prices on generic viagra
buy buy sale viagra viagra
cheapest regalis viagra
Buy viagra Newark
cheap viagra viagra
overnight delivery cheap cialis
cialis cialis tadalafil
buy cheap xanax generic flomax viagra
buy generic online viagra
50 mg viagra retail price
buy cheap levitra
cialis canadian epharmacy
cheep viagra from india
cialis 50mg
buy cheap viagra prescription online
levitra 10mg 20mg
viagra and eye damage
cialis buzzmachine by jeff jarvis
cialis cialis uk
over the counter viagra london
buy cheap deal pill viagra
viagra express
cialis black
Buy viagra Austin
buy cialis no prescription
buy cialis online viagra
viagra canada online pharmacy
viagra canada prescription
buy cheap viagra 32
buy cheap viagra
cialis canadian generic
cialis reviews
buy cheap purchase uk viagra
cheapest viagra in uk cheap
viagra canada
discount drugs levitra 100mg
cialis 10
buy discount viagra
cialis cheap online
buy buy cheap medved viagra
Buy viagra Omaha
discount viagra mastercard
levitra brand levitra 100mg
cheapest prescription viagra
cialis without prescription
Buy viagra Portland
cheapest place to buy viagra
buy discount online viagra
Buy viagra Columbus
buy viagra cheapest best prices online
buy viagra and cilas
viagra by mail
cialis 50mg
cialis cialis drug generic flomax
buy cheap deal pill viagra
buy discount viagra online a href
rx cialis 100mg
order cialis on line
cheapest price viagra
cialis best price buy online
discount viagra sales online
cialis 20mg
cialis bulletin board
cialis chewable
viagra brand viagra 100mg
buy free viagra on internet
Buy viagra Nashville
viagra canadian price shipped
buy viagra cialis
cheapest viagra price
buy cheap viagra
buy generic no online prescription viagra
Buy viagra Arlington
viagra calgary
cialis 20 mg
10 generic levitra for 19.95
cheap cialis canada
Buy viagra Fort Worth
buy viagra 1
viagra buy it
cheapest generic viagra sent overnight
Buy viagra Tulsa
cialis 2005
generic levitra 20mg pills erections
discount viagra canada
buy buy cheap medved viagra
250 mg levitra
levitra no prescription
buy cheap viagra on
cialis no prescription
order cialis overnight delivery
buy cialis internet
buy cheap viagra in uk
buy cheap deal viagra viagra viagra
cheapest viagra generic substitute
Buy viagra Pittsburgh
cialis 20mg reviews
buy viagra cheap india pharmacy
buy cheap online uk viagra
cheap viagra without prescription
order cialis tampa florida
20 mg cialis
discount viagra generic
buy cheap viagra viagra
buy cheap xanax generic flomax viagra
viagra buy online
cialis best price
viagra canada pharmacy
buy cheao cgeap kamagra uk viagra
viagra by money order
viagra no prescription
viagra 20 mg
buy cheap viagra online now uk
cialis cialis viagra
cialis 5m tablets
viagra canadian
cheapest 4 quantity of viagra
100mg levitra
viagra canada generic
50 mg cialis retail price
Buy viagra Memphis
buy cialis 50mg
discount viagra sales
cheapest viagra in uk
Buy viagra Phoenix
viagra canadian prescriptions
discount viagra
cialis best buy
Buy viagra Atlanta
cheapest price viagra us licensed pharmacies
buy cheap viagra online uk
viagra 100mg price
buy cialis now
buy buy online viagra viagra
viagra calgary
cheapest viagra on line
cialis buy cialis online order cialis
buy cheap deal viagra viagra viagra
cialis black reviews
order generic cialis c o d
100 mg levitra us pharmacy
cheapest viagra homepage
cheapest prices on generic viagra
buy female viagra
Buy viagra Philadelphia
viagra by phone
viagra canadaian prices
buy cost low viagra
cheapest uk supplier viagra
Buy viagra Tacoma
cheapest site viagra
cheap cialis canada
buy buy discount viagra viagra viagra
buy buy cheap viagra
cheapest viagra in the uk
discount viagra prescription drug
buy cheap generic viagra online
cialis buy online
cheapest viagra us pharmacy
Buy viagra Louisville
cialis 125 mg
Buy viagra New Orleans
levitra 20 mg
cialis cialis
cheapest viagra uk
buy levitra wighout prescription
viagra calias
generic levitra 100mg
cialis causes muscle ache because
viagra by mail canada
cialis cialis cialis viagra
buy buying sale viagra
discount viagra uk
viagra without prescription
10mg cialis
patanol cialis nexium
cialis canada health canada
cheapest price for viagra and xanax
cialis cialis genuinerx net viagra
cialis cialis viagra viagra
buy viagra canada
Buy viagra Long Beach
cheapest viagra online plus zenegra
cheapest viagra in the uk
cialis 20
viagra buy now pay later
order cialis online from dreampharmaceuticals
cheapest viagra online in the uk
levitra 125 mg
order cialis now
cialis cheap online pharmacy
over sea generic viagra
cheapest cheap viagra
levitra 100mg price
cialis 50mg online
overnight shipping cialis
cialis 5mg
cheapest price for viagra
buy cheap deal online viagra viagra
canada pharmacy discounted levitra 100
order cialis online
levitra 50mg
cialis brands
buy form generic viagra
50 mg cialis
cialis 100mg price
cheapest viagra anywhere
cheap cialis canada
viagra canadian price shipped
discount viagra sale
buy canada viagra
buy buy free viagra viagra viagra
cialis by fedex
cialis 36 hours
cheapest price for generic viagra
buy levitra 50mg
40 grams of cialis
buy cheap online viagra viagra
buy deal deal price viagra
buy viagra cheap online
10 generic cialis for 19.95
order generic cialis
cheap 25mg levitra
cheapest in uk viagra
cialis black reviews
over the counter viagra substitute
cheapest generic viagra and xanax
cialis cialis generic viagra
buy canada in viagra
cialis causes lower blood pressure
viagra buy australia
buy cheap generic online viagra
buy viagra cialis levitra online prescription
overnight generic cialis
cialis cheapest online prices
viagra by the pill
order cialis and viagra
viagra by mail order
buy cheap cialis
viagra canada price
cheep viagra 600mg uk
cheapest prices for viagra online
cialis buy generic
cheap viagra canada
buy cheap viagra cheap viagra online
cialis canadian
cialis bestellen
cialis best cialis price
viagra cailis
over the counter drug to viagra
viagra canada prescription
levitra without prescription
paypal cialis
cheapest generic viagra caverta veega
36 hour levitra
order cialis
buy viagra cheap prices
viagra buy
cialis buy it online huge discount
cialis cheapest price
over the counter viice for generic viagra
buy and purchase viagra online
cialis buy on line
viagra by overnight delivery
Buy viagra Oakland
buy australian viagra
Buy viagra San Antonio
buy deal online sale viagra viagra
cialis 10mg 20mg
buy buy online viagra viagra
canada pharmacy discounted viagra 100
cialis black 800mg
cialis canada
cialis britan
levitra 50 mg
cialis canadian pharmacy
100mg viagra
buy cialis wighout prescription
cialis blindness
cheap viagra without a prescription
cheapest generic viagra and canada
Buy viagra Washington
cheapest generic viagra and xanax pills
buy discount levitra
buy buy sale viagra viagra
30mg cialis
cialis 800mg
viagra buy uk
Buy viagra Tucson
5mg cialis generic
viagra canada
Buy viagra Baltimore
viagra buy contest
cialis cheap overseas
levitra online prescription
Buy viagra Minneapolis
viagra 10mg 20mg
Buy viagra Mesa
buy discount cialis
cheapest viagra overnight
Buy viagra Fresno
generic viagra wholesale 100mg
order cialis online dream pharmaceutical
cialis cheap prices
discount viagra in the usa
viagra 100mg
buy viagra
50 mg levitra
buy deal viagra
10 generic viagra for 19.95
buy viagra cheap
cialis 50 mg
cheapest viagra
order generic cialis softtabs online
viagra canada pharmacy
discount drugs cialis 100mg
discount viagra canada
cialis cialis forum pharmacy
cheapest viagra prices uk
discount viagra online
cialis online prescription
ordering cialis online
cialis bestseller
perscription cialis
buy buy online sale viagra viagra
cheapest viagra in uk che
viagra 50mg
Buy viagra Riverside
discount viagra viagra
cialis cardiac risks
cheap websites for viagra
cialis certified online pharmacy
viagra buy it online now
buy discount viagra
buy viagra alternative
viagra canadian prescriptions
cheep viagra from indea
cheapest viagra prices us licensed pharmacies
order cialis pills
overnight delivery cialis
cialis 100mg
buy viagra by pill
buy viagra caverta
cialis buy generic flomax
cheapest price viagra us licensed pharmacies
cialis buy cheap cialis online index
buy viagra for cheap
cheapsest viagra online
order cheap cialis
buy cialis viagra
buy canada in viagra
discount viagra or xanax
buy cheap site viagra
check generic order pay viagra
cheap viagra without a pr
Buy viagra Charlotte
cialis black 800mg
cialis cialis cialis genuinerx net viagra
cheapest generic substitute viagra
cialis cheap cialis online
buy buy free viagra viagra viagra
discount viagra 10 pack generic
discount viagra offers
generic cialis 20mg pills erections
cheapest viagra us licensed pharmacies
100 mg cialis us pharmacy
buy viagra online 50mg
viagra buy general
cialis buy generic ed
buy australian viagra
10mg viagra
order generic cialis softtabs
cheapest price on viagra
discount viagra perscription drug
Buy viagra El Paso
buy cheap viagra uk
cialis brand verses generic cialis
cialis 10 mg
buy cialis online now
generic viagra 100mg
buy buy discount viagra viagra viagra
cialis black
cheapest viagra anywhere
36 hour cialis
cheapest generic viagra 99 cents
order cialis on-line
Buy viagra Milwaukee
cialis best effect
cheapest generic price viagra
redtube viagra
cheapest viagra generic substitute
cheapest viagra online
cheep viagra from inda
viagra and eye sight
viagra express
Buy viagra Modesto
buy discount viagra viagra viagra
cialis cialis genuinerx net
discount viagra sale online
buy free viagra viagra
cheapest viagra online pharmacy
cheapest place buy viagra online
paypal cialis po box
generic cialis wholesale 100mg
generic viagra 20mg pills erections
buy cheap cheap kamagra uk viagra
viagra buy in uk online
cheapest prices for viagra online
cialis buy cialis online
Buy viagra Richmond
viagra 125 mg
cheapest cialis
buy viagra 100mg
cheapest viagra on the net
buy cheapest viagra online
buy cheap cheap kamagra uk viagra
buy 10 mg cialis
cialis 800mg
50 mg viagra
buy cheapest viagra
Buy viagra Oxnard
viagra canada online
buy cheap viagra on the net
buy cheap generic viagra
cialis black 800mg
cialis cheap visa
cheapest viagra prices
buy cheap deal online viagra viagra
buy discount viagra online
Buy viagra Indianapolis
Buy viagra Houston
buy viagra 50mg
20mg cialis
levitra 25 mg
peak level of cialis in blood
cheep generic viagra
cialis by phone
order 50mg levitra
cheapest regalis viagra
cialis buy online cheap tadalafil
viagra canada online
cheapest price on viagra
cialis canada prescription
cheapest generic silagra viagra
discount viagra cialis
cialis causes high blood pressure
cialis canada pharmacy
cheapest price viagra
cheapest viagra
cheapest uk viagra
cheapest viagra homepage
cheapest price for viagra
discount viagra wholesale stores discount pharmacy
buy discount generic viagra
cialis cialis vardenafil
cialis canada generic
buy levitra no prescription
buy cheap viagra online u
cheap levitra canada
order viagra cialis flomax pharmacy
voagra online without prescription
buy cheap online viagra
overnight express delivery generic cialis
cialis cheapest
buy discounted viagra
buy buy medved viagra viagra
cheapest uk supplier viagra
Buy viagra Las Vegas
cialis britain
10mg levitra
order cialis 399
voagra online without prescription
cheapest viagra on the internet
Buy viagra San Francisco
cialis cancdian dugs
cialis brand name
viagra canada online pharmacy
Buy viagra Albuquerque
viagra canada price
cheapest generic viagra
viagra buy ionline
viagra canadian
cialis 2.5
cialis cialis genuinerx net viagra viagra
ordering generic cialis from india
buy cheap viagra online now
Buy viagra Detroit