Bärneruhr ========= Du willst Bärneruhr auf deiner Website verwenden? Dank des jQuery-Plugins geht das so einfach, dass es sogar deine Grossmutter tun könnte! 1. Benötigte Dateien einbinden ------------------------------ * Binde folgende Javascript-Dateien im HTML-Dokument ein: * jquery-2.0.3.min.js (Falls nicht bereits vorhanden) * jquery-ui-1.10.3.custom.min.js (Falls nicht bereits vorhanden) * Von jquery-ui werden die Komponenten 'core' und 'widget' benötigt. * jquery-cookie-1.4.0.js (Falls nicht bereits vorhanden) * uhr.js * Binde mindestens eine der folgenden Javascript-Dateien im HTML ein, je nach dem, welche Sprachen deine Uhr unterstützen soll: * uhr-de_CH.js * uhr-de.js * uhr-en.js * Binde folgende CSS-Dateien im HTML-Dokument ein: * uhr.css * uhr-black.css * uhr-blue.css * uhr-green.css * uhr-red.css * uhr-white.css * Die möglichen Themes (Farbschemata) sind im Moment noch hartcodiert, deshalb sollten alle Dateien eingebunden werden. 2. Uhr-Element im HTML-Dokument einfügen ---------------------------------------- Erstelle ein leeres `
` mit einer ID:
3. Uhr per Javascript konfigurieren ----------------------------------- Initialisiere die Uhr mit einer einzigen Zeile Javascript: jQuery('#uhrcontainer').uhr(); Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst: * Breite ist 100% des Eltenelements * Farbe ist Schwarz * Sprache ist Bärndütsch * Die Uhr ist eingeschaltet Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt. Es kann natürlich auch eine Collection von Elementen übergeben werden. Mit jQuery('div').uhr(); würde also jedes `
`-Element der Seite in eine Uhr umgewandelt 4. Weitere Optionen ------------------- Der uhr()-Methode kann ein Options-Objekt mitgegeben werden: jQuery('#uhrcontainer').uhr({ status: 'on', // 'on' (default) oder 'off' theme: 'black', // 'black' (default), 'red', 'blue', 'green' oder 'white' language: 'de_CH', // 'de_CH' (default), 'de' oder 'en' (je nach eingebundenen Sprachdateien) width: '100%', // eine CSS-Grössenangabe (default: 100%) force: false, // false (default): Falls ein Cookie im Browser besteht, werden dessen Konfigurationswerte übernommen; // true: immer die angegebene Konfiguration verwenden }); 5. Sonderfunktionen ------------------- Es gibt noch einen zusätzlichen Konfigurationsparameter. Mit { time: new Date() } kann die Uhr auf eine fixe Zeit eingestellt werden. Sie bleibt dann statisch und aktualisiert sich nicht, sondern zeigt immer diese Zeit an. Mit dem On/Off-Schalter wird dies allerdings rückgängig gemacht und die Uhr nimmt das Standardverhalten mit der aktuellen Systemzeit an. Die Zeit kann auch über einen Methodenaufruf dynamisch eingestellt werden: jQuery('#uhrcontainer').uhr("time", new Date()); Viel Spass! A. Lizenzbestimmungen ===================== This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see .