Das kostenlose Visualize Plugin für jQuery ermöglicht schnell und einfach sehr ansehenliche Diagramme und Charts zu erstellen. Hierzu muss einfach das Plugin in die Webseite mit eingebunden werden und angegeben werden in welchen Container das Diagramm eingefügt werden soll und vorallem welche Art und Eigenschaften das Diagramm haben soll. In folgenden Beispiel soll eine Line Chart in die Tabelle table gezeichnet werden. Hierzur muss folgender Code verwendet werden.

%MINIFYHTML2230c3ef11a6b5163d8d5c488619a2900%

Wenn dies gemacht ist benötigen wir noch die Werte die in dem Linien Diagramm dargestellt werden sollen. Hierzu muss einfach eine kleine Tabelle im HTML Code angelegt werden, soll diese nicht sichtbar sein kann die Tabelle einfach mit dem Attribut versteckt werden.

#table {
 display: none;
}

In der folgenden Tabelle müssen jetzt die wie schon oben genannt die Werte des Diagramms festgelegt werden.

2009 Individual Sales by Category



food
auto
household
furniture
kitchen
bath




Mary
150
160
40
120
30
70

%MINIFYHTML2230c3ef11a6b5163d8d5c488619a2901%

Wo jetzt document.body steht müssen Sie das Objekt auswählen bei der die Funktion starten soll. In diesem Fall wurde der ganze Body gewählt. Im anschließenden Teil sehen Sie dann eine Überprüfung ob der rote div-Container bereits versteckt ist oder nicht. Wenn er nicht versteckt bzw. unsichtbar ist wird er geöffnet und das mit einem Slide nach unten in einer langsamen Geschwindigkeit. Jetzt müssen sie nur noch den div-Container in Ihrer HTML Datei erstellen und eventuell einen Button hinzufügen der auf das Klickevent reagiert.
Hier nochmal der gesamte Quelltest.

  

    %MINIFYHTML2230c3ef11a6b5163d8d5c488619a2902%%MINIFYHTML2230c3ef11a6b5163d8d5c488619a2903%%MINIFYHTML2230c3ef11a6b5163d8d5c488619a29018%
  
    Klick


  

%MINIFYHTML2230c3ef11a6b5163d8d5c488619a2904%

Anschließend folgt nur noch das Einfügen der beiden Container, es könnten auch andere Objekte sein, in den HTML Code. Im unteren Teil des Artikels sehen Sie ein einfaches Beispiel.

  

    %MINIFYHTML2230c3ef11a6b5163d8d5c488619a2905%%MINIFYHTML2230c3ef11a6b5163d8d5c488619a2906%%MINIFYHTML2230c3ef11a6b5163d8d5c488619a2907%%MINIFYHTML2230c3ef11a6b5163d8d5c488619a2908%%MINIFYHTML2230c3ef11a6b5163d8d5c488619a2909%%MINIFYHTML2230c3ef11a6b5163d8d5c488619a29019%
  

    Drag me
    

    

  

Demo ansehen
Projekt downloaden

$(document).ready(function(){
 $("#dragMe").draggable();
});

Anschließend müssen Sie nur noch den Container in den body einfügen und eventuell eine Größe und Farbe bzw. Rahmen zuordnen, um den Container zu sehen.

  

    %MINIFYHTML2230c3ef11a6b5163d8d5c488619a29010%%MINIFYHTML2230c3ef11a6b5163d8d5c488619a29011%%MINIFYHTML2230c3ef11a6b5163d8d5c488619a29012%%MINIFYHTML2230c3ef11a6b5163d8d5c488619a29013%%MINIFYHTML2230c3ef11a6b5163d8d5c488619a29020%
  

    Drag me
    

  

Demo ansehen
Projekt downloaden

  

    %MINIFYHTML2230c3ef11a6b5163d8d5c488619a29014%%MINIFYHTML2230c3ef11a6b5163d8d5c488619a29015%%MINIFYHTML2230c3ef11a6b5163d8d5c488619a29021%
  

    Show me 


Anzeige


  

Demo ansehen
Download jQuery Show and Hide

  

    %MINIFYHTML2230c3ef11a6b5163d8d5c488619a29016%%MINIFYHTML2230c3ef11a6b5163d8d5c488619a29017%
  


    

  

Mit der Funktion GetContent können Sie einen Parameter (id) mitgeben die Sie dann anschließend in PHP via $_GET auswerten können. Desweiteren wird in der Funktion bestimmt wo der neue Content reingeladen werden soll, hierfür wird der leere div-Container mit dem Namen content verwendet. Das PHP Skript getData.php stellt die Daten zur Verfügung, entweder sind die Informationen im PHP-Skript vorhanden oder werden optional aus einer Datenbank gelesen, dort gibt es keine Grenzen. Als nächsten benötigen Sie das PHP-Skript. Um das Beispiel möglichst einfach zu halten wird hier eine einfache switch case Anweisung verwendet in der die GET Variable id geprüft wird und je nach Wert ein anderer Content angezeigt wird.

Das Ganze können Sie hier schon in Echtzeit sehen. DEMO ANSEHEN
Download jQuery Ajax Loader