Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

57
LINES

< > BotCompany Repo | #1030927 // HTMLTabs

JavaX fragment (include) [tags: use-pretranspiled]

Libraryless. Click here for Pure Java version (3338L/20K).

// needs JQuery
sclass HTMLTabs {
  S id = "tabs_" + aGlobalID();
  new L<Tab> tabs;
  
  class Tab {
    S id = aGlobalID();
    S label;
    S contents;
    
    *(S *label, S *contents) {}
  }
  
  S css() {
    ret [[
      .tab-selectors {
        display: flex;
      }
      
      .tab-selector {
        flex: 1;
        cursor: pointer;
        margin: 2px 2px;
      }
      
      .tab-selectors .selected {
        font-weight: bold;
        background: #add8e6;
      }
      
      .tabs-container {
         border-radius: 25px;
         border: 2px solid #73AD21;
         padding: 20px;
      }
    ]];
  }
  
  S html() {
    ret hcss(css()) + div(
      div(mapToLines(tabs, tab ->
        div(tab.label, class := "tab-selector" + stringIf(tab == first(tabs), " selected"), onclick :=
            "$(" + jsQuote("#" + id + " .tab-selector") + ").removeClass('selected'); " 
          + "$(this).addClass('selected'); "
          + "$(" + jsQuote("#" + id + " .tab-page") + ").hide(); "
          + "$(" + jsQuote("#" + tab.id) + ").show();"))
      , class := "tab-selectors")
      + mapToLines(tabs, tab ->
        div(tab.contents, class := "tab-page", style := tab == first(tabs) ? "" : "display: none", id := tab.id)),
    +id, class := "tabs-container");
  }
  
  // label and contents are HTML
  void add(S label, O contents) {
    tabs.add(new Tab(label, strOrNull(contents)));
  }
}

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: 141 / 351
Version history: 12 change(s)
Referenced in: [show references]