https://khang-nd.github.io/7.css/#intro7.css is a CSS framework for building interface components that look like Windows 7.
Code: Select all
EnableExplicit
! $("head").append("<link rel='stylesheet' href='https://unpkg.com/7.css'>");
Define HTML.s = "<div class='window' style='max-width: 400px'>" +
" <div class='title-bar'>" +
" <div class='title-bar-text'>Another window with contents</div>" +
" <div class='title-bar-controls'>" +
" <button aria-label='Minimize'></button>" +
" <button aria-label='Maximize'></button>" +
" <button aria-label='Close'></button>" +
" </div>" +
" </div>" +
" <div class='window-body'>" +
" <menu role='tablist' aria-label='Sample Tabs'>" +
" <button role='tab' aria-controls='tab-A' aria-selected='true'>Instruction</button>" +
" <button role='tab' aria-controls='tab-B'>Example</button>" +
" <button role='tab' aria-controls='tab-C'>More instruction</button>" +
" <button role='tab' aria-controls='tab-D' disabled>Disabled Tab</button>" +
" </menu>" +
" <!-- the tab content -->" +
" <article role='tabpanel' id='tab-A'>" +
" <b>Creating tabs</b>" +
" <p>" +
" To create a tab, use a <code>menu</code> element with <code>role='tablist'</code>." +
" Then for the tab titles, use a <code>button</code> with <code>role='tab'</code>, and set the <code>aria-controls</code> attribute to" +
" the corresponding id of the element with <code>role='tabpanel'</code>." +
" </p>" +
" <p>" +
" Read more at <a href='https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role' target='_blank'>MDN Web docs - ARIA: tab role</a>" +
" </p>" +
" </article>" +
" <article role='tabpanel' id='tab-B' hidden>" +
" <b>More...</b>" +
" <p>This tab contains a GroupBox</p>" +
" <fieldset>" +
" <legend>Today's mood</legend>" +
" <div class='field-row'>" +
" <input id='radio17' type='radio' name='fieldset-example2'>" +
" <label for='radio17'>Claire Saffitz</label>" +
" </div>" +
" <div class='field-row'>" +
" <input id='radio18' type='radio' name='fieldset-example2'>" +
" <label for='radio18'>Brad Leone</label>" +
" </div>" +
" <div class='field-row'>" +
" <input id='radio19' type='radio' name='fieldset-example2'>" +
" <label for='radio19'>Chris Morocco</label>" +
" </div>" +
" <div class='field-row'>" +
" <input id='radio20' type='radio' name='fieldset-example2'>" +
" <label for='radio20'>Carla Lalli Music</label>" +
" </div>" +
" </fieldset>" +
" </article>" +
" <article role='tabpanel' id='tab-C' hidden>" +
" <b>Disabling tabs</b>" +
" <p>Simply add a <code>disabled</code> attribute on the tab.</p>" +
" </article>" +
" <article role='tabpanel' id='tab-D' hidden>" +
" <b>Disabled Tab</b>" +
" <p>This tab is disabled, so you should not be able to read this.</p>" +
" </article>"+
" <section class='field-row' style='justify-content: flex-end'>" +
" <button>OK</button>" +
" <button>Cancel</button>" +
" </section>" +
" </div>" +
"</div>"
! $("body").append(v_html);
! $(".window").draggable({ handle: ".title-bar" });
! // https://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen
! $('.window').css({top:'50%',left:'50%',margin:'-'+($('.window').height() / 2)+'px 0 0 -'+($('.window').width() / 2)+'px'});
! const tabButtons = document.querySelectorAll("[role=tab]");
! tabButtons.forEach((tabButton) => {
! tabButton.addEventListener("click", (e) => {
! e.preventDefault();
! const tabContainer = e.target.parentElement.parentElement;
! const targetId = e.target.getAttribute("aria-controls");
! tabButtons.forEach((_tabButton) => _tabButton.setAttribute("aria-selected", false));
! tabButton.setAttribute("aria-selected", true);
! tabContainer.querySelectorAll("[role=tabpanel]").forEach((tabPanel) => tabPanel.setAttribute("hidden", true));
! tabContainer.querySelector(`[role=tabpanel]#${targetId}`).removeAttribute("hidden");
! });
! });