MooTools - Conteúdo com guias
Conteúdo com guias significa o conteúdo que está presente na área com guias e que está relacionado aos itens da lista. Sempre que aplicamos qualquer ação comohover ou click ao item da lista, a reação imediata criará um efeito no conteúdo com guias.
Vamos discutir mais sobre as guias.
Criação de guias simples
A criação de guias de menu simples ajuda a explorar informações adicionais ao passar o mouse sobre um item da lista. Primeiro, crie uma lista não ordenada com itens e, em seguida, crie divs, cada um correspondendo a um item da lista. Vamos dar uma olhada no seguinte código HTML.
Roteiro
<!-- here is our menu -->
<ul id = "tabs">
<li id = "one">One</li>
<li id = "two">Two</li>
<li id = "three">Three</li>
<li id = "four">Four</li>
</ul>
<!-- and here are our content divs -->
<div id = "contentone" class = "hidden">content for one</div>
<div id = "contenttwo" class = "hidden">content for two</div>
<div id = "contentthree" class = "hidden">content for three</div>
<div id = "contentfour" class = "hidden">content for four</div>Vamos fornecer algum suporte básico para o código HTML acima usando CSS que ajuda a ocultar os dados. Dê uma olhada no código a seguir.
.hidden {
display: none;
}Vamos agora escrever um código MooTools que exiba a funcionalidade da guia. Dê uma olhada no código a seguir.
Snippet de exemplo
//here are our functions to change the styles
var showFunction = function() {
this.setStyle('display', 'block');
}
var hideFunction = function() {
this.setStyle('display', 'none');
}
window.addEvent('domready', function() {
//here we turn our content elements into vars
var elOne = $('contentone');
var elTwo = $('contenttwo');
var elThree = $('contentthree');
var elFour = $('contentfour');
//add the events to the tabs
$('one').addEvents({
//set up the events types
//and bind the function with the variable to pass
'mouseenter': showFunction.bind(elOne),
'mouseleave': hideFunction.bind(elOne)
});
$('two').addEvents({
'mouseenter': showFunction.bind(elTwo),
'mouseleave': hideFunction.bind(elTwo)
});
$('three').addEvents({
'mouseenter': showFunction.bind(elThree),
'mouseleave': hideFunction.bind(elThree)
});
$('four').addEvents({
'mouseenter': showFunction.bind(elFour),
'mouseleave': hideFunction.bind(elFour)
});
});Ao combinar os códigos acima, você obterá a funcionalidade adequada.
Exemplo
<!DOCTYPE html>
<html>
<head>
<style>
.hidden {
display: none;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript">
//here are our functions to change the styles
var showFunction = function() {
this.setStyle('display', 'block');
}
var hideFunction = function() {
this.setStyle('display', 'none');
}
window.addEvent('domready', function() {
//here we turn our content elements into vars
var elOne = $('contentone');
var elTwo = $('contenttwo');
var elThree = $('contentthree');
var elFour = $('contentfour');
//add the events to the tabs
$('one').addEvents({
//set up the events types
//and bind the function with the variable to pass
'mouseenter': showFunction.bind(elOne),
'mouseleave': hideFunction.bind(elOne)
});
$('two').addEvents({
'mouseenter': showFunction.bind(elTwo),
'mouseleave': hideFunction.bind(elTwo)
});
$('three').addEvents({
'mouseenter': showFunction.bind(elThree),
'mouseleave': hideFunction.bind(elThree)
});
$('four').addEvents({
'mouseenter': showFunction.bind(elFour),
'mouseleave': hideFunction.bind(elFour)
});
});
</script>
</head>
<body>
<!-- here is our menu -->
<ul id = "tabs">
<li id = "one">One</li>
<li id = "two">Two</li>
<li id = "three">Three</li>
<li id = "four">Four</li>
</ul>
<!-- and here are our content divs -->
<div id = "contentone" class = "hidden">content for one</div>
<div id = "contenttwo" class = "hidden">content for two</div>
<div id = "contentthree" class = "hidden">content for three</div>
<div id = "contentfour" class = "hidden">content for four</div>
</body>
</html>Resultado
Posicione o ponteiro do mouse no item da lista, então você obterá informações adicionais do respectivo item.
Marph Content Tabs
Ao estender o código, podemos adicionar alguma funcionalidade de metamorfose quando nosso conteúdo oculto é exibido. Podemos conseguir isso usando o efeito Fx.Morph em vez de estilização.
Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<style>
.hiddenM {
display: none;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript">
var showFunction = function() {
//resets all the styles before it morphs the current one
$$('.hiddenM').setStyles({
'display': 'none',
'opacity': 0,
'background-color': '#fff',
'font-size': '16px'
});
//here we start the morph and set the styles to morph to
this.start({
'display': 'block',
'opacity': 1,
'background-color': '#d3715c',
'font-size': '31px'
});
}
window.addEvent('domready', function() {
var elOneM = $('contentoneM');
var elTwoM = $('contenttwoM');
var elThreeM = $('contentthreeM');
var elFourM = $('contentfourM');
//creat morph object
elOneM = new Fx.Morph(elOneM, {
link: 'cancel'
});
elTwoM = new Fx.Morph(elTwoM, {
link: 'cancel'
});
elThreeM = new Fx.Morph(elThreeM, {
link: 'cancel'
});
elFourM = new Fx.Morph(elFourM, {
link: 'cancel'
});
$('oneM').addEvent('click', showFunction.bind(elOneM));
$('twoM').addEvent('click', showFunction.bind(elTwoM));
$('threeM').addEvent('click', showFunction.bind(elThreeM));
$('fourM').addEvent('click', showFunction.bind(elFourM));
});
</script>
</head>
<body>
<!-- here is our menu -->
<ul id = "tabs">
<li id = "oneM">One</li>
<li id = "twoM">Two</li>
<li id = "threeM">Three</li>
<li id = "fourM">Four</li>
</ul>
<!-- and here are our content divs -->
<div id = "contentoneM" class = "hiddenM">content for one</div>
<div id = "contenttwoM" class = "hiddenM">content for two</div>
<div id = "contentthreeM" class = "hiddenM">content for three</div>
<div id = "contentfourM" class = "hiddenM">content for four</div>
</body>
</html>Resultado
Clique em qualquer item da lista para obter informações adicionais nas guias.