Mudanças entre as edições de "Widget:Teste2"
Ir para navegação
Ir para pesquisar
(Limpou toda a página) Etiqueta: anulando |
Etiqueta: Revertido |
||
| Linha 1: | Linha 1: | ||
<div class="infobox-skill-icons"> | |||
<img src="https://i.imgur.com/zLCkdGz.png" class="infobox-skill-icon active" data-skill-id="1"> | |||
<img src="https://i.imgur.com/zLCkdGz.png" class="infobox-skill-icon" data-skill-id="2"> | |||
</div> | |||
<div class="infobox-skill-tab active" data-skill-id="1"> | |||
<b>Habilidade 1</b><br> | |||
<video controls class="infobox-skill-video"> | |||
<source src="https://cdn.glavids.com/skill1.mp4" type="video/mp4"> | |||
</video> | |||
</div> | |||
<div class="infobox-skill-tab" data-skill-id="2"> | |||
<b>Habilidade 2</b><br> | |||
<video controls class="infobox-skill-video"> | |||
<source src="https://cdn.glavids.com/skill2.mp4" type="video/mp4"> | |||
</video> | |||
</div> | |||
<style> | |||
.infobox-skill-icon { | |||
width: 32px; | |||
height: 32px; | |||
opacity: 0.6; | |||
cursor: pointer; | |||
} | |||
.infobox-skill-icon.active { | |||
opacity: 1; | |||
} | |||
.infobox-skill-tab { | |||
display: none; | |||
} | |||
.infobox-skill-tab.active { | |||
display: block; | |||
} | |||
</style> | |||
<script> | |||
mw.hook('wikipage.content').add(function ($content) { | |||
const icons = $content.find('.infobox-skill-icon'); | |||
const tabs = $content.find('.infobox-skill-tab'); | |||
icons.on('click', function () { | |||
const id = $(this).data('skill-id'); | |||
icons.removeClass('active'); | |||
tabs.removeClass('active'); | |||
$(this).addClass('active'); | |||
tabs.filter('[data-skill-id="' + id + '"]').addClass('active'); | |||
}); | |||
}); | |||
</script> | |||
Edição das 18h37min de 1 de maio de 2025
Habilidade 1
<video controls class="infobox-skill-video"> <source src="https://cdn.glavids.com/skill1.mp4" type="video/mp4"> </video>
Habilidade 2
<video controls class="infobox-skill-video"> <source src="https://cdn.glavids.com/skill2.mp4" type="video/mp4"> </video>
<style> .infobox-skill-icon {
width: 32px; height: 32px; opacity: 0.6; cursor: pointer;
} .infobox-skill-icon.active {
opacity: 1;
} .infobox-skill-tab {
display: none;
} .infobox-skill-tab.active {
display: block;
} </style> <script> mw.hook('wikipage.content').add(function ($content) {
const icons = $content.find('.infobox-skill-icon');
const tabs = $content.find('.infobox-skill-tab');
icons.on('click', function () {
const id = $(this).data('skill-id');
icons.removeClass('active');
tabs.removeClass('active');
$(this).addClass('active');
tabs.filter('[data-skill-id="' + id + '"]').addClass('active');
});
}); </script>