WaBis

walter.bislins.ch

Datei: CP: demo.html

Inhalt der Datei: ./javascript/ControlPanel/demo.html
<!DOCTYPE html>
<html lang="de">
<head>

<link rel="stylesheet" type="text/css" href="ControlPanelStyles.css" media="all">
<script src="ControlPanelX.js"></script>

<style>
body { background-color: #eee; font-family: Arial, Verdana, sans-serif; }
div.Page { background-color: white; border: 2px solid #888; width: 760px; position: relative; left: 50%; margin-left: -380px; padding: 1em 2em; }
table { border: 1px solid #ddd; }
table th, table td { text-align: left; padding-top: 3px; padding-bottom: 3px; }
table th { background-color: #ddd; }
.lbtn { color:white; background:black; border:1px solid gray; padding:0px 4px 1px 4px; font-size:90%; }
a { text-decoration:none; }
</style>

</head>
<body>
<div class="Page">

<h1>Einfaches Beispiel für ControlPanels's</h1>

<script>
function Rechner() {
  this.Startkapital = 10000;
  this.Zins = 0.05;
  this.Zeitraum = 10;
  this.Endkapital = 0;
}

Rechner.prototype.BerechneEndkapital = function() {
  this.Endkapital = this.Startkapital * Math.pow( 1 + this.Zins, this.Zeitraum );
}

var Model = new Rechner();

function Berechnung() {
  Model.BerechneEndkapital();
  ControlPanels.Update();
}

function Reset() {
  ControlPanels.Reset();
  Berechnung();
}

ControlPanels.NewPanel( {
  ModelRef: 'Model',
  NCols: 2,
  Format: 'fix0',
  Digits: 2,
  HiliChanges: false,
  OnModelChange: Berechnung

} ).AddHeader( {
  Text: 'Zinseszins-Rechner' + ControlPanels.ResetButtonR(),
  ColSpan: 4

} ).AddTextField( {
  Name: 'Startkapital',
  Units: 'CHF'

} ).AddTextField( {
  Name: 'Zins',
  Format: 'std',
  Digits: 8,
  Units: '%',
  Mult: 0.01

} ).AddTextField( {
  Name: 'Zeitraum',
  Format: 'std',
  Digits: 8,
  Units:
  'Jahre'

} ).AddTextField( {
  Name: 'Endkapital',
  ReadOnly: true,
  Units: 'CHF',
  Description: 'Mehr zu ControlPanel\'s auf walter.bislins.ch',
  Link: 'http://walter.bislins.ch/doku/ControlPanel'

} ).Render();

xOnLoad( Berechnung );
</script>

<p>Gib einen Wert in eines der Eingabefelder ein und drücke dann <i>Enter</i>.</p>
<p>Um ein Feld auf den Anfangswert zurückzusetzen, klicke in das Feld und drücke dann die <i>Esc</i> Taste oder lösche das Feld und drücke Enter oder gib ein Leerzeichen ein und drücke Enter.</p>
<p>Beachte die Zahlenformatierung bei grossen Werten!</p>
</div>
</body>

Weitere Infos zur Seite
Erzeugt Sonntag, 7. August 2016
von wabis
Zum Seitenanfang
Geändert Montag, 22. August 2016
von *System*