JavaScript auto-scrolling Page Navigation mit Prototype
auto-scrolling Page Navigation für das Framework Prototype
Scrollt zur Sprungadresse auf der aktuellen Seite. Lässt das die Navigation auf der Seite weicher erscheinen.
Demo Prototype auto-scrolling page navigation:
JavaScript - Drop down Menu mit Prototype
Prototype.js und Effects.js in Head einbinden.
z.Bsp.
<script src="prototype.js" type="text/javascript"></script>
<script src="effects.js" type="text/javascript"></script>
dann das Script einbinden
<script type="text/javascript">
Event.observe(window, 'load', function() {
$$('a[href^=#]:not([href=#])').each(function(element) {
element.observe('click', function(event) {
new Effect.ScrollTo(this.hash.substr(1));
Event.stop(event);
}.bindAsEventListener(element))
})
})
Event.observe(window, 'load', function() {
$('view_source').observe('click', function(event){
$('source').toggle();
Event.stop(event);
});
});
</script>
auto-scrolling Page Navigation für Prototype
First section
Beispieltext
Prototype ist ein freies JavaScript - Framework. Es stellt verschiedene Programmierhilfen für AJaX und DOM zur Verfügung. Prototype ist Bestandteil von dem Web Application Framework RoR.
Script.aculo.us ist eine open-source Effektbibliothek für Ajax Anwendungen. Es besitzt Drag and Drop Funktionen und ist Cross-Browser kompatibel. Script.aculo.us basiert auf dem Framework Prototype.
Zuerst sollte man sich die aktuelle Version herunterladen. Dann einfach einen Ordner erzeugen und je nach Bedarf Dateien aus dem Zip File hochladen. Normalerweise sind folgende Dateien bei der aktuellen Script.aculo.us Version im Zip-Fiel vorhanden:
- prototype.js
- scriptaculous.js
- builder.js
- effects.js
- dragdrop.js
- slider.js
- controls.js
Second section
Das Einbinden des Framework in eine HTML Seite erfolgt über den Head Bereich.
<head>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
</head>
