script.aculo.us - Kurzanleitung
Was ist script.aculo.us?
script.aculo.us ist eine JavaScript-Bibliothek, die auf dem Prototype JavaScript Framework aufbaut , die GUI verbessert und den Webbenutzern Web 2.0-Erfahrung bietet.
script.aculo.us wurde von Thomas Fuchs entwickelt und erstmals im Juni 2005 veröffentlicht.
script.aculo.us bietet dynamische visuelle Effekte und Elemente der Benutzeroberfläche über das Document Object Model (DOM).
Das Prototype JavaScript Framework ist ein von Sam Stephenson erstelltes JavaScript-Framework, das ein Ajax-Framework und andere Dienstprogramme bereitstellt.
Wie installiere ich script.aculo.us?
Es ist ganz einfach, die Bibliothek script.aculo.us zu installieren. Es kann in drei einfachen Schritten eingerichtet werden -
Gehen Sie zur Download-Seite , um die neueste Version in einem praktischen Paket herunterzuladen.
Entpacken Sie das heruntergeladene Paket und Sie finden die folgenden Ordner -
lib - enthält die Datei prototype.js.
src - enthält die folgenden 8 Dateien -
- builder.js
- controls.js
- dragdrop.js
- effects.js
- scriptaculous.js
- slider.js
- sound.js
- unittest.js
test - enthält Dateien zu Testzwecken.
CHANGELOG - Datei, die den Verlauf aller Änderungen enthält.
MIT-LICENSE - Datei mit Beschreibung der Lizenzbedingungen.
README - Datei, die das Installationspaket einschließlich der Installationsanweisungen beschreibt.
Legen Sie nun die folgenden Dateien in einem Verzeichnis Ihrer Website ab, z. B. / javascript.
- builder.js
- controls.js
- dragdrop.js
- effects.js
- scriptaculous.js
- slider.js
- prototype.js
NOTE - Die Dateien sound.js und unittest.js sind optional
Wie verwende ich die script.aculo.us Bibliothek?
Jetzt können Sie das Skript script.aculo.us wie folgt einfügen :
<html>
<head>
<title>script.aculo.us examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script >
</head>
<body>
........
</body>
</html>Standardmäßig lädt scriptaculous.js alle anderen JavaScript-Dateien, die für Effekte, Drag & Drop, Schieberegler und alle anderen Funktionen von script.aculo.us erforderlich sind.
Wenn Sie nicht alle Funktionen benötigen, können Sie die zusätzlichen Skripte, die geladen werden, einschränken, indem Sie sie in einer durch Kommas getrennten Liste angeben, z.
<html>
<head>
<title>script.aculo.us examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
</head>
<body>
........
</body>
</html>Die Skripte, die angegeben werden können, sind -
- effects
- dragdrop
- builder
- controls
- slider
NOTE - Bei einigen Skripten müssen andere geladen werden, damit sie ordnungsgemäß funktionieren.
Wie rufe ich eine script.aculo.us-Bibliotheksfunktion auf?
Verwenden Sie zum Aufrufen einer bibliotheksfunktion script.aculo.us HTML-Skript-Tags wie unten gezeigt -
<html>
<head>
<title>script.aculo.us examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
<script type = "text/javascript" language = "javascript">
// <![CDATA[
function action(element){
new Effect.Highlight(element,
{ startcolor: "#ff0000", endcolor: "#0000ff", restorecolor: "#00ff00", duration: 8 });
}
// ]]>
</script>
</head>
<body>
<div id = "id" onclick = "action(this);">
Click on this and see how it change its color.
</div>
</body>
</html>Hier verwenden wir das Effektmodul und wenden den Hervorhebungseffekt auf ein Element an.
Dies führt zu folgendem Ergebnis:
Eine andere einfache Möglichkeit, die Funktion eines Moduls aufzurufen, besteht in den Ereignishandlern wie folgt:
<html>
<head>
<title>script.aculo.us examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
</head>
<body>
<div onclick = "new Effect.BlindUp(this, {duration: 5})">
Click here if you want this to go slooooow.
</div>
</body>
</html>Dies führt zu folgendem Ergebnis:
script.aculo.us ist in Module mit jeweils einer eigenen JavaScript-Datei unterteilt. Diese Module werden hier erklärt -
Auswirkungen
Das Effektmodul verfügt über mehr als 25 visuelle Effekte und sieben Übergangsmodi.
Drag & Drop
Mit dem Drag & Drop-Modul können Sie jedes Element ziehbar machen , es in eine Drop-Zone verwandeln oder sogar eine ganze Reihe von Elementen sortieren, sodass Sie sie durch Ziehen und Ablegen neu anordnen können.
Schieberegler
Ein Schieberegler ist eine Art kleine Schiene oder Schiene, entlang der Sie einen Griff schieben können. Es wird in einen numerischen Wert übersetzt. Mit script.aculo.us können Sie solche Schieberegler mit viel Kontrolle erstellen.
Autovervollständigung
Autocompleter-Steuerelemente ermöglichen Google-Suggest-Stil, lokale und servergesteuerte automatische Vervollständigung von Texteingabefeldern.
In-Place-Bearbeitung
Sie können jeden Text oder jede Sammlung von Elementen direkt bearbeiten, indem Sie einfach darauf klicken.
Baumeister
Ein Helfer zum Erstellen von DOM-Fragmenten in JavaScript. Dies ist ein Entwicklertool, das die DOM-Erstellung erheblich vereinfacht.
Klang
In Version 1.7.1 wurde ein Soundsystem eingeführt, mit dem Sie Sounds einfach abspielen, in die Warteschlange stellen, mehrere Tracks verwenden usw. können.
Die script.aculo.us-Effekte sind in zwei Gruppen unterteilt:
Kerneffekte
Die folgenden sechs Kerneffekte bilden die Grundlage für die JavaScript-Bibliothek script.aculo.us Visual Effects.
Effect.Opacity
Effect.Scale
Effect.Morph
Effect.Move
Effect.Highlight
Effect.Parallel
Alle Kerneffekte unterstützen verschiedene allgemeine Parameter sowie effektspezifische Parameter. Bei diesen Effektnamen wird zwischen Groß- und Kleinschreibung unterschieden.
In diesem Tutorial wurden alle effektspezifischen allgemeinen Parameter sowie die Effekte erläutert.
Kombinationseffekte
Alle Kombinationseffekte basieren auf den fünf Kerneffekten und dienen als Beispiele, mit denen Sie Ihre eigenen Effekte schreiben können.
Normalerweise beruhen diese Effekte auf der parallelen, synchronisierten Ausführung anderer Effekte. Eine solche Ausführung ist leicht verfügbar, daher ist es sehr einfach, eigene kombinierte Effekte zu erstellen. Hier ist eine Liste der Kombinationseffekte -
Effect.Appear
Effect.Fade
Effect.Puff
Effect.DropOut
Effect.Shake
Effect.SwitchOff
Effect.BlindDown
Effect.BlindUp
Effect.SlideDown
Effect.SlideUp
Effect.Pulsate
Effect.Squish
Effect.Fold
Effect.Grow
Effect.Shrink
Zusätzlich gibt es die Effect.toggle Dienstprogrammmethode für Elemente, die vorübergehend mit einer Appear / Fade-, Slide- oder Blind-Animation angezeigt werden sollen.
Effect.toggle
Für Effekte erforderliche Bibliotheksdateien
Um die Effektfunktionen von script.aculo.us nutzen zu können, müssen Sie das Effektmodul laden. Ihre Mindestbelastung für script.aculo.us sieht also folgendermaßen aus:
<html>
<head>
<title>script.aculo.us effects</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/"effects.j"></script>
</head>
<body>
...
</body>
</html>Effekteffekte aufrufen
Der richtige Weg, um einen Kerneffekt zu starten, ist normalerweise mit dem newOperator. Abhängig von Ihren Vorlieben können Sie eine von zwei Syntaxen verwenden -
Syntax
new Effect.EffectName(element [, requiredArgs ] [ , options ] )
OR
element.visualEffect('EffectName' [, requiredArgs ] [,options])Diese beiden Syntaxen sind technisch gleichwertig. Bei der Wahl zwischen beiden geht es hauptsächlich um Ihren persönlichen Sinn für Code-Ästhetik.
Beispiel
Hier sind zwei äquivalente Aufrufe, damit Sie sehen können, wie die Syntaxen zusammenhängen, die sehr austauschbar sind -
new Effect.Scale('title', 200, { scaleY: false, scaleContent: false });
OR
$('title' ).visualEffect('Scale', 200, { scaleY:false, scaleContent:false });Die beliebteste Funktion der Web 2.0-Oberfläche ist die Drag & Drop-Funktion. Glücklicherweise verfügt script.aculo.us über eine inhärente Funktion zur Unterstützung von Drag & Drop.
Um die Drag-Funktionen von script.aculo.us nutzen zu können, müssen Sie die laden dragdrop Modul, das auch die benötigt effectsModul. Ihre Mindestbelastung für script.aculo.us sieht also folgendermaßen aus:
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>Dinge herumschleppen
Es ist sehr einfach, ein Element mit script.aculo.us ziehbar zu machen. Dazu muss eine Instanz der Draggable- Klasse erstellt und das Element identifiziert werden, das ziehbar gemacht werden soll.
Draggable Syntax
new Draggable( element, options );Der erste Parameter für den Konstruktor identifiziert das Element, das entweder als ID des Elements oder als Verweis auf das Element ziehbar gemacht werden soll. Der zweite Parameter gibt optionale Informationen zum Verhalten des ziehbaren Elements an.
Ziehbare Optionen
Sie können eine oder mehrere der folgenden Optionen verwenden, während Sie Ihr ziehbares Objekt erstellen.
| Möglichkeit | Beschreibung | Beispiele |
|---|---|---|
| zurückkehren | Wenn true festgelegt ist , kehrt das Element am Ende des Ziehens an seine ursprüngliche Position zurück. Gibt auch an, ob der Rückruf für den Rückwirkungseffekt aufgerufen wird, wenn der Ziehvorgang beendet wird. Der Standardwert ist false . | Beispiel |
| einrasten | Wird verwendet, um zu bewirken, dass ein Draggable an einem Raster einrastet oder seine Bewegung einschränkt. Wenn false (Standard), tritt kein Einrasten oder Einschränken auf.
|
Beispiel |
| Zindex | Gibt den CSS-Z-Index an, der während eines Ziehvorgangs auf das Element angewendet werden soll. Standardmäßig ist der Z-Index des Elements beim Ziehen auf 1000 eingestellt. | Beispiel |
| Geisterbilder | Boolescher Wert, der bestimmt, ob das Draggable zum Ziehen geklont werden soll, wobei das Original an Ort und Stelle bleibt, bis der Klon gelöscht wird. Der Standardwert ist false . | Beispiel |
| Zwang | Eine Zeichenfolge, mit der die ziehbaren Richtungen entweder horizontal oder vertikal begrenzt werden . Der Standardwert ist null, was freie Bewegung bedeutet. | Beispiel |
| Griff | Gibt ein Element an, das als Handle zum Starten des Ziehvorgangs verwendet werden soll. Standardmäßig ist ein Element ein eigenes Handle. | Beispiel |
| Starteffekt | Ein Effekt, der beim Ziehen auf das Element aufgerufen wird. Standardmäßig wird die Deckkraft des Elements in 0,2 Sekunden auf 0,2 geändert. | Beispiel |
| Reverteffekt | Ein Effekt, der auf das Element aufgerufen wird, wenn das Ziehen zurückgesetzt wird. Standardmäßig wird eine glatte Folie an die ursprüngliche Position des Elements verschoben . Wird nur aufgerufen, wenn das Zurücksetzen wahr ist. | Beispiel |
| Endeffekt | Ein Effekt, der beim Ziehen auf das Element aufgerufen wird. Standardmäßig wird die Deckkraft des Elements in 0,2 Sekunden auf 1,0 geändert. | Beispiel |
Rückrufoptionen
Darüber hinaus können Sie im Optionsparameter eine der folgenden Rückruffunktionen verwenden:
| Funktion | Beschreibung | Beispiele |
|---|---|---|
| am Start | Wird aufgerufen, wenn ein Ziehen eingeleitet wird. | Beispiel |
| onDrag | Wird wiederholt aufgerufen, wenn sich eine Maus bewegt, wenn sich die Mausposition gegenüber dem vorherigen Anruf ändert. | Beispiel |
| Veränderung | Wird genauso wie onDrag aufgerufen (dies ist der bevorzugte Rückruf). | Beispiel |
| am Ende | Wird aufgerufen, wenn ein Drag beendet wird. | Beispiel |
Mit Ausnahme des Rückrufs "Ändern" akzeptiert jeder dieser Rückrufe zwei Parameter: das Draggable-Objekt und das Mausereignisobjekt.
Beispiel zum Ziehen
Hier definieren wir 5 Elemente, die ziehbar gemacht werden: drei <div> -Elemente, ein <img> -Element und ein <span> -Element. Der Zweck der drei verschiedenen <div> -Elemente besteht darin, zu demonstrieren, dass das Ziehverhalten unabhängig davon, ob ein Element mit einer Positionierungsregel von statisch (Standardeinstellung), relativ oder absolut beginnt, nicht beeinflusst wird.
<html>
<head>
<title>Draggables Elements</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
// Take all the elements whatever you want to make Draggable.
var elements = ['normaldiv', 'relativediv', 'absolutediv', 'image', 'span'];
// Make all the items drag able by creating Draggable objects
window.onload = function() {
elements.each(function(item) { new Draggable(item, {});});
}
</script>
</head>
<body>
<div id = "normaldiv">
This is a normal div and this is dragable.
</div>
<div id = "relativediv" style="position: relative;">
This is a relative div and this is dragable.
</div>
<div id = "absolutediv" style="position: absolute;">
This is an absolute div and this dragable.
</div>
<br />
<img id = "image" src = "/images/scriptaculous.gif"/>
<p>Let part <span id = "span" style = "color: blue;">
This is middle part</span> Yes, only middle part is dragable.</p>
</body>
</html>Dies führt zu folgendem Ergebnis:
Ziehen von gezogenen Dingen
Ein Element wird über einen Aufruf der add () -Methode in einem Namespace namens Droppables in ein Drop-Ziel konvertiert .
Der Droppables-Namespace verfügt über zwei wichtige Methoden: add () zum Erstellen eines Drop-Ziels und remove () zum Entfernen eines Drop-Ziels.
Syntax
Hier ist die Syntax der add () -Methode zum Erstellen eines Drop-Ziels. Die add () -Methode erstellt aus dem als ersten Parameter übergebenen Element ein Drop-Ziel, wobei die Optionen im als zweiter übergebenen Hash verwendet werden.
Droppables.add( element, options );Die Syntax für remove () ist noch einfacher. Die remove () -Methode entfernt das Drop-Target-Verhalten aus dem übergebenen Element.
Droppables.remove(element);Optionen
Sie können eine oder mehrere der folgenden Optionen verwenden, während Sie Ihr ziehbares Objekt erstellen.
| Möglichkeit | Beschreibung | Beispiele |
|---|---|---|
| Schwebeklasse | Der Name einer CSS-Klasse, die dem Element hinzugefügt wird, während das Droppable aktiv ist (über dem sich ein akzeptables Draggable befindet). Der Standardwert ist null. | Beispiel |
| Akzeptieren | Eine Zeichenfolge oder ein Array von Zeichenfolgen, die CSS-Klassen beschreiben. Das Droppable akzeptiert nur Draggables, die eine oder mehrere dieser CSS-Klassen haben. | Beispiel |
| Eindämmung | Gibt ein Element oder ein Array von Elementen an, das ein übergeordnetes Element eines ziehbaren Elements sein muss, damit es vom Ablageziel akzeptiert wird. Standardmäßig werden keine Containment-Einschränkungen angewendet. | Beispiel |
| Überlappung | Bei Einstellung auf "horizontal" oder "vertikal" reagiert das Droppable nur dann auf ein Draggable, wenn es sich in der angegebenen Richtung um mehr als 50% überlappt. Wird von Sortables verwendet, wird im nächsten Kapitel erläutert. | |
| gierig | Wenn true (Standardeinstellung), werden keine schwebenden Dateien mehr angezeigt. Unter der Drag-Datei wird nicht gesucht. | Beispiel |
Rückrufoptionen
Darüber hinaus können Sie im Optionsparameter eine der folgenden Rückruffunktionen verwenden:
| Funktion | Beschreibung | Beispiele |
|---|---|---|
| onHover | Gibt eine Rückruffunktion an, die aktiviert wird, wenn ein geeignetes ziehbares Element über dem Ablageziel schwebt. Wird von Sortables verwendet, wird im nächsten Kapitel erläutert. | |
| onDrop | Gibt eine Rückruffunktion an, die aufgerufen wird, wenn ein geeignetes ziehbares Element auf das Ablageziel gelegt wird. | Beispiel |
Beispiel
Hier ähnelt der erste Teil dieses Beispiels unserem vorherigen Beispiel, außer dass wir die praktische Funktion $ A () von Prototype verwendet haben, um eine Knotenliste aller <img> -Elemente im Element mit der ID von Draggables in ein Array zu konvertieren .
<html>
<head>
<title>Drag and Drop Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
// Make all the images draggables from draggables division.
$A($('draggables').getElementsByTagName('img')).each(function(item) {
new Draggable(item, {revert: true, ghosting: true});
});
Droppables.add('droparea', {hoverclass: 'hoverActive', onDrop: moveItem});
// Set drop area by default non cleared.
$('droparea').cleared = false;
}
// The target drop area contains a snippet of instructional
// text that we want to remove when the first item
// is dropped into it.
function moveItem( draggable,droparea){
if (!droparea.cleared) {
droparea.innerHTML = '';
droparea.cleared = true;
}
draggable.parentNode.removeChild(draggable);
droparea.appendChild(draggable);
}
</script>
<style type = "text/css">
#draggables {
width: 172px;
border: 3px ridge blue;
float: left;
padding: 9px;
}
#droparea {
float: left;
margin-left: 16px;
width: 172px;
border: 3px ridge maroon;
text-align: center;
font-size: 24px;
padding: 9px;
float: left;
}
.hoverActive {
background-color: #ffffcc;
}
#draggables img, #droparea img {
margin: 4px;
border:1px solid red;
}
</style>
</head>
<body>
<div id = "draggables">
<img src = "/images/html.gif"/>
<img src = "/images/css.gif"/>
<img src = "/images/xhtml.gif"/>
<img src = "/images/wml_logo.gif"/>
<img src = "/images/javascript.gif"/>
</div>
<div id = "droparea">
Drag and Drop Your Images in this area
</div>
</body>
</html>Dies führt zu folgendem Ergebnis:
Oft müssen Sie dem Benutzer die Möglichkeit geben, Elemente (z. B. Elemente in einer Liste) durch Ziehen neu anzuordnen.
Ohne Drag & Drop kann die Neuordnung ein Albtraum sein, aber script.aculo.us bietet über die Sortable- Klasse sofort erweiterte Unterstützung für die Neuordnung . Das Element, das sortierbar werden soll, wird an die Methode create () im Namespace Sortable übergeben.
Eine Sortierbare Datei besteht aus Elementelementen in einem Containerelement. Wenn Sie eine neue Sortierbarkeit erstellen, werden die entsprechenden Draggables und Droppables erstellt .
Um die sortierbaren Funktionen von script.aculo.us nutzen zu können, müssen Sie die laden dragdrop Modul, das auch die benötigt effectsModul. Ihre Mindestbelastung für script.aculo.us sieht also folgendermaßen aus:
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>Sortierbare Syntax
Hier ist die Syntax der Methode create () zum Erstellen eines sortierbaren Elements. Die create () -Methode nimmt die ID eines Containerelements und sortiert sie basierend auf den übergebenen Optionen.
Sortable.create('id_of_container',[options]);Verwenden Sie Sortable.destroy , um alle Ereignishandler und Verweise auf eine von Sortable.create erstellte Sortable vollständig zu entfernen.
NOTE- Ein Aufruf von Sortable.create ruft implizit Sortable.destroy auf, wenn das referenzierte Element bereits ein Sortable war. Hier ist die einfache Syntax zum Aufrufen der Zerstörungsfunktion.
Sortable.destroy( element );Sortierbare Optionen
Sie können eine oder mehrere der folgenden Optionen verwenden, während Sie Ihr sortierbares Objekt erstellen.
| Sr.Nr. | Option & Beschreibung |
|---|---|
| 1 | tag Gibt den Typ der Elemente im sortierbaren Container an, die per Drag & Drop sortiert werden sollen. Der Standardwert ist 'li'. |
| 2 | only Gibt einen CSS-Klassennamen oder ein Array von Klassennamen an, die ein ziehbares Element besitzen muss, um vom Ablageziel akzeptiert zu werden. Dies ähnelt der Akzeptanzoption von Draggable. Standardmäßig werden keine Einschränkungen für Klassennamen angewendet. |
| 3 | overlap Eine von falsch, horizontal oder vertikal . Steuert den Punkt, an dem eine Neuordnung ausgelöst wird. Der Standardwert ist vertikal . |
| 4 | constraint Eine von falsch, horizontal oder vertikal . Beschränkt die Bewegung von gezogenen sortierbaren Elementen. Der Standardwert ist vertikal . |
| 5 | containment Ermöglicht das Ziehen und Ablegen zwischen Sortierelementen. Nimmt ein Array von Elementen oder Element-IDs auf. Wichtiger Hinweis: Um sicherzustellen, dass das Ziehen in beide Richtungen zwischen Containern möglich ist, platzieren Sie alle Sortable.create-Aufrufe nach den Containerelementen. |
| 6 | handle Entspricht der gleichnamigen Draggable-Option, die ein Element angibt, das zum Initiieren von Drag-Vorgängen verwendet werden soll. Standardmäßig ist jedes Element ein eigenes Handle. |
| 7 | hoverclass Gibt einen CSS-Klassennamen an, der auf nicht gezogene sortierbare Elemente angewendet werden soll, wenn ein gezogenes Element über sie hinweggeht. Standardmäßig wird kein CSS-Klassenname angewendet. |
| 8 | ghosting Ähnlich wie bei der gleichnamigen Option "Draggable" bewirkt diese Option, dass das ursprüngliche Element einer Ziehoperation an Ort und Stelle bleibt, während eine halbtransparente Kopie des Elements zusammen mit dem Mauszeiger verschoben wird. Der Standardwert ist false . Diese Option funktioniert nicht mit IE. |
| 9 | dropOnEmpty Wenn true, können sortierbare Elemente in eine leere Liste eingefügt werden. Der Standardwert ist false . |
| 10 | scroll Wenn der sortierbare Container aufgrund der Einstellung des CSS-Überlaufattributs über eine Bildlaufleiste verfügt, ermöglicht diese Option das automatische Scrollen der Liste über die sichtbaren Elemente hinaus. Der Standardwert ist false . |
| 12 | scrollSensitivity Wenn das Scrollen aktiviert ist, wird der Punkt angepasst, an dem das Scrollen ausgelöst wird. Der Standardwert ist 20. |
| 13 | scrollSpeed Wenn das Scrollen aktiviert ist, wird die Bildlaufgeschwindigkeit angepasst. Der Standardwert ist 15. |
| 14 | tree Wenn true, wird das Sortieren mit Unterelementen innerhalb des sortierbaren Elements aktiviert. Der Standardwert ist false. |
| 15 | treeTag Wenn die Baumoption aktiviert ist, gibt sie den Containerelementtyp des Unterelements an, dessen untergeordnete Elemente am sortierbaren Verhalten beteiligt sind. Der Standardwert ist 'ul'. |
Im Parameter options können Sie folgende Rückrufe bereitstellen:
| Sr.Nr. | Option & Beschreibung |
|---|---|
| 1 | onChange Eine Funktion, die aufgerufen wird, wenn sich die Sortierreihenfolge beim Ziehen ändert. Beim Ziehen von einer Sortierbarkeit zur anderen wird der Rückruf bei jeder Sortierbarkeit einmal aufgerufen. Ruft das betroffene Element als Parameter ab. |
| 2 | onUpdate Eine Funktion, die beim Beenden einer Ziehoperation aufgerufen wird, die zu einer Änderung der Elementreihenfolge führt. |
Sortierbeispiele
Es wurde überprüft, ob diese Demo in IE 6.0 funktioniert. Es funktioniert auch in der neuesten Version von Firefox.
<html>
<head>
<title>Sorting Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
Sortable.create('namelist',{tag:'li'});
}
</script>
<style type = "text/css">
li { cursor: move; }
</style>
</head>
<body>
<p>Drag and drop list items to sort them out</p>
<ul id = "namelist">
<li>Physics</li>
<li>Chemistry</li>
<li>Maths</li>
<li>Botany</li>
<li>Sociology</li>
<li>English</li>
<li>Hindi</li>
<li>Sanskrit</li>
</ul>
</body>
</html>Verwenden Sie unseren Online-Compiler, um den Code mit den verschiedenen in der obigen Tabelle beschriebenen Optionen besser zu verstehen.
Dies führt zu folgendem Ergebnis:
Beachten Sie die Verwendung des Tags: 'li' . Ebenso können Sie die folgende Liste der in <div> verfügbaren Bilder sortieren -
<html>
<head>
<title>Sorting Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
Sortable.create('imagelist',{tag:'div'});
}
</script>
<style type = "text/css">
div { cursor: move; }
img { border: 1px solid red; margin:5px; }
</style>
</head>
<body>
<p>Drag and drop list images to re-arrange them</p>
<div id = "imagelist">
<div><img src = "/images/wml_logo.gif" alt="WML Logo" /></div>
<div><img src = "/images/javascript.gif" alt="JS" /></div>
<div><img src = "/images/html.gif" alt="HTML" /></div>
<div><img src = "/images/css.gif" alt="CSS" /></div>
</div>
</body>
</html>Dies führt zu folgendem Ergebnis:
Serialisierung der sortierbaren Elemente
Das Sortable-Objekt bietet auch eine Funktion Sortable.serialize (), um die Sortable in einem Format zu serialisieren, das für HTTP-GET- oder POST-Anforderungen geeignet ist. Dies kann verwendet werden, um die Reihenfolge der Sortierbaren über einen Ajax-Aufruf zu senden.
Syntax
Sortable.serialize(element, options);Optionen
Sie können eine oder mehrere der folgenden Optionen verwenden, während Sie Ihr sortierbares Objekt erstellen.
| Sr.Nr. | Option & Beschreibung |
|---|---|
| 1 | tag Legt die Art des Tags fest, das serialisiert wird. Dies ähnelt dem, was in Sortable.create verwendet wird . |
| 2 | name Legt den Namen des Schlüssels fest, der zum Erstellen der Schlüssel / Wert-Paare für die Serialisierung im HTTP-GET / POST-Format verwendet wird. Wenn der Name also xyz wäre, würde die Abfragezeichenfolge wie folgt aussehen: xyz [] = Wert1 & xyz [] = Wert2 & xyz [] = Wert3 Wobei die Werte von den untergeordneten Elementen in der Reihenfolge abgeleitet werden, in der sie im Container angezeigt werden. |
Beispiele serialisieren
In diesem Beispiel gibt die Ausgabe der Serialisierung nur die Zahlen nach dem Unterstrich in den Listenelement-IDs an.
Um dies zu versuchen, lassen Sie die Listen in ihrer ursprünglichen Reihenfolge und drücken Sie die Taste, um die Serialisierung der Listen anzuzeigen. Ordnen Sie nun einige Elemente neu an und klicken Sie erneut auf die Schaltfläche.
<html>
<head>
<title>Sorting Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
Sortable.create('namelist',{tag:'li'});
}
function serialize(container, name){
$('display').innerHTML = 'Serialization of ' +
$(container).id +
' is: <br/><pre>' +
Sortable.serialize( container,{ name:name} ) +
'</pre>';
}
</script>
<style type = "text/css">
li { cursor: move; }
</style>
</head>
<body>
<p>Drag and drop list items to sort them out properly</p>
<ul id = "namelist">
<li id = "list1_1">Physics</li>
<li id = "list1_2">Chemistry</li>
<li id = "list1_3">Maths</li>
<li id = "list1_4">Botany</li>
<li id = "list1_5">Sociology</li>
<li id = "list1_6">English</li>
</ul>
<p>Click following button to see serialized list which can be
passed to backend script, like PHP, AJAX or CGI</p>
<button type = "button" value = "Click Me"
onclick = "serialize('namelist', 'list')"> Serialize
</button>
<div id = "display" style = "clear:both;padding-top:32px"></div>
</body>
</html>Dies führt zu folgendem Ergebnis:
Elemente zwischen Sortierelementen verschieben
Das folgende Beispiel zeigt, wie Elemente von einer Liste in eine andere Liste verschoben werden.
<html>
<head>
<title>Sorting Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
Sortable.create('List1', {containment: ['List1','List2'], dropOnEmpty: true});
Sortable.create('List2', {containment: ['List1','List2'], dropOnEmpty: true});
}
</script>
<style type = "text/css">
li { cursor: move; }
ul {
width: 88px;
border: 1px solid blue;
padding: 3px 3px 3px 20px;
}
</style>
</head>
<body>
<p>Drag and drop list items from one list to another list</p>
<div style = "float:left">
<ul id = "List1">
<li>Physics</li>
<li>Chemistry</li>
<li>Botany</li>
</ul>
</div>
<div style = "float:left;margin-left:32px">
<ul id = "List2">
<li>Arts</li>
<li>Politics</li>
<li>Economics</li>
<li>History</li>
<li>Sociology</li>
</ul>
</div>
</body>
</html>Beachten Sie, dass die Containment- Option für jeden Container beide Container als Containment-Elemente auflistet. Auf diese Weise haben wir ermöglicht, dass die untergeordneten Elemente im Kontext ihres übergeordneten Elements sortiert werden. Außerdem können sie zwischen den beiden Containern verschoben werden.
Wir setzen dropOnEmpty für beide Listen auf true. Um zu sehen, welche Auswirkungen diese Option auf diese Liste hat, verschieben Sie alle Elemente von einer Liste in eine andere, sodass eine Liste leer ist. Sie werden feststellen, dass es erlaubt ist, Elemente auf eine leere Liste zu setzen.
Dies führt zu folgendem Ergebnis:
Bindung an Ajax
Natürlich ist onUpdate ein Hauptkandidat für das Auslösen von Ajax-Benachrichtigungen an den Server, beispielsweise wenn der Benutzer eine Aufgabenliste oder einen anderen Datensatz neu anordnet. Die Kombination Ajax.Request und Sortable.serialize macht Live - Persistenz einfach genug -
<html>
<head>
<title>Sorting Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
Sortable.create('List' ,
{
onUpdate: function() {
new Ajax.Request('file.php',
{
method: "post",
parameters: {data:Sortable.serialize('List')}
}
);
}
}
);
}
</script>
<style type = "text/css">
li { cursor: move; }
ul {
width: 88px;
border: 1px solid blue;
padding: 3px 3px 3px 20px;
}
</style>
</head>
<body>
<p>When you will change the order, AJAX Request
will be made automatically.</p>
<div style = "float:left">
<ul id = "List">
<li id = "List_1">Physics</li>
<li id = "List_2">Chemistry</li>
<li id = "List_3">Maths</li>
<li id = "List_4">Botany</li>
</ul>
</div>
</body>
</html>Sortable.serialize erstellt eine Zeichenfolge wie: List [] = 1 & List [] = 2 & List [] = 3 & List [] = 4, wobei die Zahlen die Bezeichner der Listenelement-IDs nach dem Unterstrich sind.
Jetzt müssen wir file.php codieren , wodurch die veröffentlichten Daten als parse_str ($ _ POST ['data']) analysiert werden . Mit diesen sortierten Daten können Sie alles tun, was Sie wollen.
Um mehr über AJAX zu erfahren, lesen Sie bitte unser einfaches Ajax-Tutorial .
Schieberegler sind dünne Spuren mit einem oder mehreren Ziehpunkten, die der Benutzer entlang der Spur ziehen kann.
Das Ziel eines Schiebereglers besteht darin, eine alternative Eingabemethode zum Definieren eines numerischen Werts bereitzustellen. Der Schieberegler stellt einen Bereich dar. Wenn Sie einen Griff entlang der Spur verschieben, wird ein Wert innerhalb dieses Bereichs definiert.
Schieberegler können entweder horizontal oder vertikal ausgerichtet sein. In horizontaler Richtung stellt das linke Ende der Spur normalerweise den niedrigsten Wert dar, während in vertikaler Ausrichtung der untere Rand der Folie normalerweise den niedrigsten Wert darstellt.
Um die Slider-Funktionen von script.aculo.us nutzen zu können, müssen Sie das Modul slider.js zusammen mit dem Modul prototype.js laden. Ihre Mindestbelastung für script.aculo.us sieht also folgendermaßen aus:
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load=slider">< /script>Erstellen eines Schiebereglers
Beim Erstellen eines Schiebereglers müssen Sie wie gewohnt ein benutzerdefiniertes Objekt über einige vorhandene Elemente im DOM Ihrer Seite erstellen. Sie benötigen hier zwei Elemente, eines für den Griff und eines für die Spur wie folgt:
new Control.Slider(handle, track [ , options ] );Das Track-Element ist normalerweise ein <div> und das Handle-Element ist ein <div> oder <span> innerhalb des Track-Elements. Beide können wie gewohnt entweder über ihre ID = oder über direkte DOM-Referenzen übergeben werden.
Schieberegler-Optionen
Sie können beim Erstellen Ihres Slider-Objekts eine oder mehrere der folgenden Optionen verwenden.
| Sr.Nr. | Option & Beschreibung |
|---|---|
| 1 | Axis Definiert die Ausrichtung des Steuerelements als horizontal oder vertikal . Die Standardausrichtung ist horizontal . |
| 2 | Range Definiert den Bereich der Schiebereglerwerte als Instanz einer Prototype ObjectRange-Instanz. Der Standardwert ist 0 bis 1. |
| 3 | Values Definiert den diskreten Wertesatz, den der Schieberegler erfassen kann. Wenn nicht angegeben, können alle Werte innerhalb des Bereichs eingestellt werden. |
| 4 | sliderValue Legt den Anfangswert des Schiebereglers fest. Wenn nicht angegeben, ist der Wert, der durch die Kante ganz links (oder ganz oben) des Schiebereglers dargestellt wird, der Anfangswert. |
| 5 | Disabled Wenn true, wird eine Folie erstellt, die zunächst deaktiviert ist. Offensichtlich ist der Standardwert false. |
| 6 | setValue Aktualisiert den Wert des Schiebereglers und bewegt den Schiebereglergriff an die entsprechende Position. |
| 7 | setDisabled Versetzt den Schieberegler in den deaktivierten Zustand (deaktiviert = wahr). |
| 8 | setEnabled Versetzt den Schieberegler in den aktivierten Zustand (deaktiviert = falsch). |
Im Parameter options können Sie folgende Rückrufe bereitstellen:
| Sr.Nr. | Option & Beschreibung |
|---|---|
| 1 | onSlide Wird aufgerufen, wenn der Schieberegler durch Ziehen bewegt wird. Die aufgerufene Funktion erhält den Slider-Wert als Parameter. |
| 2 | onChange Wird aufgerufen, wenn sich der Slider nicht mehr bewegt oder sein Wert über die Funktion setSlider Value geändert wurde. Die aufgerufene Funktion erhält den Slider-Wert als Parameter. |
Schieberegler Beispiel
<html>
<head>
<title>Sliders Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = slider" ></script>
<script type = "text/javascript">
window.onload = function() {
new Control.Slider('handle1' , 'track1',{
range: $R(1,100), values: [1,25,50,75,100], sliderValue: 1, onChange: function(v){ $('changed').innerHTML = 'Changed Value : '+v;
},
onSlide: function(v) {
$('sliding').innerHTML = 'Sliding Value: '+v; } }); new Control.Slider('handle2' , 'track2', { range: $R(1,100),
axis:'vertical',
sliderValue: 1,
onChange: function(v){
$('changed').innerHTML = 'Changed Value : '+v; } onSlide: function(v) { $('sliding').innerHTML = 'Sliding Value: '+v;
}
});
}
</script>
<style type = "text/css">
h1{ font-size: 1.5em; }
.track {
background-color: #aaa;
position: relative;
height: 0.5em; width: 10em;
cursor: pointer; z-index: 0;
}
.handle {
background-color: red;
position: absolute;
height: 1em; width: 0.25em; top: -0.25em;
cursor: move; z-index: 2;
}
.track.vertical {
width: 0.5em; height: 10em;
}
.track.vertical .handle {
width: 1em; height: 0.25em; top: 0; left: -0.25em;
}
</style>
</head>
<body>
<h1>Simple sliders</h1>
<div id = "track1" class = "track" style = "width: 20em;" >
<div id = "handle1" class = "handle" style = "width: 0.5em;" ></div>
</div>
<p id = "sliding" ></p>
<p id = "changed" ></p>
<div id = "track2" class = "track vertical" style = "position: absolute; left: 25em; top: 3em;" >
<div id = "handle2" class = "handle" style = "height: 0.5em;" ></div>
</div>
</body>
</html>Zu beachtende Punkte -
Sie können das Schiebereglerbild eines beliebigen Schiebereglers mithilfe von CSS ändern. Verwenden Sie die CSS-Eigenschaften background-image: url (track.gif) und background-repeat: no-repeat , um das Schiebereglerbild festzulegen .
Der Bereichswert kann mit angegeben werden $R(minValue, MaxValue). For example, $R (1, 100).
Der Bereichswert kann in Form bestimmter Werte angegeben werden. Zum Beispiel Werte: [1,25,50,75,100]. In diesem Fall würde der Schieberegler nur die diskreten Werte erreichen, die beim Verschieben des Griffs aufgeführt sind.
Der Wert des Schiebereglers kann jederzeit programmgesteuert festgelegt werden, indem die Methode setValue () der Schiebereglerinstanz aufgerufen wird, wie in: sliderInstance.setValue (50);
Dies führt zu folgendem Ergebnis:
Standardmäßig unterstützt script.aculo.us zwei Quellen für die automatische Vervollständigung:
- Remote-Quellen (über Ajax erhältlich),
- Lokale Quellen (String-Arrays in den Skripten Ihrer Webseite).
Abhängig von der Quelle, die Sie verwenden möchten, instanziieren Sie Ajax.Autocompleter bzw. Autocompleter.Local . Obwohl diese beiden Objekte mit bestimmten Optionen ausgestattet sind, verfügen sie über einen großen Funktionsumfang und bieten eine einheitliche Benutzererfahrung.
Es gibt vier Dinge, die Sie beim Erstellen immer an diese Objekte übergeben werden:
Das Textfeld, das Sie automatisch vervollständigen möchten. Wie üblich können Sie das Feld selbst oder den Wert seines Attributs id = übergeben.
Der Container für die Auswahl der automatischen Vervollständigung, der am Ende eine <ul> </ li> -Liste mit Optionen enthält, aus denen Sie auswählen können. Übergeben Sie das Element erneut direkt oder direktid =. Dieses Element ist meistens ein einfaches <div>. </ P> </ li>
Die Datenquelle, die je nach Quelltyp als JavaScript-Array von Zeichenfolgen oder als URL zur Remote-Quelle ausgedrückt wird.
Schließlich die Optionen. Wie immer werden sie als eine Art Hash bereitgestellt, und beide Autovervollständigungsobjekte können ohne benutzerdefinierte Option auskommen. Für alles gibt es passende Standardeinstellungen.
Um die Autocompletion-Funktionen von script.aculo.us nutzen zu können, müssen Sie die Module controls.js und effects.js zusammen mit dem Modul prototype.js laden. Ihre minimale Belastung für script.aculo.us sieht also folgendermaßen aus:
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>Erstellen eines Ajax Auto-Completer
Die Konstruktionssyntax lautet wie folgt:
new Ajax.Autocompleter(element, container, url [ , options ] )Der Konstruktor für den Ajax.Autocompleter akzeptiert vier Parameter -
Der Elementname oder Verweis auf ein Textfeld, das mit einer Datenauswahl gefüllt werden soll.
Der Elementname oder der Verweis auf ein <div> -Element, das vom Steuerelement als Auswahlmenü verwendet werden soll.
Die URL der serverseitigen Ressource, die die Auswahlmöglichkeiten bereitstellt.
Die üblichen Optionen Hash.
Optionen
Sie können eine oder mehrere der folgenden Optionen verwenden, während Sie Ihr Ajax.Autocompleter-Objekt erstellen.
| Sr.Nr. | Option & Beschreibung |
|---|---|
| 1 | paramName Der Name des Abfrageparameters, der den Inhalt des Textfelds enthält, das an die serverseitige Ressource gesendet wird. Der Standardwert ist der Name des Textfelds. |
| 2 | minChars Anzahl der Zeichen, die eingegeben werden müssen, bevor eine serverseitige Auswahlanforderung ausgelöst werden kann. Der Standardwert ist 1. |
| 3 | Frequency Das Intervall in Sekunden zwischen internen Überprüfungen, um festzustellen, ob eine Anforderung an die serverseitige Ressource gesendet werden soll. Der Standardwert ist 0,4. |
| 4 | Indicator Die ID oder der Verweis auf ein Element, das angezeigt werden soll, während eine serverseitige Auswahlanforderung ausgeführt wird. Wenn nicht angegeben, wird kein Element angezeigt. |
| 5 | Parameters Eine Textzeichenfolge mit zusätzlichen Abfrageparametern, die an die serverseitige Ressource übergeben werden sollen. |
| 6 | updateElement Eine Rückruffunktion, die ausgelöst wird, wenn der Benutzer eine der vom Server zurückgegebenen Auswahlmöglichkeiten auswählt, die die interne Funktion ersetzt, die das Textfeld mit dem ausgewählten Wert aktualisiert. |
| 7 | afterUpdateElement Eine Rückruffunktion, die ausgelöst wird, nachdem die Funktion updateElement ausgeführt wurde. |
| 8 | Tokens Eine einzelne Textzeichenfolge oder ein Array von Textzeichenfolgen, die Token angeben, die als Trennzeichen verwendet werden sollen, damit mehrere Elemente in das Textfeld eingegeben werden können, von denen jedes einzeln automatisch ausgefüllt werden kann. |
Beispiel
<html>
<head>
<title>Simple Ajax Auto-completer Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>
<script type = "text/javascript">
window.onload = function() {
new Ajax.Autocompleter(
'autoCompleteTextField',
'autoCompleteMenu',
'/script.aculo.us/serverSideScript.php', {}
);
}
</script>
</head>
<body>
<p>Type something in this box and then select suggested option from the list </p>
<div>
<label>Text field:</label>
<input type = "text" id = "autoCompleteTextField"/>
<div id = "autoCompleteMenu"></div>
</div>
</body>
</html>Jetzt benötigen wir eine Serverseite, um auf diese Seite zuzugreifen und die Datenquellen-URL (serverSideScript.php) bereitzustellen. Sie behalten eine vollständige Logik bei, um Vorschläge in diesem Skript anzuzeigen.
Zum Beispiel behalten wir einen einfachen HTML-Text in serverSideScript.php . Sie können Ihr Skript mit CGI, PHP, Ruby oder einem anderen serverseitigen Skript schreiben, um geeignete Vorschläge auszuwählen und diese in Form von <ul> <ul> <li> </ li> </ ul> zu formatieren und zurückzugeben zum Aufruferprogramm.
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>Dies führt zu folgendem Ergebnis:
mit verschiedenen Optionen in der obigen Tabelle diskutiert.
Erstellen eines lokalen Auto-Completers
Das Erstellen eines lokalen Auto-Completers ist fast identisch mit dem Erstellen eines Ajax-Auto-Completers, wie im vorherigen Abschnitt erläutert.
Der Hauptunterschied besteht darin, wie der für die automatische Vervollständigung zu verwendende Sicherungsdatensatz für die Steuerung identifiziert wird.
Mit einem Ajax Auto-Completer haben wir die URL einer serverseitigen Ressource angegeben, die unter Berücksichtigung der Benutzereingaben die erforderliche Filterung durchführt und nur die übereinstimmenden Datenelemente zurückgibt. Mit einem lokalen Autocompleter stellen wir stattdessen die vollständige Liste der Datenelemente als JavaScript-String-Array bereit, und das Steuerelement selbst führt die Filteroperation innerhalb seines eigenen Client-Codes aus.
Die gesamte Konstruktionssyntax lautet tatsächlich wie folgt:
new Autocompleter.Local(field, container, dataSource [ , options ] );Der Konstruktor für Autocompleter.Local akzeptiert vier Parameter -
Der Elementname oder Verweis auf ein Textfeld, das mit einer Datenauswahl gefüllt werden soll.
Der Elementname oder der Verweis auf ein <div> -Element, das vom Steuerelement als Auswahlmenü verwendet werden soll
Für den dritten Parameter stellen wir anstelle einer URL wie beim serverunterstützten Auto-Completer ein kleines String-Array bereit, das alle möglichen Werte enthält.
Die üblichen Optionen Hash.
Optionen
Sie können eine oder mehrere der folgenden Optionen verwenden, während Sie Ihr Autocompleter.Local-Objekt erstellen.
| Sr.Nr. | Option & Beschreibung |
|---|---|
| 1 | Choices Die Anzahl der anzuzeigenden Auswahlmöglichkeiten. Der Standardwert ist 10. |
| 2 | partialSearch Aktiviert den Abgleich am Anfang von Wörtern, die in die Vervollständigungszeichenfolgen eingebettet sind. Der Standardwert ist true. |
| 3 | fullSearch Ermöglicht den Abgleich an einer beliebigen Stelle innerhalb der Abschlusszeichenfolgen. Der Standardwert ist false. |
| 4 | partialChars Definiert die Anzahl der Zeichen, die eingegeben werden müssen, bevor eine teilweise Übereinstimmung versucht wird. Der Standardwert ist 2. |
| 5 | ignoreCase Ignoriert Groß- und Kleinschreibung beim Abgleich. Der Standardwert ist true. |
Beispiel
<html>
<head>
<title>Simple Ajax Auto-completer Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>
<script type = "text/javascript">
window.onload = function() {
new Autocompleter.Local(
'autoCompleteTextField',
'autoCompleteMenu',
['abcdef','abcdeg','xyzabcefg', 'tybabdefg','acdefg'],
{ignoreCase:false}
);
}
</script>
</head>
<body>
<p>Type something in this box and then select suggested option from the list </p>
<div>
<label>Text field:</label>
<input type = "text" id = "autoCompleteTextField"/>
<div id = "autoCompleteMenu"></div>
</div>
</body>
</html>Bei der Anzeige und nachdem das Zeichen 'a' in das Textfeld eingegeben wurde, werden alle übereinstimmenden Optionen angezeigt.
Verwenden Sie unseren Online-Compiler, um den Code mit den verschiedenen in der obigen Tabelle beschriebenen Optionen besser zu verstehen.
Dies führt zu folgendem Ergebnis:
Die direkte Bearbeitung ist eines der Kennzeichen von Web 2.0.style-Anwendungen.
Bei der direkten Bearbeitung geht es darum, nicht bearbeitbare Inhalte wie <p>, <h1> oder <div> zu übernehmen und den Benutzer die Inhalte durch einfaches Klicken bearbeiten zu lassen.
Dadurch wird das statische Element in eine bearbeitbare Zone (entweder einzeilig oder mehrzeilig) umgewandelt und es werden Schaltflächen zum Senden und Abbrechen (oder Links, abhängig von Ihren Optionen) angezeigt, mit denen der Benutzer die Änderung festschreiben oder rückgängig machen kann.
Anschließend wird die Bearbeitung auf der Serverseite über Ajax synchronisiert und das Element kann nicht mehr bearbeitet werden.
Um die direkten Bearbeitungsfunktionen von script.aculo.us nutzen zu können, müssen Sie die Module controls.js und effects.js zusammen mit dem Modul prototype.js laden. Ihre minimale Belastung für script.aculo.us sieht also folgendermaßen aus:
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>Erstellen eines In-Place-Texteditors
Die gesamte Konstruktionssyntax lautet wie folgt:
new Ajax.InPlaceEditor(element, url [ , options ] )Der Konstruktor für Ajax.InPlaceEditor akzeptiert drei Parameter:
Das Zielelement kann entweder eine Referenz auf das Element selbst oder die ID des Zielelements sein.
Der zweite Parameter für Ajax.InPlaceEditor gibt die URL eines serverseitigen Skripts an, das kontaktiert wird, wenn ein bearbeiteter Wert abgeschlossen ist.
Die üblichen Optionen Hash.
Optionen
Sie können eine oder mehrere der folgenden Optionen verwenden, während Sie Ihr Ajax.InPlaceEditor-Objekt erstellen.
| Sr.Nr. | Option & Beschreibung |
|---|---|
| 1 | okButton Ein boolescher Wert, der angibt, ob eine Schaltfläche "OK" angezeigt werden soll oder nicht. Der Standardwert ist true. |
| 2 | okText Der Text, der auf die Schaltfläche OK gesetzt werden soll. Der Standardwert ist "ok". |
| 3 | cancelLink Ein boolescher Wert, der angibt, ob ein Abbruchlink angezeigt werden soll. Der Standardwert ist true. |
| 4 | cancelText Der Text des Abbruchlinks. Der Standardwert ist "Abbrechen". |
| 5 | savingText Eine Textzeichenfolge, die als Wert des Steuerelements angezeigt wird, während der Speichervorgang (die Anforderung, die durch Klicken auf die Schaltfläche OK ausgelöst wird) verarbeitet wird. Der Standardwert ist "Speichern". |
| 6 | clickToEditText Die Textzeichenfolge, die beim Mouseover als Steuerelement-Tooltip angezeigt wird. |
| 7 | rows Die Anzahl der Zeilen, die angezeigt werden sollen, wenn das Bearbeitungssteuerelement aktiv ist. Jede Zahl größer als 1 bewirkt, dass ein Textbereichselement anstelle eines Textfeldelements verwendet wird. Der Standardwert ist 1. |
| 8 | cols Die Anzahl der Spalten im aktiven Modus. Wenn nicht angegeben, wird keine Spaltenbegrenzung festgelegt. |
| 9 | size Entspricht cols, gilt jedoch nur, wenn die Zeilen 1 sind. |
| 10 | highlightcolor Die Farbe, die beim Mouseover auf den Hintergrund des Textelements angewendet werden soll. Der Standardwert ist hellgelb. |
| 11 | highlightendcolor Die Farbe, zu der die Hervorhebungsfarbe als Effekt ausgeblendet wird. Note - Die Unterstützung scheint in einigen Browsern unvollständig zu sein. |
| 12 | loadingText Der Text, der während eines Ladevorgangs im Steuerelement angezeigt werden soll. Der Standardwert ist "Laden". |
| 13 | loadTextURL Gibt die URL einer serverseitigen Ressource an, die kontaktiert werden soll, um den Anfangswert des Editors zu laden, wenn dieser in den aktiven Modus wechselt. Standardmäßig findet keine Backend-Ladeoperation statt und der Anfangswert ist der Text des Zielelements. |
| 14 | externalControl Ein Element, das als "externes Steuerelement" dienen soll und das Versetzen des Editors in einen aktiven Modus auslöst. Dies ist nützlich, wenn eine andere Schaltfläche oder ein anderes Element die Bearbeitung des Steuerelements auslösen soll. |
| 15 | ajaxOptions Ein Hash-Objekt, das an das zugrunde liegende Prototype Ajax-Objekt übergeben wird, um es als Options-Hash zu verwenden. |
Rückrufoptionen
Darüber hinaus können Sie im Parameter options eine der folgenden Rückruffunktionen verwenden
| Sr.Nr. | Bedienungsanleitung |
|---|---|
| 1 | onComplete Eine JavaScript-Funktion, die nach erfolgreichem Abschluss der Speicheranforderung aufgerufen wird. Die Standardeinstellung wendet einen Hervorhebungseffekt auf den Editor an. |
| 2 | onFailure Eine JavaScript-Funktion, die bei einem Fehler beim Speichern der Anforderung aufgerufen wird. Die Standardeinstellung gibt eine Warnung aus, die die Fehlermeldung anzeigt. |
| 3 | callback Eine JavaScript-Funktion, die unmittelbar vor dem Senden der Speicheranforderung aufgerufen wird, um die an die Anforderung zu sendende Abfragezeichenfolge abzurufen. Die Standardfunktion gibt eine Abfragezeichenfolge zurück, die den Abfrageparameter "value" mit dem Wert im Textsteuerelement gleichsetzt. |
Optionen für CSS-Styling und DOM-ID
Sie können auch eine der folgenden Optionen verwenden, um das Verhalten des In-Place-Editors zu steuern:
| Sr.Nr. | Option & Beschreibung |
|---|---|
| 1 | savingClassName Der CSS-Klassenname, der auf das Element angewendet wird, während der Speichervorgang ausgeführt wird. Diese Klasse wird angewendet, wenn die Anforderung an die Speicher-URL gestellt wird, und wird entfernt, wenn die Antwort zurückgegeben wird. Der Standardwert ist "Inplaceeditor-Speichern". |
| 2 | formClassName Der CSS-Klassenname, der auf das Formular angewendet wird, das das Editorelement enthält. Der Standardwert ist "inplaceeditor-form". |
| 3 | formId Die ID, die auf das Formular angewendet wird, das das Editorelement enthält. |
Beispiel
<html>
<head>
<title>Simple Ajax Auto-completer Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>
<script type = "text/javascript">
window.onload = function() {
new Ajax.InPlaceEditor(
'theElement',
'/script.aculo.us/transform.php',
{
formId: 'whatever',
okText: 'Upper me!',
cancelText: 'Never mind'
}
);
}
</script>
</head>
<body>
<p>Click over the "Click me!" text and then change text and click OK.</p>
<p>Try this example with different options.</p>
<div id = "theElement">
Click me!
</div>
</body>
</html>Wenn angezeigt, klicken Sie auf den Text und bearbeiten Sie ihn. Dieses eher triviale PHP-Skript konvertiert den Wert eines Abfrageparameters mit dem Schlüssel "value" in das Äquivalent in Großbuchstaben und schreibt das Ergebnis zurück in die Antwort.
Hier ist der Inhalt des Skripts transform.php.
<?php
if( isset($_REQUEST["value"]) ) { $str = $_REQUEST["value"]; $str = strtoupper($str); echo "$str";
}
?>Dies führt zu folgendem Ergebnis:
Die Optionen des In-Place-Sammlungseditors
Es gibt ein weiteres Objekt namens Ajax.InPlaceCollectionEditor, das die direkte Bearbeitung unterstützt und Ihnen die Möglichkeit bietet, einen Wert aus den angegebenen Optionen auszuwählen.
Die gesamte Konstruktionssyntax lautet wie folgt:
new Ajax.InPlaceCollectionEditor(element, url [ , options ] )Der Konstruktor für den Ajax.InPlaceCollectionEditor akzeptiert drei Parameter:
Das Zielelement kann entweder eine Referenz auf das Element selbst oder die ID des Zielelements sein
Der zweite Parameter für Ajax.InPlaceEditor gibt die URL eines serverseitigen Skripts an, das kontaktiert wird, wenn ein bearbeiteter Wert abgeschlossen ist.
Die üblichen Optionen Hash.
Optionen
Abgesehen von der Hinzufügung der Erfassungsoption ist die Liste der Optionen für den In-Place-Erfassungseditor eine Teilmenge der Optionen, die vom In-Place-Texteditor geerbt wurden.
| Sr.Nr. | Option & Beschreibung |
|---|---|
| 1 | okButton Ein boolescher Wert, der angibt, ob eine Schaltfläche "OK" angezeigt werden soll oder nicht. Der Standardwert ist true. |
| 2 | okText Der Text, der auf die Schaltfläche OK gesetzt werden soll. Der Standardwert ist "ok". |
| 3 | cancelLink Ein boolescher Wert, der angibt, ob ein Abbruchlink angezeigt werden soll. Der Standardwert ist true. |
| 4 | cancelText Der Text des Abbruchlinks. Der Standardwert ist "Abbrechen". |
| 5 | savingText Eine Textzeichenfolge, die als Wert des Steuerelements angezeigt wird, während der Speichervorgang (die Anforderung, die durch Klicken auf die Schaltfläche OK ausgelöst wird) verarbeitet wird. Der Standardwert ist "Speichern". |
| 6 | clickToEditText Die Textzeichenfolge, die beim Mouseover als Steuerelement-Tooltip angezeigt wird. |
| 7 | Highlightcolor Die Farbe, die beim Mouseover auf den Hintergrund des Textelements angewendet werden soll. Der Standardwert ist hellgelb. |
| 8 | Highlightendcolor Die Farbe, zu der die Hervorhebungsfarbe als Effekt ausgeblendet wird. Note - Die Unterstützung scheint in einigen Browsern unvollständig zu sein. |
| 9 | Collection Ein Array von Elementen, die zum Auffüllen der Optionen für ausgewählte Elemente verwendet werden sollen. |
| 10 | loadTextUrl Gibt die URL einer serverseitigen Ressource an, die kontaktiert werden soll, um den Anfangswert des Editors zu laden, wenn dieser in den aktiven Modus wechselt. Standardmäßig findet keine Backend-Ladeoperation statt und der Anfangswert ist der Text des Zielelements. Damit diese Option sinnvoll ist, muss eines der in der Erfassungsoption bereitgestellten Elemente zurückgegeben werden, um als Anfangswert des Auswahlelements festgelegt zu werden. |
| 11 | externalControl Ein Element, das als "externes Steuerelement" dienen soll und das Aktivieren des Editors in den aktiven Modus auslöst. Dies ist nützlich, wenn eine andere Schaltfläche oder ein anderes Element die Bearbeitung des Steuerelements auslösen soll. |
| 12 | ajaxOptions Ein Hash-Objekt, das an das zugrunde liegende Prototype Ajax-Objekt übergeben wird, um es als Options-Hash zu verwenden. |
Rückrufoptionen
Darüber hinaus können Sie im Optionsparameter eine der folgenden Rückruffunktionen verwenden:
| Sr.Nr. | Bedienungsanleitung |
|---|---|
| 1 | onComplete Eine JavaScript-Funktion, die nach erfolgreichem Abschluss der Speicheranforderung aufgerufen wird. Die Standardeinstellung wendet einen Hervorhebungseffekt auf den Editor an. |
| 2 | onFailure Eine JavaScript-Funktion, die bei einem Fehler beim Speichern der Anforderung aufgerufen wird. Die Standardeinstellung gibt eine Warnung aus, die die Fehlermeldung anzeigt. |
Optionen für CSS-Styling und DOM-ID
Sie können auch eine der folgenden Optionen verwenden, um das Verhalten des In-Place-Editors zu steuern:
| Sr.Nr. | Option & Beschreibung |
|---|---|
| 1 | savingClassName Der CSS-Klassenname, der auf das Element angewendet wird, während der Speichervorgang ausgeführt wird. Diese Klasse wird angewendet, wenn die Anforderung an die Speicher-URL gestellt wird, und wird entfernt, wenn die Antwort zurückgegeben wird. Der Standardwert ist "Inplaceeditor-Speichern". |
| 2 | formClassName Der CSS-Klassenname, der auf das Formular angewendet wird, das das Editorelement enthält. Der Standardwert ist "inplaceeditor-form". |
| 3 | formId Die ID, die auf das Formular angewendet wird, das das Editorelement enthält. |
Beispiel
<html>
<head>
<title>Simple Ajax Auto-completer Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>
<script type = "text/javascript">
window.onload = function() {
new Ajax.InPlaceCollectionEditor(
'theElement',
'/script.aculo.us/transform.php',
{
formId: 'whatever',
okText: 'Upper me!',
cancelText: 'Never mind',
collection: ['one','two','three','four','five']
}
);
}
</script>
</head>
<body>
<p>Click over the "Click me!" text and then change text and click OK.</p>
<p>Try this example with different options.</p>
<div id = "theElement">
Click me!
</div>
</body>
</html>Hier ist der Inhalt des transform.php-Skripts.
<?php
if( isset($_REQUEST["value"]) ) { $str = $_REQUEST["value"]; $str = strtoupper($str); echo "$str";
}
?>Wenn angezeigt, klicken Sie auf und wählen Sie eine der angezeigten Optionen aus. Dieses eher triviale PHP-Skript konvertiert den Wert des Abfrageparameters mit dem Schlüssel "value" in das Äquivalent in Großbuchstaben und schreibt das Ergebnis zurück in die Antwort.
Verwenden Sie unseren Online-Compiler, um den Code mit den verschiedenen in der obigen Tabelle beschriebenen Optionen besser zu verstehen.
Dies führt zu folgendem Ergebnis: