added autoresize option and updated documentation
This commit is contained in:
parent
e8a0bfe5be
commit
2edf130472
4 changed files with 25 additions and 14 deletions
|
@ -55,6 +55,7 @@ Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst:
|
||||||
* Sprache ist Bärndütsch
|
* Sprache ist Bärndütsch
|
||||||
* Die Uhr ist eingeschaltet
|
* Die Uhr ist eingeschaltet
|
||||||
* Die Bedienelemente werden angezeigt
|
* Die Bedienelemente werden angezeigt
|
||||||
|
* Die Uhr passt sich in der Grösse an, wenn das Elternelement seine Grösse ändert
|
||||||
|
|
||||||
Mit den Bedienelementen kannst du die Uhr ein- und ausschalten sowie Sprache und Farbe wechseln.
|
Mit den Bedienelementen kannst du die Uhr ein- und ausschalten sowie Sprache und Farbe wechseln.
|
||||||
|
|
||||||
|
@ -77,8 +78,10 @@ Der uhr()-Methode kann ein Options-Objekt mitgegeben werden:
|
||||||
width: '100%', // eine CSS-Grössenangabe (default: 100%)
|
width: '100%', // eine CSS-Grössenangabe (default: 100%)
|
||||||
force: false, // false (default): Falls ein Cookie im Browser besteht, werden dessen Konfigurationswerte übernommen;
|
force: false, // false (default): Falls ein Cookie im Browser besteht, werden dessen Konfigurationswerte übernommen;
|
||||||
// true: immer die angegebene Konfiguration verwenden
|
// true: immer die angegebene Konfiguration verwenden
|
||||||
controls: true // true (default): Die Bedienelemente (Ein-/Ausschalter, Theme- und Sprachwähler) werden angezeigt
|
controls: true, // true (default): Die Bedienelemente (Ein-/Ausschalter, Theme- und Sprachwähler) werden angezeigt
|
||||||
// false: Die Bedienelemente werden nicht angezeigt
|
// false: Die Bedienelemente werden nicht angezeigt
|
||||||
|
autoresize: true // true (default): Die Uhr passt ihre Grösse dynamisch an
|
||||||
|
// false: Die Uhr behält ihre anfängliche Grösse
|
||||||
});
|
});
|
||||||
|
|
||||||
5. Sonderfunktionen
|
5. Sonderfunktionen
|
||||||
|
|
11
index.html
11
index.html
|
@ -57,17 +57,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
language: 'de_CH',
|
language: 'de_CH',
|
||||||
controls: true
|
controls: true
|
||||||
});
|
});
|
||||||
$(window).on('resize', function (event) {
|
|
||||||
var $uhr = $('#uhr');
|
|
||||||
var $parent = $uhr.parent();
|
|
||||||
var $window = $(window);
|
|
||||||
var parentWidth = $parent.width();
|
|
||||||
var parentHeight = $parent.height();
|
|
||||||
var windowWidth = $window.width();
|
|
||||||
var windowHeight = $window.height();
|
|
||||||
var size = Math.min(parentWidth, parentHeight, windowWidth, windowHeight) + 'px';
|
|
||||||
$uhr.uhr("width", size);
|
|
||||||
});
|
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -142,6 +142,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<dd>Gibt an, ob die Steuerelemente zur Auswahl von Farbe und Sprache und der Ein-/Ausschalter angezeigt werden sollen. Mögliche Werte sind <code>true</code> oder <code>false</code>.
|
<dd>Gibt an, ob die Steuerelemente zur Auswahl von Farbe und Sprache und der Ein-/Ausschalter angezeigt werden sollen. Mögliche Werte sind <code>true</code> oder <code>false</code>.
|
||||||
<br/>Typ: boolean
|
<br/>Typ: boolean
|
||||||
<br/>Default: <code>true</code></dd>
|
<br/>Default: <code>true</code></dd>
|
||||||
|
<dt><code>autoresize</code></dt>
|
||||||
|
<dd>Gibt an, ob die Uhr ihre Grösse dynamisch anpassen soll, wenn das Elternelement seine Grösse ändert, oder ob sie immer die anfängliche Grösse behält. Mögliche Werte sind <code>true</code> oder <code>false</code>.
|
||||||
|
<br/>Typ: boolean
|
||||||
|
<br/>Default: <code>true</code></dd>
|
||||||
</dl>
|
</dl>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
(function($) {
|
(function($) {
|
||||||
|
@ -150,7 +154,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
language: 'de_CH',
|
language: 'de_CH',
|
||||||
theme: 'black',
|
theme: 'black',
|
||||||
controls: false,
|
controls: false,
|
||||||
force: true
|
force: true,
|
||||||
|
autoresize: false
|
||||||
});
|
});
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
</script>
|
</script>
|
||||||
|
|
16
js/uhr.js
16
js/uhr.js
|
@ -259,6 +259,19 @@
|
||||||
themeChooser.val(selectedTheme);
|
themeChooser.val(selectedTheme);
|
||||||
this.options.theme = "";
|
this.options.theme = "";
|
||||||
this.theme(selectedTheme);
|
this.theme(selectedTheme);
|
||||||
|
if (this.options.autoresize) {
|
||||||
|
$(window).on('resize', function () {
|
||||||
|
var $e = this.element;
|
||||||
|
var $parent = $e.parent();
|
||||||
|
var $window = $(window);
|
||||||
|
var parentWidth = $parent.width();
|
||||||
|
var parentHeight = $parent.height();
|
||||||
|
var windowWidth = $window.width();
|
||||||
|
var windowHeight = $window.height();
|
||||||
|
var size = Math.min(parentWidth, parentHeight, windowWidth, windowHeight) + 'px';
|
||||||
|
setWidth.bind(this)(size);
|
||||||
|
}.bind(this));
|
||||||
|
}
|
||||||
};
|
};
|
||||||
var setCookie = function setCookie(cookieName, cookieValue) {
|
var setCookie = function setCookie(cookieName, cookieValue) {
|
||||||
var options = {};
|
var options = {};
|
||||||
|
@ -358,7 +371,8 @@
|
||||||
theme: uhrGlobals.themes[0].styleClass,
|
theme: uhrGlobals.themes[0].styleClass,
|
||||||
force: false,
|
force: false,
|
||||||
controls: true,
|
controls: true,
|
||||||
cookiePath: undefined
|
cookiePath: undefined,
|
||||||
|
autoresize: true
|
||||||
},
|
},
|
||||||
"start": start,
|
"start": start,
|
||||||
"stop": stop,
|
"stop": stop,
|
||||||
|
|
Loading…
Reference in a new issue