Revision d25334c6
Von Hans Peter Schlaepfer vor mehr als 6 Jahren hinzugefügt
SL/Controller/FinancialControllingReport.pm | ||
---|---|---|
49 | 49 |
my $report = SL::ReportGenerator->new(\%::myconfig, $::form); |
50 | 50 |
$self->{report} = $report; |
51 | 51 |
|
52 |
my @columns = qw(customer globalprojectnumber globalproject_type transaction_description ordnumber net_amount delivered_amount delivered_amount_p billed_amount billed_amount_p paid_amount paid_amount_p |
|
53 |
billable_amount billable_amount_p other_amount); |
|
52 |
my @columns = qw(customer globalprojectnumber globalproject_type transaction_description ordnumber net_amount delivered_amount delivered_amount_p billed_amount billed_amount_p paid_amount paid_amount_p billable_amount billable_amount_p other_amount); |
|
54 | 53 |
my @sortable = qw(ordnumber transdate customer globalprojectnumber globalproject_type transaction_description ); |
55 | 54 |
$self->{number_columns} = [ qw(net_amount billed_amount billed_amount_p delivered_amount delivered_amount_p paid_amount paid_amount_p other_amount billable_amount billable_amount_p) ]; |
56 | 55 |
|
SL/Form.pm | ||
---|---|---|
508 | 508 |
|
509 | 509 |
# output |
510 | 510 |
print $self->create_http_response(content_type => 'text/html', charset => 'UTF-8'); |
511 |
print $doctypes{$params{doctype} || 'transitional'}, $/;
|
|
511 |
print $doctypes{$params{doctype} || 'html5'}, $/;
|
|
512 | 512 |
print <<EOT; |
513 | 513 |
<html> |
514 | 514 |
<head> |
SL/Layout/MenuLeft.pm | ||
---|---|---|
8 | 8 |
use List::MoreUtils qw(apply); |
9 | 9 |
|
10 | 10 |
sub stylesheets { |
11 |
qw(icons16.css icons24.css menu.css)
|
|
11 |
#qw(icons16.css icons24.css menu.css) # no need for that with new design
|
|
12 | 12 |
} |
13 | 13 |
|
14 | 14 |
sub javascripts_inline { |
SL/Layout/Split.pm | ||
---|---|---|
18 | 18 |
my $left = join '', map { $_->pre_content } @{ $_[0]->left || [] }; |
19 | 19 |
my $right = join '', map { $_->pre_content } @{ $_[0]->right || [] }; |
20 | 20 |
|
21 |
SL::Presenter->get->html_tag('div', $left, class => 'layout-split-left')
|
|
22 |
.'<div class="layout-split-right">' . $right;
|
|
21 |
SL::Presenter->get->html_tag('div', $left, id => 'layout-split-left')
|
|
22 |
.'<div id="layout-split-right">' . $right;
|
|
23 | 23 |
} |
24 | 24 |
|
25 | 25 |
sub post_content { |
bin/mozilla/do.pl | ||
---|---|---|
469 | 469 |
|
470 | 470 |
setup_do_action_bar(); |
471 | 471 |
|
472 |
$form->{ALL_DELIVERY_TERMS} = SL::DB::Manager::DeliveryTerm->get_all_sorted(); # aus sub form_footer |
|
473 |
|
|
472 | 474 |
$form->header(); |
475 |
|
|
473 | 476 |
# Fix für Bug 1082 Erwartet wird: 'abteilungsNAME--abteilungsID' |
474 | 477 |
# und Erweiterung für Bug 1760: |
475 | 478 |
# Das war leider nur ein Teil-Fix, da das Verhalten den 'Erneuern'-Knopf |
... | ... | |
495 | 498 |
my $form = $main::form; |
496 | 499 |
|
497 | 500 |
$form->{PRINT_OPTIONS} = setup_sales_purchase_print_options(); |
498 |
$form->{ALL_DELIVERY_TERMS} = SL::DB::Manager::DeliveryTerm->get_all_sorted();
|
|
501 |
# $form->{ALL_DELIVERY_TERMS} = SL::DB::Manager::DeliveryTerm->get_all_sorted(); # verlagert in sub form_header
|
|
499 | 502 |
|
500 | 503 |
print $form->parse_html_template('do/form_footer', |
501 | 504 |
{transfer_default => ($::instance_conf->get_transfer_default)}); |
bin/mozilla/ir.pl | ||
---|---|---|
390 | 390 |
|
391 | 391 |
setup_ir_action_bar(); |
392 | 392 |
|
393 |
$form->{ALL_DELIVERY_TERMS} = SL::DB::Manager::DeliveryTerm->get_all_sorted(); # moved to here from sub form_footer |
|
394 |
|
|
393 | 395 |
$form->header(); |
394 | 396 |
|
395 | 397 |
print $form->parse_html_template("ir/form_header", \%TMPL_VAR); |
... | ... | |
441 | 443 |
foreach my $item (@{ $form->{taxaccounts_array} }) { |
442 | 444 |
if ($form->{"${item}_base"}) { |
443 | 445 |
if ($form->{taxincluded}) { |
444 |
$form->{"${item}_total"} = $form->round_amount( ($form->{"${item}_base"} * $form->{"${item}_rate"} |
|
445 |
/ (1 + $form->{"${item}_rate"})), 2); |
|
446 |
$form->{"${item}_total"} = $form->round_amount( ($form->{"${item}_base"} * $form->{"${item}_rate"} / (1 + $form->{"${item}_rate"})), 2); |
|
446 | 447 |
$form->{"${item}_netto"} = $form->round_amount( ($form->{"${item}_base"} - $form->{"${item}_total"}), 2); |
447 |
} else { |
|
448 |
} |
|
449 |
else { |
|
448 | 450 |
$form->{"${item}_total"} = $form->round_amount( $form->{"${item}_base"} * $form->{"${item}_rate"}, 2); |
449 | 451 |
$form->{invtotal} += $form->{"${item}_total"}; |
450 | 452 |
} |
... | ... | |
496 | 498 |
$totalpaid += $form->{"paid_$i"}; |
497 | 499 |
} |
498 | 500 |
|
499 |
$form->{ALL_DELIVERY_TERMS} = SL::DB::Manager::DeliveryTerm->get_all_sorted();
|
|
501 |
# $form->{ALL_DELIVERY_TERMS} = SL::DB::Manager::DeliveryTerm->get_all_sorted(); # moved to sub form_header
|
|
500 | 502 |
|
501 | 503 |
print $form->parse_html_template('ir/form_footer', { |
502 | 504 |
is_type_credit_note => ($form->{type} eq "credit_note"), |
bin/mozilla/oe.pl | ||
---|---|---|
649 | 649 |
$TMPL_VAR->{notes} = qq|<textarea name="notes" class="texteditor" wrap="soft" style="width: 300px; height: 150px">| . H($form->{notes}) . qq|</textarea>|; |
650 | 650 |
$TMPL_VAR->{intnotes} = qq|<textarea name=intnotes rows="$introws" cols="35">| . H($form->{intnotes}) . qq|</textarea>|; |
651 | 651 |
|
652 |
$TMPL_VAR->{ALL_DELIVERY_TERMS} = SL::DB::Manager::DeliveryTerm->get_all_sorted(); # moved from sub form_footer |
|
652 | 653 |
|
653 | 654 |
|
654 | 655 |
|
css/developement/farben#OnDisk.html | ||
---|---|---|
1 |
<!DOCTYPE html> |
|
2 |
<html lang="de"> |
|
3 |
<head> |
|
4 |
<meta charset="utf-8" /> |
|
5 |
<link href="../style.css" rel="stylesheet"> |
|
6 |
<title>Kommunikation mit Farben in Kivitendo</title> |
|
7 |
|
|
8 |
<script type="text/javascript" src="/js/jquery.js"></script> |
|
9 |
<script type="text/javascript" src="/js/common.js"></script> |
|
10 |
<script type="text/javascript" src="/js/namespace.js"></script> |
|
11 |
<script type="text/javascript" src="/js/kivi.js"></script> |
|
12 |
<script type="text/javascript" src="/js/locale/de.js"></script> |
|
13 |
<script type="text/javascript" src="/js/jquery-ui.js"></script> |
|
14 |
<script type="text/javascript" src="/js/kivi.QuickSearch.js"></script> |
|
15 |
<script type="text/javascript" src="/js/kivi.ActionBar.js"></script> |
|
16 |
<script type="text/javascript" src="/js/kivi.Draft.js"></script> |
|
17 |
<script type="text/javascript" src="/js/kivi.File.js"></script> |
|
18 |
<script type="text/javascript" src="/js/kivi.SalesPurchase.js"></script> |
|
19 |
<script type="text/javascript" src="/js/kivi.Part.js"></script> |
|
20 |
<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script> |
|
21 |
<script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script> |
|
22 |
<script type="text/javascript" src="/js/kivi.io.js"></script> |
|
23 |
<script type="text/javascript" src="/js/autocomplete_customer.js"></script> |
|
24 |
<script type="text/javascript" src="/js/client_js.js"></script> |
|
25 |
<script type="text/javascript" src="/js/jquery.cookie.js"></script> |
|
26 |
<script type="text/javascript" src="/js/jquery.checkall.js"></script> |
|
27 |
<script type="text/javascript" src="/js/jquery.download.js"></script> |
|
28 |
<script type="text/javascript" src="/js/jquery/jquery.form.js"></script> |
|
29 |
<script type="text/javascript" src="/js/jquery/fixes.js"></script> |
|
30 |
<script type="text/javascript" src="/js/jquery/jquery.tooltipster.min.js"></script> |
|
31 |
<script type="text/javascript" src="/js/jquery/ui/i18n/jquery.ui.datepicker-de.js"></script> |
|
32 |
|
|
33 |
</head> |
|
34 |
<body class="developing"> |
|
35 |
<div class="wrapper"> |
|
36 |
|
|
37 |
<h1>Bedeutung & Anwendung von Farben in Kivitendo</h1> |
|
38 |
|
|
39 |
<h2>Buttons</h2> |
|
40 |
<form action="#"> |
|
41 |
<h3>Formular absenden (Datenmanipulation, unwiderrufbar)</h3> |
|
42 |
<p>Diese Buttons starten den Versand der Formulardaten an den Server (Submit). Aus diesem Grunde sind diese entsprechend prominent eingefärbt.</p> |
|
43 |
<div class="buttons"> |
|
44 |
<input type="submit" value="Absenden"> |
|
45 |
<input type="submit" value="Absenden" class="hover"> |
|
46 |
<input type="submit" value="Absenden" class="active"> (INPUT[submit]-Tag) <br> |
|
47 |
<button type="button">Speichern</button> |
|
48 |
<button type="button" class="hover">Speichern</button> |
|
49 |
<button type="button" class="active">Speichern</button> (BUTTON-Tag)<br> |
|
50 |
<a href="#" class="button"> |
|
51 |
<a href="#" class="button hover"> |
|
52 |
<a href="#" class="button active">Absenden</a> (A.button-Tag)<br> |
|
53 |
</div><!-- ./buttons --> |
|
54 |
|
|
55 |
<h3>Navigation & User Interface</h3> |
|
56 |
<p>Diese Buttons dienen zur Bedienung der grafischen Benutzer-Schnittstelle im Client und verursachen KEINE unwiderrufliche Datenmanipulationen auf Seiten des Servers.<br>Aus diesem Grunde wird die Klasse <b>«.neutral»</b> bereitgestellt.</p> |
|
57 |
<div class="buttons"> |
|
58 |
<input type="reset" value="Zurücksetzen" class="neutral wi-normal"> (INPUT[submit].neutral-Tag) <br> |
|
59 |
<button class="neutral wi-normal">Details anzeigen</button> (BUTTON.neutral-Tag)<br> |
|
60 |
<a href="#" class="button neutral wi-normal">Filter anzeigen</a> (A.button.neutral-Tag)<br> |
|
61 |
</div><!-- ./buttons --> |
|
62 |
</form> |
|
63 |
|
|
64 |
<h2>Nachrichten (Messages)</h2> |
|
65 |
<p>Es gibt zwei ggf. sogar drei Message-<b>Container-Varianten</b> in Kivitendo:<br><i>Flash_Messages und Old_Style</i>.<br>Dann gibt es mind. 4 <b>Message-Arten</b>:<br><i>Error, Info, Hint, Warning</i><br>Nachfolgend werden jeweils zuerst die komplexen Flash-Messages, dann die einfachen Old Style-Messages in P- & DIV-Containern aufgeführt.</p> |
|
66 |
|
|
67 |
|
|
68 |
<h3>Error</h3> |
|
69 |
|
|
70 |
<p>Fehlermeldung, die ein Grund zur Sorge sein sollten. Diese Nachrichten-Art nur in schwerwiegenden Fällen einsetzen, damit der Benutzer sofort erkennt, dass was schiefgelaufen ist.</p> |
|
71 |
<div id="flash_error" class="flash_message flash_message_error"> |
|
72 |
<a href="#flash_error" style="float:right" class="icon-close">✕</a> |
|
73 |
<span class="flash_title" style="float:left;">Fehler:</span> |
|
74 |
<div class="flash_notification" style="float:left;"> |
|
75 |
<span id="flash_error_content" class="content">Es ist ein schwerwiegender Fehler aufgetreten!</span> |
|
76 |
<span id="flash_error_disp" class="display" style="float:left;"> |
|
77 |
<a href="#flash_error" style="float:left;" onclick="$('#flash_detail_error').toggle();"> [Details] </a> |
|
78 |
</span> |
|
79 |
<div id="flash_detail_error" class="detail" style="display:none;"> |
|
80 |
<span id="flash_error_detail">Details zum aufgetretenen, schwerwiegenden Fehler. Hierbei handelt es sich aber nicht um einen Rechtschreibefehler.</span> |
|
81 |
<a href="#flash_error" style="float:left" onclick="$('#flash_detail_error').hide()" class="icon-close">✕</a> |
|
82 |
</div> |
|
83 |
</div> |
|
84 |
</div> |
|
85 |
<p class="message message_error">Es ist ein Fehler aufgetreten! (P.message_error)</p> |
|
86 |
<div class="message message_error">Es ist ein Fehler aufgetreten! (DIV.message_error)</div> |
|
87 |
|
|
88 |
|
|
89 |
<h3>Info / Hint</h3> |
|
90 |
|
|
91 |
<p>Hier handelt es sich eher um neutrale, ggf. zu ignorierende Routine-Nachrichten, die den Benutzer auch eine gewisse Sicherheit geben sollten. Nicht im Übermass einsetzen, da die Benutzer das Kivitendo-System u.U. täglich bedienen müssen.</p> |
|
92 |
<div id="flash_info" class="flash_message flash_message_info"> |
|
93 |
<a href="#flash_info" style="float:right" class="icon-close">✕</a> |
|
94 |
<span class="flash_title" style="float:left;">Information:</span> |
|
95 |
<div class="flash_notification" style="float:left;"> |
|
96 |
<span id="flash_info_content" class="content">Absolut kein Grund zur Beunruhigung, aber lesen sollten Sie die Nachricht vielleicht einmal in Ihrem Leben.</span> |
|
97 |
<span id="flash_info_disp" class="display" style="float:left;"> |
|
98 |
<a href="#flash_info" style="float:left;" onclick="$('#flash_detail_info').toggle();"> [Details] </a> |
|
99 |
</span> |
|
100 |
<div id="flash_detail_info" class="detail" style="display:none;"> |
|
101 |
<span id="flash_info_detail">Manchmal ist es einfacher, solche Nachrichten zu lesen als gleich das Manual durchrackern zu müssen, was sowieso nur wenige Prozent der Kivitendo-Nutzer machen, ausser eben die karrierebewussten Anwender oder die innerbetrieblich Verantwortlichen.</span> |
|
102 |
<a href="#flash_info" style="float:left" onclick="$('#flash_detail_info').hide()" class="icon-close">✕</a> |
|
103 |
</div> |
|
104 |
</div> |
|
105 |
</div> |
|
106 |
<p class="message message_hint">Es wurden keine Dokumente gefunden, was durchaus korrekt sein kann! (P.message_<b>hint</b>)</p> |
|
107 |
<div class="message message_hint">Die Buchungen sind noch nicht abgespeichert worden! (DIV.message_<b>hint</b>)</div> |
|
108 |
|
|
109 |
|
|
110 |
<h3>Warning</h3> |
|
111 |
|
|
112 |
<p>Wichtige Mitteilung, die aber kein Grund zur Sorge geben sollte. Diese Nachricht unterstützt den Benutzer bei kritischen Prozessen, sollte ihn aber bei täglichem Einsatz nicht von der Arbeit abhalten.</p> |
|
113 |
<div id="flash_warning" class="flash_message flash_message_warning"> |
|
114 |
<a href="#flash_warning" style="float:right" class="icon-close">✕</a> |
|
115 |
<span class="flash_title" style="float:left;">Warnung:</span> |
|
116 |
<div class="flash_notification" style="float:left;"> |
|
117 |
<span id="flash_warning_content" class="content">Diesen Hinweis sollten Sie ernst nehmen, aber es besteht beim Lesen noch kein Grund zur Beunruhigung.</span> |
|
118 |
<span id="flash_warning_disp" class="display" style="float:left;"> |
|
119 |
<a href="#flash_warning" style="float:left;" onclick="$('#flash_detail_warning').toggle();"> [Details] </a> |
|
120 |
</span> |
|
121 |
<div id="flash_detail_warning" class="detail" style="display:none;"> |
|
122 |
<span id="flash_warning_detail">Sie sollten diesen Hinweis ernst nehmen, und vielleicht kommt er Ihnen auch hinlänglich bekannt vor, sodass Sie wissen, wie Sie damit umzugehen haben. Sie sollten sich darüber im Klaren sein, was diese Warnung bedeutet.</span> |
|
123 |
<a href="#flash_warning" style="float:left" onclick="$('#flash_detail_warning').hide()" class="icon-close">✕</a> |
|
124 |
</div> |
|
125 |
</div> |
|
126 |
</div> |
|
127 |
<p class="message message_warning">Achtung, wichtiger Hinweis! (P.message_warning)</p> |
|
128 |
<div class="message message_warning">Achtung, wichtiger Hinweis! (DIV.message_warning)</div> |
|
129 |
|
|
130 |
|
|
131 |
<h3>OK</h3> |
|
132 |
|
|
133 |
<p>Reine Info, die man getrost ignorieren könnte oder dürfte, aber dem Benutzer die Gewissheit gibt, dass der ausgeführte Prozess erfolgreich abgelaufen ist.</p> |
|
134 |
<div id="flash_ok" class="flash_message flash_message_ok"> |
|
135 |
<a href="#flash_ok" style="float:right" class="icon-close">✕</a> |
|
136 |
<span |
css/developement/farben.html | ||
---|---|---|
1 |
<!DOCTYPE html> |
|
2 |
<html lang="de"> |
|
3 |
<head> |
|
4 |
<meta charset="utf-8" /> |
|
5 |
<link href="../style.css" rel="stylesheet"> |
|
6 |
<title>Kommunikation mit Farben in Kivitendo</title> |
|
7 |
|
|
8 |
<script type="text/javascript" src="/js/jquery.js"></script> |
|
9 |
<script type="text/javascript" src="/js/common.js"></script> |
|
10 |
<script type="text/javascript" src="/js/namespace.js"></script> |
|
11 |
<script type="text/javascript" src="/js/kivi.js"></script> |
|
12 |
<script type="text/javascript" src="/js/locale/de.js"></script> |
|
13 |
<script type="text/javascript" src="/js/jquery-ui.js"></script> |
|
14 |
<script type="text/javascript" src="/js/kivi.QuickSearch.js"></script> |
|
15 |
<script type="text/javascript" src="/js/kivi.ActionBar.js"></script> |
|
16 |
<script type="text/javascript" src="/js/kivi.Draft.js"></script> |
|
17 |
<script type="text/javascript" src="/js/kivi.File.js"></script> |
|
18 |
<script type="text/javascript" src="/js/kivi.SalesPurchase.js"></script> |
|
19 |
<script type="text/javascript" src="/js/kivi.Part.js"></script> |
|
20 |
<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script> |
|
21 |
<script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script> |
|
22 |
<script type="text/javascript" src="/js/kivi.io.js"></script> |
|
23 |
<script type="text/javascript" src="/js/autocomplete_customer.js"></script> |
|
24 |
<script type="text/javascript" src="/js/client_js.js"></script> |
|
25 |
<script type="text/javascript" src="/js/jquery.cookie.js"></script> |
|
26 |
<script type="text/javascript" src="/js/jquery.checkall.js"></script> |
|
27 |
<script type="text/javascript" src="/js/jquery.download.js"></script> |
|
28 |
<script type="text/javascript" src="/js/jquery/jquery.form.js"></script> |
|
29 |
<script type="text/javascript" src="/js/jquery/fixes.js"></script> |
|
30 |
<script type="text/javascript" src="/js/jquery/jquery.tooltipster.min.js"></script> |
|
31 |
<script type="text/javascript" src="/js/jquery/ui/i18n/jquery.ui.datepicker-de.js"></script> |
|
32 |
|
|
33 |
</head> |
|
34 |
<body class="developing"> |
|
35 |
<header> |
|
36 |
<h1>Bedeutung & Anwendung von Farben in Kivitendo</h1> |
|
37 |
<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav> |
|
38 |
</header> |
|
39 |
<div class="wrapper"> |
|
40 |
<h2>Buttons</h2> |
|
41 |
<form action="#"> |
|
42 |
<h3>Formular absenden (Datenmanipulation, unwiderrufbar)</h3> |
|
43 |
<p>Diese Buttons starten den Versand der Formulardaten an den Server (Submit). Aus diesem Grunde sind diese entsprechend prominent eingefärbt.</p> |
|
44 |
<div class="buttons"> |
|
45 |
<input type="submit" value="Absenden" class="wi-small"> |
|
46 |
<input type="submit" value="Absenden" class="hover wi-small"> |
|
47 |
<input type="submit" value="Absenden" class="active wi-small"> (INPUT[submit]-Tag) <br> |
|
48 |
<button type="button" class=" wi-small">Speichern</button> |
|
49 |
<button type="button" class="hover wi-small">Speichern</button> |
|
50 |
<button type="button" class="active wi-small">Speichern</button> (BUTTON-Tag)<br> |
|
51 |
<a href="#" class="button wi-small">Absenden</a> |
|
52 |
<a href="#" class="button hover wi-small">Absenden</a> |
|
53 |
<a href="#" class="button active wi-small">Absenden</a> (A.button-Tag)<br> |
|
54 |
</div><!-- ./buttons --> |
|
55 |
|
|
56 |
<h3>Navigation & User Interface</h3> |
|
57 |
<p>Diese Buttons dienen zur Bedienung der grafischen Benutzer-Schnittstelle im Client und verursachen KEINE unwiderrufliche Datenmanipulationen auf Seiten des Servers.<br>Aus diesem Grunde wird die Klasse <b>«.neutral»</b> bereitgestellt.</p> |
|
58 |
<div class="buttons"> |
|
59 |
<input type="reset" value="Zurücksetzen" class="neutral wi-normal"> |
|
60 |
<input type="reset" value="Zurücksetzen" class="neutral-hover wi-normal"> |
|
61 |
<input type="reset" value="Zurücksetzen" class="neutral-active wi-normal"> (INPUT[submit].neutral-Tag) <br> |
|
62 |
<button class="neutral wi-normal">Details anzeigen</button> |
|
63 |
<button class="neutral-hover wi-normal">Details anzeigen</button> |
|
64 |
<button class="neutral-active wi-normal">Details anzeigen</button> (BUTTON.neutral-Tag)<br> |
|
65 |
<a href="#" class="button neutral wi-normal">Filter anzeigen</a> |
|
66 |
<a href="#" class="button neutral-hover wi-normal">Filter anzeigen</a> |
|
67 |
<a href="#" class="button neutral-active wi-normal">Filter anzeigen</a> (A.button.neutral-Tag)<br> |
|
68 |
</div><!-- ./buttons --> |
|
69 |
</form> |
|
70 |
|
|
71 |
<h2>Nachrichten (Messages)</h2> |
|
72 |
<p>Es gibt zwei ggf. sogar drei Message-<b>Container-Varianten</b> in Kivitendo:</p> |
|
73 |
<ul> |
|
74 |
<li>Flash_Messages</li> |
|
75 |
<li>Old_Style</li> |
|
76 |
</ul> |
|
77 |
<p>Dann gibt es mind. 4 <b>Message-Arten</b>:</p> |
|
78 |
<ul> |
|
79 |
<li>Error</li> |
|
80 |
<li>Warning</li> |
|
81 |
<li>Info oder Hint</li> |
|
82 |
<li>OK</li> |
|
83 |
</ul> |
|
84 |
<p>Nachfolgend werden jeweils zuerst die komplexen Flash-Messages, dann die einfachen Old Style-Messages in P- & DIV-Containern aufgeführt.</p> |
|
85 |
|
|
86 |
|
|
87 |
<h3>Error</h3> |
|
88 |
|
|
89 |
<p>Fehlermeldung, die ein Grund zur Sorge sein sollten. Diese Nachrichten-Art nur in schwerwiegenden Fällen einsetzen, damit der Benutzer sofort erkennt, dass was schiefgelaufen ist.</p> |
|
90 |
<div id="flash_error" class="flash_message flash_message_error"> |
|
91 |
<div class="button-container"> |
|
92 |
<a href="#flash_error" style="float:right" class="icon-close button wi-tiny">✕</a> |
|
93 |
<span id="flash_error_disp" class="display" style="float:left;"> |
|
94 |
<a href="#flash_error" style="float:left;" onclick="$('#flash_detail_error').toggle();" class="button wi-tiny">Details</a> |
|
95 |
</span> |
|
96 |
</div> |
|
97 |
<div class="message-container"> |
|
98 |
<span class="flash_title" style="float:left;">Fehler:</span> |
|
99 |
<div class="flash_notification" style="float:left;"> |
|
100 |
<span id="flash_error_content" class="content">Es ist ein schwerwiegender Fehler aufgetreten!</span> |
|
101 |
<div id="flash_detail_error" class="detail" style="display:none;"> |
|
102 |
<span id="flash_error_detail">Details zum aufgetretenen, schwerwiegenden Fehler. Hierbei handelt es sich aber nicht um einen Rechtschreibefehler.</span> |
|
103 |
<a href="#flash_error" style="float:left" onclick="$('#flash_detail_error').hide()" class="icon-close button wi-tiny">✕</a> |
|
104 |
</div> |
|
105 |
</div> |
|
106 |
</div> |
|
107 |
</div> |
|
108 |
<p class="message message_error">Es ist ein Fehler aufgetreten! (P.message_error)</p> |
|
109 |
<div class="message message_error">Es ist ein Fehler aufgetreten! (DIV.message_error)</div> |
|
110 |
|
|
111 |
|
|
112 |
<h3>Warning</h3> |
|
113 |
|
|
114 |
<p>Wichtige Mitteilung, die aber kein Grund zur Sorge geben sollte. Diese Nachricht unterstützt den Benutzer bei kritischen Prozessen, sollte ihn aber bei täglichem Einsatz nicht von der Arbeit abhalten.</p> |
|
115 |
<div id="flash_warning" class="flash_message flash_message_warning"> |
|
116 |
<div class="button-container"> |
|
117 |
<a href="#flash_warning" style="float:right" class="icon-close button wi-tiny">✕</a> |
|
118 |
<span id="flash_warning_disp" class="display" style="float:left;"> |
|
119 |
<a href="#flash_warning" style="float:left;" onclick="$('#flash_detail_warning').toggle();" class="button wi-tiny">Details</a> |
|
120 |
</span> |
|
121 |
</div> |
|
122 |
<div class="message-container"> |
|
123 |
<span class="flash_title" style="float:left;">Warnung:</span> |
|
124 |
<div class="flash_notification" style="float:left;"> |
|
125 |
<span id="flash_warning_content" class="content">Diesen Hinweis sollten Sie ernst nehmen, aber es besteht beim Lesen noch kein Grund zur Beunruhigung.</span> |
|
126 |
<div id="flash_detail_warning" class="detail" style="display:none;"> |
|
127 |
<span id="flash_warning_detail">Sie sollten diesen Hinweis ernst nehmen, und vielleicht kommt er Ihnen auch hinlänglich bekannt vor, sodass Sie wissen, wie Sie damit umzugehen haben. Sie sollten sich darüber im Klaren sein, was diese Warnung bedeutet.</span> |
|
128 |
<a href="#flash_warning" style="float:left" onclick="$('#flash_detail_warning').hide()" class="icon-close button wi-tiny">✕</a> |
|
129 |
</div> |
|
130 |
</div> |
|
131 |
</div> |
|
132 |
</div> |
|
133 |
<p class="message message_warning">Achtung, wichtiger Hinweis! (P.message_warning)</p> |
|
134 |
<div class="message message_warning">Achtung, wichtiger Hinweis! (DIV.message_warning)</div> |
|
135 |
|
|
136 |
|
|
137 |
<h3>Info / Hint</h3> |
|
138 |
|
|
139 |
<p>Hier handelt es sich eher um neutrale, ggf. zu ignorierende Routine-Nachrichten, die den Benutzer auch eine gewisse Sicherheit geben sollten. Nicht im Übermass einsetzen, da die Benutzer das Kivitendo-System u.U. täglich bedienen müssen.</p> |
|
140 |
<div id="flash_info" class="flash_message flash_message_info"> |
|
141 |
<div class="button-container"> |
|
142 |
<a href="#flash_info" style="float:right" class="icon-close button wi-tiny">✕</a> |
|
143 |
<span id="flash_info_disp" class="display" style="float:left;"> |
|
144 |
<a href="#flash_info" style="float:left;" onclick="$('#flash_detail_info').toggle();" class="button wi-tiny"> Details </a> |
|
145 |
</span> |
|
146 |
</div> |
|
147 |
<div class="message-container"> |
|
148 |
<span class="flash_title" style="float:left;">Information:</span> |
|
149 |
<div class="flash_notification" style="float:left;"> |
|
150 |
<span id="flash_info_content" class="content">Absolut kein Grund zur Beunruhigung, aber lesen sollten Sie die Nachricht vielleicht einmal in Ihrem Leben.</span> |
|
151 |
<div id="flash_detail_info" class="detail" style="display:none;"> |
|
152 |
<span id="flash_info_detail">Manchmal ist es einfacher, solche Nachrichten zu lesen als gleich das Manual durchrackern zu müssen, was sowieso nur wenige Prozent der Kivitendo-Nutzer machen, ausser eben die karrierebewussten Anwender oder die innerbetrieblich Verantwortlichen.</span> |
|
153 |
<a href="#flash_info" style="float:left" onclick="$('#flash_detail_info').hide()" class="icon-close button wi-tiny">✕</a> |
|
154 |
</div> |
|
155 |
</div> |
|
156 |
</div> |
|
157 |
</div> |
|
158 |
<p class="message message_hint">Es wurden keine Dokumente gefunden, was durchaus korrekt sein kann! (P.message_<b>hint</b>)</p> |
|
159 |
<div class="message message_hint">Die Buchungen sind noch nicht abgespeichert worden! (DIV.message_<b>hint</b>)</div> |
|
160 |
|
|
161 |
|
|
162 |
<h3>OK</h3> |
|
163 |
|
|
164 |
<p>Reine Info, die man getrost ignorieren könnte oder dürfte, aber dem Benutzer die Gewissheit gibt, dass der ausgeführte Prozess erfolgreich abgelaufen ist.</p> |
|
165 |
<div id="flash_ok" class="flash_message flash_message_ok"> |
|
166 |
<div class="button-container"> |
|
167 |
<a href="#flash_ok" style="float:right" class="icon-close button wi-tiny">✕</a> |
|
168 |
<span id="flash_ok_disp" class="display" style="float:left;"> |
|
169 |
<a href="#flash_ok" style="float:left;" onclick="$('#flash_detail_ok').toggle();" class="button wi-tiny">Details</a> |
|
170 |
</span> |
|
171 |
</div> |
|
172 |
<div class="message-container"> |
|
173 |
<span class="flash_title" style="float:left;">OK:</span> |
|
174 |
<div class="flash_notification" style="float:left;"> |
|
175 |
<span id="flash_ok_content" class="content">Sie haben erfolgreich einen Prozess ausführen lassen, gratuliere.</span> |
|
176 |
<div id="flash_detail_ok" class="detail" style="display:none;"> |
|
177 |
<span id="flash_ok_detail">Das ist aber noch kein Grund zur Freude. Lesen Sie doch bitte hier, was es im weiteren zu beachten gibt.</span> |
|
178 |
<a href="#flash_ok" style="float:left" onclick="$('#flash_detail_ok').hide()" class="icon-close button wi-tiny">✕</a> |
|
179 |
</div> |
|
180 |
</div> |
|
181 |
</div> |
|
182 |
</div> |
|
183 |
<p class="message message_ok">Achtung, wichtiger Hinweis! (P.message_ok)</p> |
|
184 |
<div class="message message_ok">Achtung, wichtiger Hinweis! (DIV.message_ok)</div> |
|
185 |
|
|
186 |
|
|
187 |
</div> |
|
188 |
</body> |
|
189 |
</html> |
css/developement/form-elements-special.html | ||
---|---|---|
1 |
<!DOCTYPE html> |
|
2 |
<html lang="de"> |
|
3 |
<head> |
|
4 |
<meta charset="utf-8" /> |
|
5 |
<link href="../style.css" rel="stylesheet"> |
|
6 |
|
|
7 |
<script type="text/javascript" src="/js/jquery.js"></script> |
|
8 |
<script type="text/javascript" src="/js/common.js"></script> |
|
9 |
<script type="text/javascript" src="/js/namespace.js"></script> |
|
10 |
<script type="text/javascript" src="/js/kivi.js"></script> |
|
11 |
<script type="text/javascript" src="/js/locale/de.js"></script> |
|
12 |
<script type="text/javascript" src="/js/jquery-ui.js"></script> |
|
13 |
<script type="text/javascript" src="/js/kivi.QuickSearch.js"></script> |
|
14 |
<script type="text/javascript" src="/js/kivi.ActionBar.js"></script> |
|
15 |
<script type="text/javascript" src="/js/kivi.Draft.js"></script> |
|
16 |
<script type="text/javascript" src="/js/kivi.File.js"></script> |
|
17 |
<script type="text/javascript" src="/js/kivi.SalesPurchase.js"></script> |
|
18 |
<script type="text/javascript" src="/js/kivi.Part.js"></script> |
|
19 |
<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script> |
|
20 |
<script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script> |
|
21 |
<script type="text/javascript" src="/js/kivi.io.js"></script> |
|
22 |
<script type="text/javascript" src="/js/autocomplete_customer.js"></script> |
|
23 |
<script type="text/javascript" src="/js/client_js.js"></script> |
|
24 |
<script type="text/javascript" src="/js/jquery.cookie.js"></script> |
|
25 |
<script type="text/javascript" src="/js/jquery.checkall.js"></script> |
|
26 |
<script type="text/javascript" src="/js/jquery.download.js"></script> |
|
27 |
<script type="text/javascript" src="/js/jquery/jquery.form.js"></script> |
|
28 |
<script type="text/javascript" src="/js/jquery/fixes.js"></script> |
|
29 |
<script type="text/javascript" src="/js/jquery/jquery.tooltipster.min.js"></script> |
|
30 |
<script type="text/javascript" src="/js/jquery/ui/i18n/jquery.ui.datepicker-de.js"></script> |
|
31 |
<script type="text/javascript" src="/js/jquery.multiselect2side.js"></script> |
|
32 |
<script type="text/javascript" src="/js/jquery.selectboxes.js"> |
|
33 |
|
|
34 |
</script> |
|
35 |
|
|
36 |
<title>Spezielle Formular-Elemente</title> |
|
37 |
</head> |
|
38 |
<body class="developing"> |
|
39 |
<header> |
|
40 |
<h1>Spezielle Formular-Elemente</h1> |
|
41 |
<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav> |
|
42 |
</header> |
|
43 |
<form action="#"> |
|
44 |
|
|
45 |
<div class="wrapper"> |
|
46 |
|
|
47 |
|
|
48 |
<div class="col"> |
|
49 |
<h2>ms2side (.ms2side / MultiSelect2Side)</h2> |
|
50 |
|
|
51 |
<div class="ms2side"> |
|
52 |
<p>Folgende Elemente können einer Gruppe zugeordnet werden:</p> |
|
53 |
<!-- vormals:.clearfix --> |
|
54 |
<select name="group_usersms2side__orig" multiple="" id="group_users" style="display: none;"> |
|
55 |
<option value="2">Element 2</option> |
|
56 |
<option value="1">Element 1</option> |
|
57 |
</select> |
|
58 |
<script type="text/javascript"> |
|
59 |
$().ready(function() { |
|
60 |
$('#group_users').multiselect2side({ moveOptions: false, labeldx: "Gruppenmitglieder", labelsx: "Alle BenutzerInnen" }); |
|
61 |
}); |
|
62 |
</script> |
|
63 |
<div class="ms2side__div"> |
|
64 |
<div class="ms2side__select"> |
|
65 |
<div class="ms2side__header"> |
|
66 |
Alle verfügbaren Elemente |
|
67 |
</div> |
|
68 |
<select title="Alle BenutzerInnen" name="group_usersms2side__sx" id="group_usersms2side__sx" size="undefined" multiple="multiple"> |
|
69 |
<option value="2">Element 2</option> |
|
70 |
<option value="1">Element 1</option> |
|
71 |
</select> |
|
72 |
</div> |
|
73 |
<div class="ms2side__options" style="padding-top: 7.333333492279053px;"> |
|
74 |
<p class="AddOne ms2side__hide" title="Add Selected">›</p> |
|
75 |
<p class="AddAll" title="Add All">»</p> |
|
76 |
<p class="RemoveOne ms2side__hide" title="Remove Selected">‹</p> |
|
77 |
<p class="RemoveAll ms2side__hide" title="Remove All">«</p> |
|
78 |
</div> |
|
79 |
<div class="ms2side__select"> |
|
80 |
<div class="ms2side__header"> |
|
81 |
Zugeordnete Elemente |
|
82 |
</div> |
|
83 |
<select title="Gruppenmitglieder" name="group_usersms2side__dx" id="group_usersms2side__dx" size="undefined" multiple="multiple"> |
|
84 |
</select> |
|
85 |
</div> |
|
86 |
<span id="group_usersms2side_hidden" style="display: none;"></span> |
|
87 |
</div> |
|
88 |
<script type="text/javascript"> |
|
89 |
$().ready(function() { |
|
90 |
$('#group_clients').multiselect2side({ moveOptions: false, labeldx: "Mandanten, für die diese Gruppe gültig ist", labelsx: "Alle Mandanten" }); |
|
91 |
}); |
|
92 |
</script> |
|
93 |
|
|
94 |
</div> |
|
95 |
|
|
96 |
<div class="buttons"> |
|
97 |
<a class="button neutral" href="#">Zurück</a> |
|
98 |
<input value="Speichern" type="button"> |
|
99 |
</div> |
|
100 |
|
|
101 |
</div> |
|
102 |
|
|
103 |
|
|
104 |
|
|
105 |
<div class="col wi-wide"> |
|
106 |
<h2>Boxes (.boxes)</h2> |
|
107 |
<div class="boxes"> |
|
108 |
<h3 title="Select/Deselect all"><input title="Select/Deselect" value="1" name="dummy1" type="checkbox" id="dummy1"> |
|
109 |
<label for="dummy1">Überschrift (Select all)</label> |
|
110 |
<script type="text/javascript">$('#dummy1').checkall('.checkallgroup1');</script> |
|
111 |
</h3> |
|
112 |
<div> |
|
113 |
<input value="1" class="checkallgroup1" id="group_rights_map_customer_vendor_edit" name="group.rights_map.customer_vendor_edit" type="checkbox"> |
|
114 |
<label for="group_rights_map_customer_vendor_edit">Option 1</label> |
|
115 |
</div> |
|
116 |
<div> |
|
117 |
<input value="1" id="group_rights_map_customer_vendor_all_edit" class="checkallgroup1" name="group.rights_map.customer_vendor_all_edit" type="checkbox"> |
|
118 |
<label for="group_rights_map_customer_vendor_all_edit">Option 2</label> |
|
119 |
</div> |
|
120 |
<div> |
|
121 |
<input value="1" name="group.rights_map.part_service_assembly_edit" id="group_rights_map_part_service_assembly_edit" type="checkbox" class="checkallgroup1"> |
|
122 |
<label for="group_rights_map_part_service_assembly_edit">Option 3</label> |
|
123 |
</div> |
|
124 |
<div> |
|
125 |
<input value="1" name="group.rights_map.part_service_assembly_details" id="group_rights_map_part_service_assembly_details" class="checkallgroup1" type="checkbox"> |
|
126 |
<label for="group_rights_map_part_service_assembly_details">Option 4</label> |
|
127 |
</div> |
|
128 |
<div> |
|
129 |
<input value="1" id="group_rights_map_project_edit" type="checkbox" name="group.rights_map.project_edit" class="checkallgroup1"> |
|
130 |
<label for="group_rights_map_project_edit">Option 4</label> |
|
131 |
</div> |
|
132 |
</div> |
|
133 |
</div> |
|
134 |
|
|
135 |
|
|
136 |
</div><!-- /.wrapper --> |
|
137 |
|
|
138 |
|
|
139 |
|
|
140 |
<div class="form-addition"> |
|
141 |
<h3 class="h4">In Bericht aufnehmen</h3> |
|
142 |
<div class="list col"> |
|
143 |
<h4> Numbers & IDs </h4> |
|
144 |
<div> |
|
145 |
<input name="l_id" id="l_id" type="checkbox" value="Y"> |
|
146 |
<label for="l_id"> Buchungsnummer </label> |
|
147 |
</div> |
|
148 |
<div> |
|
149 |
<input name="l_customernumber" id="l_customernumber" type="checkbox" value="Y" checked=""> |
|
150 |
<label for="l_customernumber"> Kundennummer </label> |
|
151 |
</div> |
|
152 |
<div> |
|
153 |
<input name="l_taxnumber" id="l_taxnumber" type="checkbox" value="Y"> |
|
154 |
<label for="l_taxnumber"> Steuernummer </label> |
|
155 |
</div> |
|
156 |
<div> |
|
157 |
<input name="l_invnumber" id="l_invnumber" type="checkbox" value="Y"> |
|
158 |
<label for="l_invnumber"> Rechnungen </label> |
|
159 |
</div> |
|
160 |
</div> |
|
161 |
<div class="list col"> |
|
162 |
<h4> Kunde </h4> |
|
163 |
<div> |
|
164 |
<input name="l_name" id="l_name" type="checkbox" value="Y" checked=""> |
|
165 |
<label for="l_name"> Kundenname </label> |
|
166 |
</div> |
|
167 |
<div> |
|
168 |
<input name="l_contact" id="l_contact" type="checkbox" value="Y" checked=""> |
|
169 |
<label for="l_contact"> Kontakt </label> |
|
170 |
</div> |
|
171 |
</div> |
|
172 |
<div class="list col"> |
|
173 |
<h4> Adresse </h4> |
|
174 |
<div> |
|
175 |
<input name="l_street" id="l_street" type="checkbox" value="Y" checked=""> |
|
176 |
<label for="l_street"> Straße </label> |
|
177 |
</div> |
|
178 |
<div> |
|
179 |
<input name="l_zipcode" id="l_zipcode" type="checkbox" value="Y" checked=""> |
|
180 |
<label for="l_zipcode"> PLZ </label> |
|
181 |
</div> |
|
182 |
<div> |
|
183 |
<input name="l_city" id="l_city" type="checkbox" value="Y" checked=""> |
|
184 |
<label for="l_city"> Stadt </label> |
|
185 |
</div> |
|
186 |
<div> |
|
187 |
<input name="l_country" id="l_country" type="checkbox" value="Y" checked=""> |
|
188 |
<label for="l_country"> Land </label> |
|
189 |
</div> |
|
190 |
<div> |
|
191 |
<input name="l_gln" id="l_gln" type="checkbox" value="Y" checked=""> |
|
192 |
<label for="l_gln"> GLN </label> |
|
193 |
</div> |
|
194 |
</div> |
|
195 |
<div class="list col"> |
|
196 |
<h4> Benutzerdefinierte Variablen </h4> |
|
197 |
<!-- PENDENT: bessere Loesung suchen --> |
|
198 |
<input type="checkbox" name="l_cvar_Geburtsdatum" id="l_cvar_Geburtsdatum" value="Y"> |
|
199 |
<label for="l_cvar_Geburtsdatum">Geburtsdatum</label> |
|
200 |
</div> |
|
201 |
</div> |
|
202 |
|
|
203 |
|
|
204 |
<div class="wrapper"> |
|
205 |
|
|
206 |
|
|
207 |
<div class="filter_toggle" style="display: block;"> |
|
208 |
<a href="#" onclick="javascript:$(".filter_toggle").toggle()" class="button toggle off neutral">Filter zeigen</a> Aktiv, Gültig |
|
209 |
</div> |
|
210 |
<div class="filter_toggle" style="display: none;"> |
|
211 |
<a href="#" onclick="javascript:$(".filter_toggle").toggle()" class="button toggle on neutral with-panel">Filter verbergen</a> |
|
212 |
<div class="filter-toggle-panel"> |
|
213 |
<table id="filter_table" class="tbl-horizontal"> |
|
214 |
<caption>Projekt</caption> |
|
215 |
<tbody> |
|
216 |
<tr> |
|
217 |
<th>Nummer</th> |
|
218 |
<td><input id="filter_projectnumber_substr_ilike" value="" class="wi-normal" name="filter.projectnumber:substr::ilike" type="text"> |
|
219 |
</td> |
|
220 |
</tr> |
|
221 |
<tr> |
|
222 |
<th>Beschreibung</th> |
|
223 |
<td><input id="filter_description_substr_ilike" value="" name="filter.description:substr::ilike" class="wi-normal initial_focus" type="text"> |
|
224 |
</td> |
|
225 |
</tr> |
|
226 |
<tr> |
|
227 |
<th>Kunde</th> |
|
228 |
<td><input type="text" class="wi-normal" name="filter.customer.name:substr::ilike" id="filter_customer_name_substr_ilike" value=""> |
|
229 |
</td> |
|
230 |
</tr> |
|
231 |
<tr> |
|
232 |
<th>Projekttyp</th> |
|
233 |
<td> |
|
234 |
<select id="filter_project_type_id" class="wi-normal" name="filter.project_type_id"> |
|
235 |
<option value=""></option> |
|
236 |
<option value="1">Standard</option> |
|
237 |
</select> |
|
238 |
</td> |
|
239 |
</tr> |
|
240 |
<tr> |
|
241 |
<th>Projektstatus</th> |
|
242 |
<td> |
|
243 |
<select id="filter_project_status_id" class="wi-normal" name="filter.project_status_id"> |
|
244 |
<option value=""></option> |
|
245 |
<option value="1">Akquise</option> |
|
246 |
<option value="2">In Planung</option> |
|
247 |
</select> |
|
248 |
</td> |
|
249 |
</tr> |
|
250 |
</tbody> |
|
251 |
</table> |
|
252 |
<table class="tbl-horizontal"> |
|
253 |
<caption>In Bericht aufnehmen</caption> |
|
254 |
<tbody> |
|
255 |
<tr> |
|
256 |
<td> |
|
257 |
<select style="width: 200px" name="filter.active" id="filter_active"> |
|
258 |
<option selected="" value="active">Aktiv</option> |
|
259 |
<option value="inactive">Inaktiv</option> |
|
260 |
</select> |
|
261 |
</td> |
|
262 |
</tr> |
|
263 |
<tr> |
|
264 |
<td> |
|
265 |
<select id="filter_valid" style="width: 200px" name="filter.valid"> |
|
266 |
<option value="valid" selected="">Gültig</option> |
|
267 |
<option value="invalid">Ungültig</option> |
|
268 |
</select> |
|
269 |
</td> |
|
270 |
</tr> |
|
271 |
<tr> |
|
272 |
<td> |
|
273 |
<select id="filter_status" style="width: 200px" name="filter.status"> |
|
274 |
<option value="all">Alle</option> |
|
275 |
<option value="orphaned">Nie benutzt</option> |
|
276 |
</select> |
|
277 |
</td> |
|
278 |
</tr> |
|
279 |
</tbody> |
|
280 |
</table> |
|
281 |
<div class="buttons"> |
|
282 |
<input type="button" onclick="$("#search_form").resetForm()" class="neutral" value="Zurücksetzen"> |
|
283 |
</div> |
|
284 |
</div> |
|
285 |
<!-- /.filter_panel --> |
|
286 |
</div> |
|
287 |
|
|
288 |
|
|
289 |
</div> |
|
290 |
|
|
291 |
|
|
292 |
|
|
293 |
|
|
294 |
|
|
295 |
|
|
296 |
|
|
297 |
</form> |
|
298 |
</body> |
|
299 |
</html> |
css/developement/form-elements.html | ||
---|---|---|
1 |
<!DOCTYPE html> |
|
2 |
<html lang="de"> |
|
3 |
<head> |
|
4 |
<meta charset="utf-8" /> |
|
5 |
<link href="../style.css" rel="stylesheet"> |
|
6 |
<title>Test und Entwicklung des Kivitendo-CSS</title> |
|
7 |
</head> |
|
8 |
<body class="developing"> |
|
9 |
<header> |
|
10 |
<h1>Kivitendo-Formular-Elemente</h1> |
|
11 |
<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav> |
|
12 |
</header> |
|
13 |
|
|
14 |
<form action="#"> |
|
15 |
|
|
16 |
|
|
17 |
|
|
18 |
|
|
19 |
<div class="wrapper"> |
|
20 |
|
|
21 |
|
|
22 |
<h2>Formular-Elemente mit Standard-Einstellungen</h2> |
|
23 |
|
|
24 |
|
|
25 |
<table class="tbl-horizontal col test"> |
|
26 |
<caption>Klassische Input-Elemente</caption> |
|
27 |
<colgroup> <col class="wi-small"><col class="wi-mediumsmall"> </colgroup> |
|
28 |
<tbody> |
|
29 |
<tr> |
|
30 |
<th>Text</th> |
|
31 |
<td><input type="text" name="input-type-text"></td> |
|
32 |
</tr> |
|
33 |
<tr> |
|
34 |
<th>Password</th> |
|
35 |
<td><input type="password" name="input-type-password"></td> |
|
36 |
</tr> |
|
37 |
<tr> |
|
38 |
<th>Checkbox</th> |
|
39 |
<td> |
|
40 |
<input type="checkbox" name="input-type-checkbox" value="cb1" id="cb1-1"><label for="cb1-1">1</label> |
|
41 |
<input type="checkbox" name="input-type-checkbox" value="cb2" id="cb1-2"><label for="cb1-2">2</label> |
|
42 |
</td> |
|
43 |
</tr> |
|
44 |
<tr> |
|
45 |
<th>Radio</th> |
|
46 |
<td> |
|
47 |
<input type="radio" name="input-type-radio" value="Yes" id="rd1-1"><label for="rd1-1">Yes</label> |
|
48 |
<input type="radio" name="input-type-radio" value="No" id="rd1-2"><label for="rd1-2">No</label> |
|
49 |
</td> |
|
50 |
</tr> |
|
51 |
<tr> |
|
52 |
<th>Submit</th> |
|
53 |
<td><input type="submit" name="sbmt1"></td> |
|
54 |
</tr> |
|
55 |
<tr> |
|
56 |
<th>Reset</th> |
|
57 |
<td><input type="reset" name="rst1"></td> |
|
58 |
</tr> |
|
59 |
<tr> |
|
60 |
<th>Button</th> |
|
61 |
<td><input type="button" name="btn1" value="Anzeigen"></td> |
|
62 |
</tr> |
|
63 |
<tr> |
|
64 |
<th>Image</th> |
|
65 |
<td><input type="image" name="input-type-image"></td> |
|
66 |
</tr> |
|
67 |
<tr> |
|
68 |
<th>File</th> |
|
69 |
<td><input type="file" name="input-type-file"></td> |
|
70 |
</tr> |
|
71 |
</tbody> |
|
72 |
</table> |
|
73 |
|
|
74 |
|
|
75 |
<table class="tbl-horizontal"> |
|
76 |
<caption>Andere Formular-Elemente</caption> |
|
77 |
<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> |
|
78 |
<tbody> |
|
79 |
<tr> |
|
80 |
<th>Select</th> |
|
81 |
<td> |
|
82 |
<select id="slct1" name="slct1"> |
|
83 |
<option value=""></option> |
|
84 |
<option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option> |
|
85 |
<option value="Douglas Rushkow" selected>Douglas Rushkow</option> |
|
86 |
<option value="Timothy Leary">Timothy Leary</option> |
|
87 |
<option value="Joseph Weizenbaum">Joseph Weizenbaum</option> |
|
88 |
</select> |
|
89 |
</td> |
|
90 |
</tr> |
|
91 |
<tr> |
|
92 |
<th>Textarea</th> |
|
93 |
<td><textarea name="txtarea1">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td> |
|
94 |
</tr> |
|
95 |
<tr> |
|
96 |
<th>Button</th> |
|
97 |
<td> |
|
98 |
<button name="bttn1-1" type="button">Type Button</button><br> |
|
99 |
<button name="bttn1-2" type="submit">Type Submit</button><br> |
|
100 |
<button name="bttn1-3" type="reset">Type Reset</button> |
|
101 |
</td> |
|
102 |
</tr> |
|
103 |
</tbody> |
|
104 |
</table> |
|
105 |
|
|
106 |
<table class="tbl-horizontal"> |
|
107 |
<caption>Neue Input-Elemente in HTML5</caption> |
|
108 |
<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> |
|
109 |
<tbody> |
|
110 |
<tr> |
|
111 |
<th>Search</th> |
|
112 |
<td><input type="search" name="input-type-search"></td> |
|
113 |
</tr> |
|
114 |
<tr> |
|
115 |
<th>Tel</th> |
|
116 |
<td><input type="tel" name="input-type-tel"></td> |
|
117 |
</tr> |
|
118 |
<tr> |
|
119 |
<th>URL</th> |
|
120 |
<td><input type="url" name="input-type-url"></td> |
|
121 |
</tr> |
|
122 |
<tr> |
|
123 |
<th>Email</th> |
|
124 |
<td><input type="email" name="input-type-email"></td> |
|
125 |
</tr> |
|
126 |
<tr> |
|
127 |
<th>Datetime</th> |
|
128 |
<td><input type="datetime" name="input-type-datetime"></td> |
|
129 |
</tr> |
|
130 |
<tr> |
|
131 |
<th>Date</th> |
|
132 |
<td><input type="date" name="input-type-date"></td> |
|
133 |
</tr> |
|
134 |
<tr> |
|
135 |
<th>Time</th> |
|
136 |
<td><input type="time" name="input-type-time"></td> |
|
137 |
</tr> |
|
138 |
<tr> |
|
139 |
<th>Month</th> |
|
140 |
<td><input type="month" name="input-type-month"></td> |
|
141 |
</tr> |
|
142 |
<tr> |
|
143 |
<th>Week</th> |
|
144 |
<td><input type="week" name="input-type-week"></td> |
|
145 |
</tr> |
|
146 |
<tr> |
|
147 |
<th>Datetime-Local</th> |
|
148 |
<td><input type="datetime-local" name="input-type-datetime-local"></td> |
|
149 |
</tr> |
|
150 |
<tr> |
|
151 |
<th>Number</th> |
|
152 |
<td><input type="number" name="input-type-number"></td> |
|
153 |
</tr> |
|
154 |
<tr> |
|
155 |
<th>Range</th> |
|
156 |
<td><input type="range" name="input-type-range"></td> |
|
157 |
</tr> |
|
158 |
<tr> |
|
159 |
<th>Color</th> |
|
160 |
<td><input type="color" name="input-type-color"></td> |
|
161 |
</tr> |
|
162 |
</tbody> |
|
163 |
</table> |
|
164 |
|
|
165 |
|
|
166 |
<table class="tbl-horizontal"> |
|
167 |
<caption>Abmessungen (Beispiel Input[type=text])</caption> |
|
168 |
<colgroup> <col class="wi-mediumsmall"><col class="wi-verysmall"><col class="wi-lightwide"> </colgroup> |
|
169 |
<tbody> |
|
170 |
<tr> |
|
171 |
<th>wi-smallest</th> |
|
172 |
<th>44px</th> |
|
173 |
<td><input type="text" name="input-type-text" class="wi-smallest"></td> |
|
174 |
</tr> |
|
175 |
<tr> |
|
176 |
<th>wi-verysmall</th> |
|
177 |
<th>63px</th> |
|
178 |
<td><input type="text" name="input-type-text" class="wi-verysmall"></td> |
|
179 |
</tr> |
|
180 |
<tr> |
|
181 |
<th>wi-small</th> |
|
182 |
<th>95px</th> |
|
183 |
<td><input type="text" name="input-type-text" class="wi-small"></td> |
|
184 |
</tr> |
|
185 |
<tr> |
|
186 |
<th>wi-mediumsmall</th> |
|
187 |
<th>121px</th> |
|
188 |
<td><input type="text" name="input-type-text" class="wi-mediumsmall"></td> |
|
189 |
</tr> |
|
190 |
<tr> |
|
191 |
<th>wi-normal</th> |
|
192 |
<th>161px</th> |
|
193 |
<td><input type="text" name="input-type-text" class="wi-normal"></td> |
|
194 |
</tr> |
|
195 |
<tr> |
|
196 |
<th>wi-lightwide</th> |
|
197 |
<th>188px</th> |
|
198 |
<td><input type="text" name="input-type-text" class="wi-lightwide"></td> |
|
199 |
</tr> |
|
200 |
<tr> |
|
201 |
<th>wi-wide</th> |
|
202 |
<th>249px</th> |
|
203 |
<td><input type="text" name="input-type-text" class="wi-wide"></td> |
|
204 |
</tr> |
|
205 |
<tr> |
|
206 |
<th>wi-wider</th> |
|
207 |
<th>329px</th> |
|
208 |
<td><input type="text" name="input-type-text" class="wi-wider"></td> |
|
209 |
</tr> |
|
210 |
<tr> |
|
211 |
<th>wi-verywide</th> |
|
212 |
<th>489px</th> |
|
213 |
<td><input type="text" name="input-type-text" class="wi-verywide"></td> |
|
214 |
</tr> |
|
215 |
</tbody> |
|
216 |
</table> |
|
217 |
|
|
218 |
</div><!-- /.wrapper --> |
|
219 |
|
|
220 |
|
|
221 |
<div class="wrapper"> |
|
222 |
|
|
223 |
|
|
224 |
<h2>Abmessungen mit assoziativen Klassennamen</h2> |
|
225 |
|
|
226 |
|
|
227 |
<table class="tbl-horizontal col"> |
|
228 |
<caption>Klasse wi-normal</caption> |
|
229 |
<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> |
|
230 |
<tbody> |
|
231 |
<tr> |
|
232 |
<th>Text</th> |
|
233 |
<td><input type="text" name="input-type-text-2" class="wi-normal"></td> |
|
234 |
</tr> |
|
235 |
<tr> |
|
236 |
<th>Password</th> |
|
237 |
<td><input type="password" name="input-type-password-2" class="wi-normal"></td> |
|
238 |
</tr> |
|
239 |
<tr> |
|
240 |
<th>Submit</th> |
|
241 |
<td><input type="submit" name="sbmt2" class="wi-normal"></td> |
|
242 |
</tr> |
|
243 |
<tr> |
|
244 |
<th>Reset</th> |
|
245 |
<td><input type="reset" name="rst2" class="wi-normal"></td> |
|
246 |
</tr> |
|
247 |
<tr> |
|
248 |
<th>Button</th> |
|
249 |
<td><input type="button" name="btn2" value="Anzeigen" class="wi-normal"></td> |
|
250 |
</tr> |
|
251 |
<tr> |
|
252 |
<th>Select</th> |
|
253 |
<td> |
|
254 |
<select id="slct1" name="slct2" class="wi-normal"> |
|
255 |
<option value=""></option> |
|
256 |
<option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option> |
|
257 |
<option value="Douglas Rushkow" selected>Douglas Rushkow</option> |
|
258 |
<option value="Timothy Leary">Timothy Leary</option> |
|
259 |
<option value="Joseph Weizenbaum">Joseph Weizenbaum</option> |
|
260 |
</select> |
|
261 |
</td> |
|
262 |
</tr> |
|
263 |
<tr> |
|
264 |
<th>Textarea</th> |
|
265 |
<td><textarea name="txtarea2" class="wi-normal">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td> |
|
266 |
</tr> |
|
267 |
<tr> |
|
268 |
<th>Button (Tag)</th> |
|
269 |
<td> |
|
270 |
<button name="bttn1-1" type="button" class="wi-normal">Type Button</button><br> |
|
271 |
<button name="bttn1-2" type="submit" class="wi-normal">Type Submit</button><br> |
|
272 |
<button name="bttn1-3" type="reset" class="wi-normal">Type Reset</button> |
|
273 |
</td> |
|
274 |
</tr> |
|
275 |
</tbody> |
|
276 |
</table> |
|
277 |
|
|
278 |
<table class="tbl-horizontal col"> |
|
279 |
<caption>Klasse wi-smallest</caption> |
|
280 |
<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> |
|
281 |
<tbody> |
|
282 |
<tr> |
|
283 |
<th>Text</th> |
|
284 |
<td><input type="text" name="input-type-text-2" class="wi-smallest"></td> |
|
285 |
</tr> |
|
286 |
<tr> |
|
287 |
<th>Password</th> |
|
288 |
<td><input type="password" name="input-type-password-2" class="wi-smallest"></td> |
|
289 |
</tr> |
|
290 |
<tr> |
|
291 |
<th>Submit</th> |
|
292 |
<td><input type="submit" name="sbmt2" class="wi-smallest"></td> |
|
293 |
</tr> |
|
294 |
<tr> |
|
295 |
<th>Reset</th> |
|
296 |
<td><input type="reset" name="rst2" class="wi-smallest"></td> |
|
297 |
</tr> |
|
298 |
<tr> |
|
299 |
<th>Button</th> |
|
300 |
<td><input type="button" name="btn2" value="Anzeigen" class="wi-smallest"></td> |
|
301 |
</tr> |
|
302 |
<tr> |
|
303 |
<th>Select</th> |
|
304 |
<td> |
|
305 |
<select id="slct1" name="slct2" class="wi-smallest"> |
|
306 |
<option value=""></option> |
|
307 |
<option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option> |
|
308 |
<option value="Douglas Rushkow" selected>Douglas Rushkow</option> |
|
309 |
<option value="Timothy Leary">Timothy Leary</option> |
|
310 |
<option value="Joseph Weizenbaum">Joseph Weizenbaum</option> |
|
311 |
</select> |
|
312 |
</td> |
|
313 |
</tr> |
|
314 |
<tr> |
|
315 |
<th>Textarea</th> |
|
316 |
<td><textarea name="txtarea2" class="wi-smallest">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td> |
|
317 |
</tr> |
|
318 |
<tr> |
|
319 |
<th>Button (Tag)</th> |
|
320 |
<td> |
|
321 |
<button name="bttn1-1" type="button" class="wi-smallest">Type Button</button><br> |
|
322 |
<button name="bttn1-2" type="submit" class="wi-smallest">Type Submit</button><br> |
|
323 |
<button name="bttn1-3" type="reset" class="wi-smallest">Type Reset</button> |
|
324 |
</td> |
|
325 |
</tr> |
|
326 |
</tbody> |
|
327 |
</table> |
|
328 |
|
|
329 |
<table class="tbl-horizontal col"> |
|
330 |
<caption>Klasse wi-verysmall</caption> |
|
331 |
<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> |
|
332 |
<tbody> |
|
333 |
<tr> |
|
334 |
<th>Text</th> |
|
335 |
<td><input type="text" name="input-type-text-2" class="wi-verysmall"></td> |
|
336 |
</tr> |
|
337 |
<tr> |
|
338 |
<th>Password</th> |
|
339 |
<td><input type="password" name="input-type-password-2" class="wi-verysmall"></td> |
|
340 |
</tr> |
|
341 |
<tr> |
|
342 |
<th>Submit</th> |
|
343 |
<td><input type="submit" name="sbmt2" class="wi-verysmall"></td> |
|
344 |
</tr> |
|
345 |
<tr> |
|
346 |
<th>Reset</th> |
|
347 |
<td><input type="reset" name="rst2" class="wi-verysmall"></td> |
|
348 |
</tr> |
|
349 |
<tr> |
|
350 |
<th>Button</th> |
|
351 |
<td><input type="button" name="btn2" value="Anzeigen" class="wi-verysmall"></td> |
|
352 |
</tr> |
|
353 |
<tr> |
|
354 |
<th>Select</th> |
|
355 |
<td> |
|
356 |
<select id="slct1" name="slct2" class="wi-verysmall"> |
|
357 |
<option value=""></option> |
|
358 |
<option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option> |
|
359 |
<option value="Douglas Rushkow" selected>Douglas Rushkow</option> |
|
360 |
<option value="Timothy Leary">Timothy Leary</option> |
|
361 |
<option value="Joseph Weizenbaum">Joseph Weizenbaum</option> |
|
362 |
</select> |
|
363 |
</td> |
|
364 |
</tr> |
|
365 |
<tr> |
|
366 |
<th>Textarea</th> |
|
367 |
<td><textarea name="txtarea2" class="wi-verysmall">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td> |
|
368 |
</tr> |
|
369 |
<tr> |
|
370 |
<th>Button (Tag)</th> |
|
371 |
<td> |
|
372 |
<button name="bttn1-1" type="button" class="wi-verysmall">Type Button</button><br> |
|
373 |
<button name="bttn1-2" type="submit" class="wi-verysmall">Type Submit</button><br> |
|
374 |
<button name="bttn1-3" type="reset" class="wi-verysmall">Type Reset</button> |
|
375 |
</td> |
|
376 |
</tr> |
|
377 |
</tbody> |
|
378 |
</table> |
|
379 |
|
|
380 |
<table class="tbl-horizontal col"> |
|
381 |
<caption>Klasse wi-small</caption> |
|
382 |
<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> |
|
383 |
<tbody> |
|
384 |
<tr> |
|
385 |
<th>Text</th> |
|
386 |
<td><input type="text" name="input-type-text-2" class="wi-small"></td> |
|
387 |
</tr> |
|
388 |
<tr> |
|
389 |
<th>Password</th> |
|
390 |
<td><input type="password" name="input-type-password-2" class="wi-small"></td> |
|
391 |
</tr> |
|
392 |
<tr> |
|
393 |
<th>Submit</th> |
|
394 |
<td><input type="submit" name="sbmt2" class="wi-small"></td> |
|
395 |
</tr> |
|
396 |
<tr> |
|
397 |
<th>Reset</th> |
|
398 |
<td><input type="reset" name="rst2" class="wi-small"></td> |
|
399 |
</tr> |
|
400 |
<tr> |
|
401 |
<th>Button</th> |
|
402 |
<td><input type="button" name="btn2" value="Anzeigen" class="wi-small"></td> |
|
403 |
</tr> |
|
404 |
<tr> |
|
405 |
<th>Select</th> |
|
406 |
<td> |
|
407 |
<select id="slct1" name="slct2" class="wi-small"> |
|
408 |
<option value=""></option> |
|
409 |
<option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option> |
|
410 |
<option value="Douglas Rushkow" selected>Douglas Rushkow</option> |
|
411 |
<option value="Timothy Leary">Timothy Leary</option> |
|
412 |
<option value="Joseph Weizenbaum">Joseph Weizenbaum</option> |
|
413 |
</select> |
|
414 |
</td> |
|
415 |
</tr> |
|
416 |
<tr> |
|
417 |
<th>Textarea</th> |
|
418 |
<td><textarea name="txtarea2" class="wi-small">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td> |
|
419 |
</tr> |
|
420 |
<tr> |
|
421 |
<th>Button (Tag)</th> |
|
422 |
<td> |
|
423 |
<button name="bttn1-1" type="button" class="wi-small">Type Button</button><br> |
|
424 |
<button name="bttn1-2" type="submit" class="wi-small">Type Submit</button><br> |
|
425 |
<button name="bttn1-3" type="reset" class="wi-small">Type Reset</button> |
|
426 |
</td> |
|
427 |
</tr> |
|
428 |
</tbody> |
|
429 |
</table> |
|
430 |
|
|
431 |
<table class="tbl-horizontal col"> |
|
432 |
<caption>Klasse wi-mediumsmall</caption> |
|
433 |
<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> |
|
434 |
<tbody> |
|
435 |
<tr> |
|
436 |
<th>Text</th> |
|
437 |
<td><input type="text" name="input-type-text-2" class="wi-mediumsmall"></td> |
|
438 |
</tr> |
|
439 |
<tr> |
|
440 |
<th>Password</th> |
|
441 |
<td><input type="password" name="input-type-password-2" class="wi-mediumsmall"></td> |
|
442 |
</tr> |
|
443 |
<tr> |
|
444 |
<th>Submit</th> |
|
445 |
<td><input type="submit" name="sbmt2" class="wi-mediumsmall"></td> |
|
446 |
</tr> |
|
447 |
<tr> |
|
448 |
<th>Reset</th> |
|
449 |
<td><input type="reset" name="rst2" class="wi-mediumsmall"></td> |
|
450 |
</tr> |
|
451 |
<tr> |
|
452 |
<th>Button</th> |
|
453 |
<td><input type="button" name="btn2" value="Anzeigen" class="wi-mediumsmall"></td> |
|
454 |
</tr> |
|
455 |
<tr> |
|
456 |
<th>Select</th> |
|
457 |
<td> |
|
458 |
<select id="slct1" name="slct2" class="wi-mediumsmall"> |
|
459 |
<option value=""></option> |
|
460 |
<option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option> |
|
461 |
<option value="Douglas Rushkow" selected>Douglas Rushkow</option> |
|
462 |
<option value="Timothy Leary">Timothy Leary</option> |
|
463 |
<option value="Joseph Weizenbaum">Joseph Weizenbaum</option> |
|
464 |
</select> |
|
465 |
</td> |
|
466 |
</tr> |
|
467 |
<tr> |
|
468 |
<th>Textarea</th> |
|
469 |
<td><textarea name="txtarea2" class="wi-mediumsmall">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td> |
|
470 |
</tr> |
|
471 |
<tr> |
|
472 |
<th>Button (Tag)</th> |
|
473 |
<td> |
|
474 |
<button name="bttn1-1" type="button" class="wi-mediumsmall">Type Button</button><br> |
|
475 |
<button name="bttn1-2" type="submit" class="wi-mediumsmall">Type Submit</button><br> |
|
476 |
<button name="bttn1-3" type="reset" class="wi-mediumsmall">Type Reset</button> |
|
477 |
</td> |
|
478 |
</tr> |
|
479 |
</tbody> |
|
480 |
</table> |
|
481 |
|
|
482 |
<table class="tbl-horizontal col"> |
|
483 |
<caption>Klasse wi-lightwide</caption> |
|
484 |
<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> |
|
485 |
<tbody> |
|
486 |
<tr> |
|
487 |
<th>Text</th> |
|
488 |
<td><input type="text" name="input-type-text-2" class="wi-lightwide"></td> |
|
489 |
</tr> |
|
490 |
<tr> |
|
491 |
<th>Password</th> |
|
492 |
<td><input type="password" name="input-type-password-2" class="wi-lightwide"></td> |
|
493 |
</tr> |
|
494 |
<tr> |
|
495 |
<th>Submit</th> |
|
496 |
<td><input type="submit" name="sbmt2" class="wi-lightwide"></td> |
|
497 |
</tr> |
|
498 |
<tr> |
|
499 |
<th>Reset</th> |
|
500 |
<td><input type="reset" name="rst2" class="wi-lightwide"></td> |
|
501 |
</tr> |
|
502 |
<tr> |
|
503 |
<th>Button</th> |
|
504 |
<td><input type="button" name="btn2" value="Anzeigen" class="wi-lightwide"></td> |
|
505 |
</tr> |
|
506 |
<tr> |
|
507 |
<th>Select</th> |
|
508 |
<td> |
|
509 |
<select id="slct1" name="slct2" class="wi-lightwide"> |
|
510 |
<option value=""></option> |
|
511 |
<option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option> |
|
512 |
<option value="Douglas Rushkow" selected>Douglas Rushkow</option> |
|
513 |
<option value="Timothy Leary">Timothy Leary</option> |
|
514 |
<option value="Joseph Weizenbaum">Joseph Weizenbaum</option> |
|
515 |
</select> |
|
516 |
</td> |
|
517 |
</tr> |
|
518 |
<tr> |
|
519 |
<th>Textarea</th> |
|
520 |
<td><textarea name="txtarea2" class="wi-lightwide">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td> |
|
521 |
</tr> |
|
522 |
<tr> |
|
523 |
<th>Button (Tag)</th> |
|
524 |
<td> |
|
525 |
<button name="bttn1-1" type="button" class="wi-lightwide">Type Button</button><br> |
|
526 |
<button name="bttn1-2" type="submit" class="wi-lightwide">Type Submit</button><br> |
|
527 |
<button name="bttn1-3" type="reset" class="wi-lightwide">Type Reset</button> |
|
528 |
</td> |
|
529 |
</tr> |
|
530 |
</tbody> |
|
531 |
</table> |
|
532 |
|
|
533 |
<table class="tbl-horizontal col"> |
|
534 |
<caption>Klasse wi-wide</caption> |
|
535 |
<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> |
|
536 |
<tbody> |
|
537 |
<tr> |
|
538 |
<th>Text</th> |
|
539 |
<td><input type="text" name="input-type-text-2" class="wi-wide"></td> |
|
540 |
</tr> |
|
541 |
<tr> |
|
542 |
<th>Password</th> |
|
543 |
<td><input type="password" name="input-type-password-2" class="wi-wide"></td> |
|
544 |
</tr> |
|
545 |
<tr> |
|
546 |
<th>Submit</th> |
|
547 |
<td><input type="submit" name="sbmt2" class="wi-wide"></td> |
|
548 |
</tr> |
|
549 |
<tr> |
|
550 |
<th>Reset</th> |
|
551 |
<td><input type="reset" name="rst2" class="wi-wide"></td> |
|
552 |
</tr> |
|
553 |
<tr> |
|
554 |
<th>Button</th> |
|
555 |
<td><input type="button" name="btn2" value="Anzeigen" class="wi-wide"></td> |
|
556 |
</tr> |
|
557 |
<tr> |
|
558 |
<th>Select</th> |
|
559 |
<td> |
|
560 |
<select id="slct1" name="slct2" class="wi-wide"> |
|
561 |
<option value=""></option> |
|
562 |
<option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option> |
|
563 |
<option value="Douglas Rushkow" selected>Douglas Rushkow</option> |
|
564 |
<option value="Timothy Leary">Timothy Leary</option> |
|
565 |
<option value="Joseph Weizenbaum">Joseph Weizenbaum</option> |
|
566 |
</select> |
|
567 |
</td> |
|
568 |
</tr> |
|
569 |
<tr> |
|
570 |
<th>Textarea</th> |
|
571 |
<td><textarea name="txtarea2" class="wi-wide">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td> |
|
572 |
</tr> |
|
573 |
<tr> |
|
574 |
<th>Button (Tag)</th> |
|
575 |
<td> |
|
576 |
<button name="bttn1-1" type="button" class="wi-wide">Type Button</button><br> |
|
577 |
<button name="bttn1-2" type="submit" class="wi-wide">Type Submit</button><br> |
|
578 |
<button name="bttn1-3" type="reset" class="wi-wide">Type Reset</button> |
|
579 |
</td> |
|
580 |
</tr> |
|
581 |
</tbody> |
|
582 |
</table> |
|
583 |
|
|
584 |
<table class="tbl-horizontal col"> |
|
585 |
<caption>Klasse wi-wider</caption> |
|
586 |
<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> |
|
587 |
<tbody> |
|
588 |
<tr> |
|
589 |
<th>Text</th> |
|
590 |
<td><input type="text" name="input-type-text-2" class="wi-wider"></td> |
|
591 |
</tr> |
|
592 |
<tr> |
|
593 |
<th>Password</th> |
|
594 |
<td><input type="password" name="input-type-password-2" class="wi-wider"></td> |
|
595 |
</tr> |
|
596 |
<tr> |
|
597 |
<th>Submit</th> |
|
598 |
<td><input type="submit" name="sbmt2" class="wi-wider"></td> |
|
599 |
</tr> |
|
600 |
<tr> |
|
601 |
<th>Reset</th> |
|
602 |
<td><input type="reset" name="rst2" class="wi-wider"></td> |
|
603 |
</tr> |
|
604 |
<tr> |
|
605 |
<th>Button</th> |
|
606 |
<td><input type="button" name="btn2" value="Anzeigen" class="wi-wider"></td> |
|
607 |
</tr> |
|
608 |
<tr> |
|
609 |
<th>Select</th> |
|
610 |
<td> |
|
611 |
<select id="slct1" name="slct2" class="wi-wider"> |
|
612 |
<option value=""></option> |
|
613 |
<option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option> |
|
614 |
<option value="Douglas Rushkow" selected>Douglas Rushkow</option> |
|
615 |
<option value="Timothy Leary">Timothy Leary</option> |
|
616 |
<option value="Joseph Weizenbaum">Joseph Weizenbaum</option> |
|
617 |
</select> |
|
618 |
</td> |
|
619 |
</tr> |
|
620 |
<tr> |
|
621 |
<th>Textarea</th> |
|
622 |
<td><textarea name="txtarea2" class="wi-wider">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td> |
|
623 |
</tr> |
|
624 |
<tr> |
|
625 |
<th>Button (Tag)</th> |
|
626 |
<td> |
|
627 |
<button name="bttn1-1" type="button" class="wi-wider">Type Button</button><br> |
|
628 |
<button name="bttn1-2" type="submit" class="wi-wider">Type Submit</button><br> |
|
629 |
<button name="bttn1-3" type="reset" class="wi-wider">Type Reset</button> |
|
630 |
</td> |
|
631 |
</tr> |
|
632 |
</tbody> |
|
633 |
</table> |
|
634 |
|
|
635 |
<table class="tbl-horizontal col"> |
|
636 |
<caption>Klasse wi-verywide</caption> |
|
637 |
<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> |
|
638 |
<tbody> |
|
639 |
<tr> |
|
640 |
<th>Text</th> |
|
641 |
<td><input type="text" name="input-type-text-2" class="wi-verywide"></td> |
|
642 |
</tr> |
|
643 |
<tr> |
|
644 |
<th>Password</th> |
|
645 |
<td><input type="password" name="input-type-password-2" class="wi-verywide"></td> |
|
646 |
</tr> |
|
647 |
<tr> |
|
648 |
<th>Submit</th> |
|
649 |
<td><input type="submit" name="sbmt2" class="wi-verywide"></td> |
|
650 |
</tr> |
|
651 |
<tr> |
|
652 |
<th>Reset</th> |
|
653 |
<td><input type="reset" name="rst2" class="wi-verywide"></td> |
|
654 |
</tr> |
|
655 |
<tr> |
|
656 |
<th>Button</th> |
|
657 |
<td><input type="button" name="btn2" value="Anzeigen" class="wi-verywide"></td> |
|
658 |
</tr> |
|
659 |
<tr> |
|
660 |
<th>Select</th> |
|
661 |
<td> |
|
662 |
<select id="slct1" name="slct2" class="wi-verywide"> |
|
663 |
<option value=""></option> |
|
664 |
<option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option> |
|
665 |
<option value="Douglas Rushkow" selected>Douglas Rushkow</option> |
|
666 |
<option value="Timothy Leary">Timothy Leary</option> |
|
667 |
<option value="Joseph Weizenbaum">Joseph Weizenbaum</option> |
|
668 |
</select> |
|
669 |
</td> |
|
670 |
</tr> |
|
671 |
<tr> |
|
672 |
<th>Textarea</th> |
|
673 |
<td><textarea name="txtarea2" class="wi-verywide">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td> |
|
674 |
</tr> |
|
675 |
<tr> |
|
676 |
<th>Button (Tag)</th> |
|
677 |
<td> |
|
678 |
<button name="bttn1-1" type="button" class="wi-verywide">Type Button</button><br> |
|
679 |
<button name="bttn1-2" type="submit" class="wi-verywide">Type Submit</button><br> |
|
680 |
<button name="bttn1-3" type="reset" class="wi-verywide">Type Reset</button> |
|
681 |
</td> |
|
682 |
</tr> |
|
683 |
</tbody> |
|
684 |
</table> |
|
685 |
|
|
686 |
|
|
687 |
|
|
688 |
|
|
689 |
|
|
690 |
</div> |
|
691 |
|
|
692 |
|
|
693 |
|
|
694 |
|
|
695 |
|
|
696 |
</form> |
|
697 |
|
|
698 |
</body> |
|
699 |
</html> |
css/developement/index.html | ||
---|---|---|
1 |
<!DOCTYPE html> |
|
2 |
<html lang="de"> |
|
3 |
<head> |
|
4 |
<meta charset="utf-8" /> |
|
5 |
<link href="../style.css" rel="stylesheet"> |
|
6 |
<title>Test und Entwicklung des Kivitendo-CSS</title> |
|
7 |
</head> |
|
8 |
<body class="developing"> |
|
9 |
<div class="wrapper"> |
|
10 |
<header> |
|
11 |
<h1>Entwicklung & Dokumentation des Kivitendo-CSS</h1> |
Auch abrufbar als: Unified diff
Aenderungen hpschlaepfer