Libraryless. Click here for Pure Java version (3338L/20K).
1 | // needs JQuery |
2 | sclass HTMLTabs {
|
3 | S id = "tabs_" + aGlobalID(); |
4 | new L<Tab> tabs; |
5 | |
6 | class Tab {
|
7 | S id = aGlobalID(); |
8 | S label; |
9 | S contents; |
10 | |
11 | *(S *label, S *contents) {}
|
12 | } |
13 | |
14 | S css() {
|
15 | ret [[ |
16 | .tab-selectors {
|
17 | display: flex; |
18 | } |
19 | |
20 | .tab-selector {
|
21 | flex: 1; |
22 | cursor: pointer; |
23 | margin: 2px 2px; |
24 | } |
25 | |
26 | .tab-selectors .selected {
|
27 | font-weight: bold; |
28 | background: #add8e6; |
29 | } |
30 | |
31 | .tabs-container {
|
32 | border-radius: 25px; |
33 | border: 2px solid #73AD21; |
34 | padding: 20px; |
35 | } |
36 | ]]; |
37 | } |
38 | |
39 | S html() {
|
40 | ret hcss(css()) + div( |
41 | div(mapToLines(tabs, tab -> |
42 | div(tab.label, class := "tab-selector" + stringIf(tab == first(tabs), " selected"), onclick := |
43 | "$(" + jsQuote("#" + id + " .tab-selector") + ").removeClass('selected'); "
|
44 | + "$(this).addClass('selected'); "
|
45 | + "$(" + jsQuote("#" + id + " .tab-page") + ").hide(); "
|
46 | + "$(" + jsQuote("#" + tab.id) + ").show();"))
|
47 | , class := "tab-selectors") |
48 | + mapToLines(tabs, tab -> |
49 | div(tab.contents, class := "tab-page", style := tab == first(tabs) ? "" : "display: none", id := tab.id)), |
50 | +id, class := "tabs-container"); |
51 | } |
52 | |
53 | // label and contents are HTML |
54 | void add(S label, O contents) {
|
55 | tabs.add(new Tab(label, strOrNull(contents))); |
56 | } |
57 | } |
download show line numbers debug dex old transpilations
Travelled to 4 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, vouqrxazstgt
No comments. add comment
| Snippet ID: | #1030927 |
| Snippet name: | HTMLTabs |
| Eternal ID of this version: | #1030927/13 |
| Text MD5: | 74bea32a07df38986a6ddc55ba694693 |
| Transpilation MD5: | 5ae489a03af49166d3c89c4513f96d0f |
| Author: | stefan |
| Category: | javax / html |
| Type: | JavaX fragment (include) |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2021-04-16 15:24:07 |
| Source code size: | 1467 bytes / 57 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 221 / 451 |
| Version history: | 12 change(s) |
| Referenced in: | [show references] |