Mudanças entre as edições de "Widget:Teste"
Ir para navegação
Ir para pesquisar
m |
m |
||
| Linha 1: | Linha 1: | ||
<!-- Widget:Teste — CSS + JS do exemplo didático (colar na página Widget:Teste) --> | |||
<style> | <style> | ||
.teste-caixa { | .teste-caixa { | ||
border: 1px solid #444; | |||
border-radius: 6px; | |||
padding: 10px; | |||
max-width: 36em; | |||
font-family: system-ui, sans-serif; | |||
} | } | ||
.teste-caixa h3 { | |||
.teste-caixa h3 { | |||
margin: 0 0 8px; | |||
} | font-size: 1.1em; | ||
.teste-caixa .teste-corpo { | } | ||
} | .teste-caixa .teste-corpo { | ||
.teste-caixa .teste-corpo.teste-colapsado { | margin: 0; | ||
} | |||
} | .teste-caixa .teste-corpo.teste-colapsado { | ||
.teste-caixa | max-height: 3.2em; | ||
overflow: hidden; | |||
} | |||
} | |||
.teste-caixa .teste-toggle { | |||
display: inline-block; | |||
margin-top: 8px; | |||
padding: 4px 10px; | |||
cursor: pointer; | |||
border: 1px solid #666; | |||
border-radius: 4px; | |||
background: #f0f0f0; | |||
font: inherit; | |||
user-select: none; | |||
} | |||
.teste-caixa .teste-toggle:hover { | |||
background: #e4e4e4; | |||
} | |||
</style> | </style> | ||
<script> | <script> | ||
(function () { | (function () { | ||
function init() { | |||
document.querySelectorAll('.teste-caixa').forEach(function (box) { | |||
if (box.dataset.testeInit) return; | |||
box.dataset.testeInit = '1'; | |||
var body = box.querySelector('.teste-corpo'); | |||
var btn = box.querySelector('.teste-toggle'); | |||
if (!body || !btn) return; | |||
var aberto = false; | |||
function toggle() { | |||
aberto = !aberto; | |||
body.classList.toggle('teste-colapsado', !aberto); | |||
btn.textContent = aberto ? 'Recolher' : 'Expandir'; | |||
} | |||
btn.addEventListener('click', toggle); | |||
btn.addEventListener('keydown', function (e) { | |||
if (e.key === 'Enter' || e.key === ' ') { | |||
e.preventDefault(); | |||
toggle(); | |||
} | |||
}); | |||
}); | }); | ||
} | } | ||
if (document.readyState === 'loading') { | |||
document.addEventListener('DOMContentLoaded', init); | |||
} else { | |||
init(); | |||
} | |||
})(); | |||
})(); | |||
</script> | </script> | ||
Edição atual tal como às 00h24min de 1 de abril de 2026
<style>
.teste-caixa {
border: 1px solid #444;
border-radius: 6px;
padding: 10px;
max-width: 36em;
font-family: system-ui, sans-serif;
}
.teste-caixa h3 {
margin: 0 0 8px;
font-size: 1.1em;
}
.teste-caixa .teste-corpo {
margin: 0;
}
.teste-caixa .teste-corpo.teste-colapsado {
max-height: 3.2em;
overflow: hidden;
}
.teste-caixa .teste-toggle {
display: inline-block;
margin-top: 8px;
padding: 4px 10px;
cursor: pointer;
border: 1px solid #666;
border-radius: 4px;
background: #f0f0f0;
font: inherit;
user-select: none;
}
.teste-caixa .teste-toggle:hover {
background: #e4e4e4;
}
</style> <script>
(function () {
function init() {
document.querySelectorAll('.teste-caixa').forEach(function (box) {
if (box.dataset.testeInit) return;
box.dataset.testeInit = '1';
var body = box.querySelector('.teste-corpo');
var btn = box.querySelector('.teste-toggle');
if (!body || !btn) return;
var aberto = false;
function toggle() {
aberto = !aberto;
body.classList.toggle('teste-colapsado', !aberto);
btn.textContent = aberto ? 'Recolher' : 'Expandir';
}
btn.addEventListener('click', toggle);
btn.addEventListener('keydown', function (e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
toggle();
}
});
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>