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
|
||||
* Die Uhr ist eingeschaltet
|
||||
* 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.
|
||||
|
||||
|
@ -77,8 +78,10 @@ Der uhr()-Methode kann ein Options-Objekt mitgegeben werden:
|
|||
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
|
||||
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
|
||||
autoresize: true // true (default): Die Uhr passt ihre Grösse dynamisch an
|
||||
// false: Die Uhr behält ihre anfängliche Grösse
|
||||
});
|
||||
|
||||
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',
|
||||
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);
|
||||
</script>
|
||||
</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>.
|
||||
<br/>Typ: boolean
|
||||
<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>
|
||||
<script type="text/javascript">
|
||||
(function($) {
|
||||
|
@ -150,7 +154,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
language: 'de_CH',
|
||||
theme: 'black',
|
||||
controls: false,
|
||||
force: true
|
||||
force: true,
|
||||
autoresize: false
|
||||
});
|
||||
})(jQuery);
|
||||
</script>
|
||||
|
|
16
js/uhr.js
16
js/uhr.js
|
@ -259,6 +259,19 @@
|
|||
themeChooser.val(selectedTheme);
|
||||
this.options.theme = "";
|
||||
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 options = {};
|
||||
|
@ -358,7 +371,8 @@
|
|||
theme: uhrGlobals.themes[0].styleClass,
|
||||
force: false,
|
||||
controls: true,
|
||||
cookiePath: undefined
|
||||
cookiePath: undefined,
|
||||
autoresize: true
|
||||
},
|
||||
"start": start,
|
||||
"stop": stop,
|
||||
|
|
Loading…
Reference in a new issue