readme aktualisiert und uhr.js verschlankt
This commit is contained in:
		
							parent
							
								
									91d3865dea
								
							
						
					
					
						commit
						27ba54624b
					
				
					 2 changed files with 59 additions and 6 deletions
				
			
		
							
								
								
									
										57
									
								
								README
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										57
									
								
								README
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,57 @@ | ||||||
|  | Bärneruhr | ||||||
|  | 
 | ||||||
|  | Du willst Bärneruhr auf deiner Website verwenden? Das geht ganz einfach. | ||||||
|  | 
 | ||||||
|  | 1. Benötigte Dateien einbinden | ||||||
|  | 
 | ||||||
|  | Binde folgende Javascript-Dateien im HTML-Dokument ein: | ||||||
|  | - jquery-2.0.3.min.js (Falls nicht bereits vorhanden) | ||||||
|  | - jquery.cookie.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 <div> mit einer ID: | ||||||
|  | <div id="meineuhr"></div> | ||||||
|  | 
 | ||||||
|  | 3. Uhr per Javascript konfigurieren | ||||||
|  | 
 | ||||||
|  | Initialisiere die Uhr mit einer einzigen Zeile Javascript: | ||||||
|  | new Uhr($('#meineuhr')); | ||||||
|  | 
 | ||||||
|  | Als Parameter wird ein jQuery-gewrapptes HTML-Element erwartet. | ||||||
|  | 
 | ||||||
|  | Dies erzeugt eine Uhr in der Standardkonfiguration. 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 | ||||||
|  | 
 | ||||||
|  | 4. Weitere Optionen | ||||||
|  | Der Uhr()-Methode kann ein Options-Objekt mitgegeben werden: | ||||||
|  | new Uhr($('#uhrcontainer'), { | ||||||
|  | 	status: 'on', // 'on' oder 'off' | ||||||
|  | 	theme: 'red', // 'black', 'red', 'blue', 'green' oder 'white' | ||||||
|  | 	layout: 'en', // 'de_EC', 'de' oder 'en' (je nach eingebundenen Sprachdateien | ||||||
|  | 	width: '20em' // eine CSS-Grössenangabe | ||||||
|  | }); | ||||||
|  | 
 | ||||||
|  | Viel Spass! | ||||||
|  | 
 | ||||||
							
								
								
									
										8
									
								
								uhr.js
									
										
									
									
									
								
							
							
						
						
									
										8
									
								
								uhr.js
									
										
									
									
									
								
							|  | @ -21,7 +21,7 @@ function Uhr(clockarea, settings) { | ||||||
| 	this.id = Uhr.id++; | 	this.id = Uhr.id++; | ||||||
| 	this.timer = null; | 	this.timer = null; | ||||||
| 	this.currentTheme = null; | 	this.currentTheme = null; | ||||||
| 	this.currentLayout = Uhr.layouts['undefined']; | 	this.currentLayout = {}; | ||||||
| 	this.currentMinute = -1; | 	this.currentMinute = -1; | ||||||
| 	this.initHTMLElements(clockarea, settings || {}); | 	this.initHTMLElements(clockarea, settings || {}); | ||||||
| } | } | ||||||
|  | @ -226,6 +226,7 @@ Uhr.prototype.initLayoutSwitch = function(defaultValue, overrideCookie) { | ||||||
| 		selectedLayout = defaultValue; | 		selectedLayout = defaultValue; | ||||||
| 	} | 	} | ||||||
| 	if (selectedLayout == undefined || selectedLayout == 'undefined') { | 	if (selectedLayout == undefined || selectedLayout == 'undefined') { | ||||||
|  | 		// FIXME not nice, hardcoded default-value
 | ||||||
| 		selectedLayout = 'de_CH'; | 		selectedLayout = 'de_CH'; | ||||||
| 	} | 	} | ||||||
| 	this.layoutSwitch.val(selectedLayout); | 	this.layoutSwitch.val(selectedLayout); | ||||||
|  | @ -247,11 +248,6 @@ Uhr.prototype.initThemeSwitch = function(defaultValue, overrideCookie) { | ||||||
| 	this.setTheme(selectedTheme); | 	this.setTheme(selectedTheme); | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| Uhr.register('undefined', { |  | ||||||
| 	language: 'Please choose your language', |  | ||||||
| 	values: [] |  | ||||||
| }); |  | ||||||
| 
 |  | ||||||
| /** | /** | ||||||
|  * Hilfsklasse zum Rendern der Uhr. |  * Hilfsklasse zum Rendern der Uhr. | ||||||
|  * @param layout     Layout-Objekt, das gerendert werden soll. |  * @param layout     Layout-Objekt, das gerendert werden soll. | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue