Bildergalerien werden immer beliebter und sind auf fast jeder Webseite zu sehen. Besonders durch jQuery und verschiedenen kostenlosen jQuery Bildergarie-Plugins ist die Verwendung bzw. Einbindung immer einfacher geworden. Im folgenden Artikel möchte ich mal die meiner Meinung nach besten jQuery Bildergalerie Plugins auflisten.
Der Klassiker unter den jQuery Bildergalerien ist die jQuery Lightbox.
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.
Weiterlesen »
Mit jQuery können wie Sie sicherlich wissen einige nette Effekte umgesetzt werden. Im folgenden Artikel erfahren Sie wie Sie Objekte wie beispielsweise einen div-Container in rot via Knopfdruck runtersliden lassen können. Dieses könnte man sich in der Praxis beispielsweise bei der Navigation vorstellen. Zu Anfang benötigen Sie das jQuery Framework inklusive einem HTMl Grundgerüst mit einem Verweis auf das jQuery Framework.
Weiterlesen »
Im letzen Artikel wurde beschrieben wie Objekte wie beispielweise ein div-Container mit draggable bewegt bzw. verschoben werden können. Mit der Funktion droppable kann darauf reagiert werden und ein bestimmtes Ereignis ausgelößt werden wenn ein Objekt in ein anderes verschoben oder auch abgelegt wird. Hierzu wird das jQuery und jQuery UI Framework benötigt. Zu Anfang muss ein Objekt erstellt werden das bewegt werden kann. Dieses geht wie im Draggable Tutorial beschrieben über die Funktion draggable();. Anschließend muss ein Objekt festgelegt werden das beim Drag In bzw. beim Ablegen des Objekt ein Event auswirft, dieses geht über die Funktion droppable() bzw. drop: function().
<script type="text/javascript"> $(document).ready(function(){ $("#dragMe").draggable(); $("#dropArea").droppable({ drop: function() { alert('Droppable'); } }); }); </script>
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>jQuery UI - Droppable</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.droppable.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#dragMe").draggable();
$("#dropArea").droppable({
drop: function() {
alert('Droppable');
}
});
});
</script>
<style>
#dragMe {
float: left;
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #000000;
text-align: center;
}
#dropArea {
float: right;
width: 200px;
height: 200px;
background-color: grey;
border: 1px solid #000000;
}
</style>
</head>
<body>
<div id="dragMe">
<b>Drag me</b>
</div>
<div id="dropArea">
</div>
</body>
</html>Früher unvorstellbar jetzt mit wenigen Schritten möglich, Drag and Drop im Browser ist heutzutage durch die großen Javascript Frameworks für jeden Zugänglich und verwenbar. Drag and Drop wird besonders bei Online Anwendungen verwendet und das auch mit gutem Grund. Online Anwendungen ähneln immer mehr den heutigen Desktop Anwendungen. Für dieses Beispiel wird das jQuery und jQuery UI Framework gebraucht.
In diesem Beispiel wird ein div-Container mit der Größe 200×200 verwendet. Dieser div-Container soll verschiebbar sein. dazu muss folgender Code in Ihr HTML Datei eingefügt werden. Mit der Funktion draggable(); können Sie einen Container oder ein anderes Objekt als “verschiebbar” deklarieren.
$(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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>jQuery UI - Draggable</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#dragMe").draggable();
});
</script>
<style>
#dragMe {
width: 200px;
height: 200px;
background-color: red;
border: 1px solid #000000;
text-align: center;
}
</style>
</head>
<body>
<div id="dragMe">
<b>Drag me</b>
</div>
</body>
</html>Mit der Show und Hide funktion können Sie bequem div-Container auf Knopfdruck Ein- und Ausblenden. Dieses ist besonders nützlich bei unübersichtlichen Seiten um die wichtigen Informationen wie der Maincontent von unwichtigen Informationen oder Funktionen wie Login zu trennen.
Weiterlesen »
Auf vielen Webseiten auf der viele Informationen geladen werden müssen hat man häufig das Problem die Informationen möglichst übersichtlich und schnell auf eine Seite zu bekommen. Dieses ist meist auch mit einem Refresh der kompletten Seite verbunden. Das JavaScript Framework jQuery bietet hierfür einige nette Ajax Funktionen mit denen die Daten einfach nachgeladen und ohne Refresh in die Seite eingefügt werden können, hier spricht man häufig von dynamic Content bzw. dynamischen Content der via Ajax Loader nachgeladen wird.
Weiterlesen »
