testes
Exemplos zAccordion </ title>
<Meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8" />
<Script type = "text / javascript" src = "js/jquery-1.6.1.min.js" > </ script>
<Script type = "text / javascript" src = "js/jquery.easing.1.3.js" > </ script>
<Script type = "text / javascript" src = "js / jquery.zaccordion.min.js" > </ script>
<Style type = "text / css" >
/ * Basta alguns estilos para definir o layout da página. * /
* { margem : 0 ; preenchimento : 0 ; font-family : Arial , Verdana , sans-serif ;}
corpo { preenchimento : 20px ; line-height : 20px ; font-size : 12px ; cor : # 000 ;}
h1 { font-size : 18px ; margem : 10px 0 ; line-height : 1 ;}
h2 { font-size : 14px ; margem : 10px 0 ; line-height : 1 ;}
p { font-size : 12px ; margem : 10px 0 ;}
pequeno { font-size : 11px ; margem : 10px 0 ; cor : # 333 ;}
um { font-size : 12px ; text-decoration : nenhum ; cor : # f00 ;}
p intervalo { cor : # 00f ;}
# Container { width : 960px ; margem : 0 auto ; padding-bottom : 40px ;}
Exemplo # { margin-top : 60px ;}
pre { font-family : "Courier
pré . html { margem : 10px 0 ;}
. Claro { clara : ambos ;}
</ Style>
<Script type = "text / javascript" >
$ ( documento ). pronto ( função () {
$ ( "pre.js" ). cada ( função ( índice ) {
eval ( $ ( este ). texto ());
});
});
</ Script>
</ Head>
<body>
<Div id = "container" >
<h1> Exemplos zAccordion </ h1>
<p> Há um certo número de exemplos abaixo. Cada exemplo mostra o JavaScript necessário para construir o acordeão. Para HTML e CSS, por favor veja o código fonte da página. </ p>
<Div id = "exemplos" >
<h2> Exemplo 1 - Um acordeão Básico </ h2>
<Ul id = "exemplo1" >
<li>
<Img src = "images/slide0.gif" width = "600" height = "270" alt = "" />
</ Li>
<li>
<Img src = "images/slide1.gif" width = "600" height = "270" alt = "" />
</ Li>
<li>
<Img src = "images/slide2.gif" width = "600" height = "270" alt = "" />
</ Li>
<li>
<Img src = "images/slide3.gif" width = "600" height = "270" alt = "" />
</ Li>
<li>
<Img src = "images/slide4.gif" width = "600" height = "270" alt = "" />
</ Li>
</ Ul>
<p> Este exemplo demonstra a melhor maneira de acionar o acordeão. Cada slide contém uma imagem medindo 600 x 270 pixels. O <strong> largura </ strong> do acordeão é necessária e definida para <em> 960 </ em> . O <strong> slideWidth </ strong> está definido para <em> 600 </ em> , a fim de exibir o slide completo. O tamanho das abas será calculada automaticamente. </ p>
<p> A <strong> altura </ strong> é necessária e definida para <em> 270 </ em> . O <strong> tempo limite </ strong> configuração abaixo vai mudar os slides a cada <em> 4000 </ em> milissegundos em vez do padrão <em> 6000 </ em> milissegundos. </ p>
<Pre class = "js" >
$ ("# Exemplo1"). ZAccordion ({
timeout: 4000,
slideWidth: 600,
width: 960,
altura: 270
});
</ Pre>
<h2> Exemplo 2 - Percentuais </ h2>
<Div id = "exemplo2" >
<div>
<Img src = "images/slide0.gif" width = "100%" height = "100%" alt = "" />
</ Div>
<div>
<Img src = "images/slide1.gif" width = "100%" height = "100%" alt = "" />
</ Div>
<div>
<Img src = "images/slide2.gif" width = "100%" height = "100%" alt = "" />
</ Div>
</ Div>
<p> O exemplo acima mostra como usar porcentagens. O <strong> largura </ strong> do acordeão está definido para <em> 100% </ em> (entre aspas abaixo) eo <strong> tabWidth </ strong> para <em> 10% </ em> . O tamanho das lâminas será calculada automaticamente. </ p>
<p> O <strong> startingSlide </ strong> está definido para <em> 1 </ em> (o segundo slide em um índice baseado em zero). O acordeão tem <strong> auto </ strong> definido para <em> false </ em> e não vai mudar os slides em um temporizador. Em vez de um clique, a mudança de slides será <strong> desencadear </ strong> em <em> mouseover </ em> . </ p>
<p> O <strong> altura </ strong> configuração é necessária e definir a <em> 200 </ em> pixels. </ p>
<Pre class = "js" >
$ ("# Exemplo2"). ZAccordion ({
startingSlide: 1,
auto: false,
tabWidth: "10%",
width: "100%",
altura: 220,
gatilho: "mouseover"
});
</ Pre>
<h2> Exemplo 3 - Criação de Navegação </ h2>
<Style type = "text / css" >
Polegares # { list-style : nenhum ; flutuador : esquerda ;}
# Polegares li { exibição : em linha ;}
# Polegares um { margin-left : 5px ; flutuador : esquerda ;}
# Inicia { exibição : nenhum ; flutuador : deixou ;}
# Parar { flutuador : esquerda ;}
</ Style>
<Ul id = "Example3" >
<li> <img src = "images/slide0.gif" width = "600" height = "200" /> </ li>
<li> <img src = "images/slide1.gif" width = "600" height = "200" /> </ li>
<li> <img src = "images/slide2.gif" width = "600" height = "200" /> </ li>
<li> <img src = "images/slide3.gif" width = "600" height = "200" /> </ li>
<li> <img src = "images/slide4.gif" width = "600" height = "200" /> </ li>
</ Ul>
<A id = "start" href = "#" > Início </ a>
<A id = "stop" href = "#" > Parar </ a>
<Ul id = "polegares" >
<li> <a href = "#" > 0 </ a> </ li>
<li> <a href = "#" > 1 </ a> </ li>
<li> <a href = "#" > 2 </ a> </ li>
<li> <a href = "#" > 3 </ a> </ li>
<li> <a href = "#" > 4 </ a> </ li>
</ Ul>
<Div class = "clear" > </ div>
<p> Este pode ser o exemplo mais prático quando se trata de rodar conteúdo em destaque. Cada slide tem sua própria classe e imagem de fundo personalizada. </ p>
<Pre class = "js" >
$ ("# Example3"). ZAccordion ({
slideWidth: "500px",
width: "800px",
altura: "200px",
timeout: 2000
});
$ ("# Start"). Click (function () {
$ ("# Example3") zAccordion ("start").;
$ (This) css ("display", "none").;
$ ("# Parar") css ("display", "bloco").;
return false;
});
$ ("# Parar"). Click (function () {
$ ("# Example3") zAccordion ("stop").;
$ (This) css ("display", "none").;
$ ("# Start") css ("display", "bloco").;
return false;
});
$ ("# Polegares a"). Click (function () {
. $ ("# Example3") zAccordion (.. "Gatilho", $ (this) pai () índice ());
return false;
});
</ Pre>
<h2> Exemplo 4 - Um Exemplo Avançado </ h2>
<Style type = "text / css" >
# Exemplo4 ul { list-style : nenhum ;}
# Exemplo4 h3 { cor : # fff ; text-transform : maiúsculas ; font-size : 24px ; line-height : 1 ;}
# Exemplo4 p { cor : # fff ;}
# Exemplo4 . quadro-0 { fundo : url (images/slide0.gif) superior esquerdo repeat ;}
# Exemplo4 . quadro-1 { fundo : url (images/slide1.gif) superior esquerdo repeat ;}
# Exemplo4 . quadro-2 { fundo : url (images/slide2.gif) superior esquerdo repeat ;}
# Exemplo4 . quadro-3 { fundo : url (images/slide3.gif) superior esquerdo repeat ;}
# Exemplo4 . quadro conteúdo { width : 400px ; preenchimento : 50px ;}
# Exemplo4 . quadro fechado . quadro conteúdo { exibição : nenhum ;}
# Exemplo4 . frame-aberto . quadro conteúdo { exibição : bloco ;}
</ Style>
<Div id = "exemplo4" >
<ul>
<Li class = "frame-0" >
<Div class = "frame-content" >
<h3> Lorem ipsum dolor sit </ h3>
<p> Vivamus vel neque nec est hendrerit aliquet. Donec sed sapien cursus. Aenean auctor egestas turpis nec aliquam. </ p>
</ Div>
</ Li>
<Li class = "frame-1" >
<Div class = "frame-content" >
<h3> Donec um elit nisi </ h3>
<p> Proin sit amet massa vel elit eu pulvinar hendrerit nec odio. Mecenas faucibus odio sit amet nunc Semper accumsan. </ p>
</ Div>
</ Li>
<Li class = "frame-2" >
<Div class = "frame-content" >
<h3> DUIs vitae suscipit neque </ h3>
<p> Nunc porta dolor commodo, neque em vestibulum ullamcorper não. Nunc ante Elementum em metus mollis sit amet justo consequat facilisis. </ p>
</ Div>
</ Li>
<Li class = "frame-3" >
<Div class = "frame-content" >
<h3> Sed um lorem scelerisque </ h3>
<p> Phasellus ante não em Lectus eleifend scelerisque ut Eget velit. </ p>
</ Div>
</ Li>
</ Ul>
</ Div>
<p> Este exemplo é muito comum com conteúdo em destaque. Cada lâmina tem uma imagem de fundo definida com CSS. O texto dentro dos slides é exibido apenas para o slide aberto. No trecho abaixo, o <strong> slideClass </ strong> está definido para <em> quadro </ em> . Esta configuração irá adicionar uma classe de <em> quadro </ em> para cada uma das listas de itens. Ele também irá adicionar uma classe de <em> frame-aberto </ em> para o slide aberto, <em> quadro fechado </ em> para as lâminas fechadas e <em> quadro anterior </ em> para o slide que foi previamente aberta. </ p>
<p> Por zAccordion padrão não irá adicionar classes para o conteúdo. No entanto, a opção de adicionar classes existe para fazer um estilo fácil. </ p>
<Pre class = "js" >
$ (Document). Ready (function () {
$ ("# Exemplo4 ul"). ZAccordion ({
slideWidth: 600,
width: 900,
height: 250,
timeout: 3000,
slideClass: "frame"
});
});
</ Pre>
<h2> Exemplo 5 - Usando o HTML5 Dados de Atributo </ h2>
<Div id = "example5" dados de largura = "900" data-slidewidth = "500" height = dados "250" >
<Img src = "images/slide0.gif" width = "500" height = "250" alt = "" />
<Img src = "images/slide1.gif" width = "500" height = "250" alt = "" />
<Img src = "images/slide2.gif" width = "500" height = "250" alt = "" />
<Img src = "images/slide3.gif" width = "500" height = "250" alt = "" />
</ Div>
<p> HTML5 deu desenvolvedores web a capacidade de adicionar atributos de dados personalizados para elementos HTML. Em vez de definir opções com JavaScript, zAccordion pode puxar suas opções a partir de atributos de dados. Um exemplo simples é a seguir. O <strong> largura </ strong> , <strong> slideWidth </ strong> *, e <strong> altura </ strong> são prefixados com <em> dados </ em> . </ p>
<small> * Nota: Observe o minúsculo <strong> slidewidth </ strong> . A fim de atender as especificações do HTML5, os atributos de dados deve ser definido como minúsculas em vez de camelcase com JavaScript. </ small>
<Pre class = "html" >
< div id = "example5" dados de largura = "900" data-slidewidth = "500" height = dados "250" >
</ Pre>
<Pre class = "js" >
$ (Document). Ready (function () {
$ ("# Example5") zAccordion ().;
});
</ Pre>
<h2> Exemplo 6 - A função Destrua </ h2>
<Style type = "text / css" >
# Example6 ul { list-style : nenhum ;}
# Example6 li { exibição : em linha ;}
# Example6 img { flutuador : esquerda ; exibição : bloco ;}
</ Style>
<Ul id = "example6" >
<li> <img src = "images/slide0.gif" width = "320" height = "100" alt = "" /> </ li>
<li> <img src = "images/slide1.gif" width = "320" height = "100" alt = "" /> </ li>
<li> <img src = "images/slide2.gif" width = "320" height = "100" alt = "" /> </ li>
<li> <img src = "images/slide3.gif" width = "320" height = "100" alt = "" /> </ li>
<li> <img src = "images/slide4.gif" width = "320" height = "100" alt = "" /> </ li>
</ Ul>
<Div class = "clear" > </ div>
<A id = "destruir" href = "#" > Destruir </ a>
<Div class = "clear" > </ div>
<p> acordeão Um pode ser destruído a qualquer momento. Neste exemplo, o <strong> slideClass </ strong> foi criado para <em> destruir-me </ em> . Com o trecho abaixo, uma vez que o acordeão é destruído, e as classes definidas pelo zAccordion serão removidos. zAccordion também remover completamente o atributo de estilo. </ p>
<Pre class = "js" >
$ (Document). Ready (function () {
$ ("# Example6"). ZAccordion ({
slideWidth: 320,
width: 600,
height: 100,
timeout: 2000,
slideClass: "destruir-me",
velocidade: 500,
pausa: false
});
$ ("# Destruir"). Click (function () {
$ ("# Example6"). ZAccordion ("destruir", {
removeStyleAttr: true, / * Este atributo padrão será verdadeira e remover todos os estilos inline. * /
removeClasses: true / * Este atributo padrão será false e remover todas as classes que foram definidas por zAccordion. * /
});
return false;
});
});
</ Pre>
<h2> Exemplo 7 - Largura máxima Tab </ h2>
<Ul id = "example7" >
<li> <img src = "images/slide0.gif" width = "600" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide1.gif" width = "600" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide2.gif" width = "600" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide3.gif" width = "600" height = "150" alt = "" /> </ li>
</ Ul>
<Div class = "clear" > </ div>
<p> O exemplo demonstra como configurar zAccordion usando <strong> largura </ strong> e <strong> tabWidth </ strong> . O acordeão tem uma largura de 800 pixels. O <strong> tabWidth </ strong> terá de ser ajustado para menos de <em> 200 </ em> pixels. Qualquer coisa acima de <em> 200 </ em> e do acordeão não vai construir. É melhor para definir o <strong> tabWidth </ strong> a menos de <em> 200 </ em> pixels neste exemplo para os slides estarão livres para animar. </ p>
<Pre class = "js" >
$ (Document). Ready (function () {
$ ("# Example7"). ZAccordion ({
tabWidth: "200",
width: "800",
height: "150"
});
});
</ Pre>
<h2> Exemplo 8 - Largura mínima de slides </ h2>
<Ul id = "example8" >
<li> <img src = "images/slide0.gif" width = "600" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide1.gif" width = "600" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide2.gif" width = "600" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide3.gif" width = "600" height = "150" alt = "" /> </ li>
</ Ul>
<p> Este é um exemplo é semelhante ao exemplo acima, mas desta vez <strong> slideWidth </ strong> está definido para <em> 200 </ em> pixels. <strong> slideWidth </ strong> realmente deve ser ajustado para superior <em> 200 </ em> para permitir alguma animação. </ p>
<Pre class = "js" >
$ (Document). Ready (function () {
$ ("# Example8"). ZAccordion ({
slideWidth: "200",
width: "800",
height: "150"
});
});
</ Pre>
<h2> Exemplo 9 - animationStart e animationComplete </ h2>
<Style type = "text / css" >
# Animação extensão { cor : # }
</ Style>
<Ol id = "example9" >
<li> <img src = "images/slide0.gif" width = "100%" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide1.gif" width = "100%" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide2.gif" width = "100%" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide3.gif" width = "100%" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide4.gif" width = "100%" height = "150" alt = "" /> </ li>
</ Ol>
<P id = "animação" > <span> </ span> </ p>
<p> Este exemplo mostra como disparar um evento quando animação de slides começa e quando ela for concluída. O <strong> tempo limite </ strong> é aumentada para 8 segundos no trecho abaixo, a fim de ver a forma como o <strong> animationStart </ strong> e <strong> animationComplete </ strong> trabalho de opções. </ p>
<Pre class = "js" >
$ (Document). Ready (function () {
$ ("# Example9"). ZAccordion ({
timeout: 8000,
velocidade: 5000,
tabWidth: "10%",
width: "100%",
height: "150",
animationStart: function () {
$ ("# Animação span") html ("A animação começou ...").;
},
animationComplete: function () {
$ ("# Animação span") html ("A animação completa.").;
}
});
});
</ Pre>
<h2> Exemplo 10 - Outro exemplo avançado </ h2>
<Style type = "text / css" >
# Example10 li { posição : parente ;}
#example10 div.slider-bg {background:#000;top:300px;height:102px;width:600px;left:0;position:absolute;z-index:10;opacity:.5;}
#example10 div.slider-info {top:300px;height:72px;left:0;position:absolute;width:65px;z-index:15;padding:15px;}
# Example10 div . deslizante info- forte { font-size : 18px ; cor : # fff ; margin-bottom : 5px ;}
#example10 div.slider-info p {display:none;font-size:12px;line-height:14px;color:#fff;margin:0 !important;}
# Example10 li . deslizante aberta div . deslizante-info { width : 570px ;}
# Example10 li . deslizante aberta div . deslizante info- forte { font-size : 22px ;}
# Example10 li . deslizante aberta div . deslizante info- p { exibição : bloco ;}
</ Style>
<Ul id = "example10" >
<li>
<Img src = "images/slide0.gif" width = "600" height = "400" alt = "" />
<Div class = "slider-bg" > </ div>
<Div class = "slider-info" >
<strong> Lorem ipsum </ strong>
<P class = "cursor de texto" > Lorem ipsum dolor sit amet, elit adipiscing consectetur. Cras porttitor lacus sollicitudin ligula sagittis um ultricies ultricies nulla. Ut odio nisi, posuere sed blandit menos, dolor Bibendum não. </ p>
</ Div>
</ Li>
<li>
<Img src = "images/slide1.gif" width = "600" height = "400" alt = "" />
<Div class = "slider-bg" > </ div>
<Div class = "slider-info" >
<strong> Dolor Sente-se </ strong>
<P class = "cursor de texto" > Lorem ipsum dolor sit amet, elit adipiscing consectetur. Cras em condimentum SEM. Aenean faucibus auctor dignissim. Em ut libero vitae augue laoreet iaculis em um Tellus. </ p>
</ Div>
</ Li>
<li>
<Img src = "images/slide2.gif" width = "600" height = "400" alt = "" />
<Div class = "slider-bg" > </ div>
<Div class = "slider-info" >
<strong> Donec Ultrices </ strong>
<P class = "cursor de texto" > DUIs Viverra velit Orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue molestie. Donec ultrices facilisis Erat em porttitor. </ p>
</ Div>
</ Li>
<li>
<Img src = "images/slide3.gif" width = "600" height = "400" alt = "" />
<Div class = "slider-bg" > </ div>
<Div class = "slider-info" >
<strong> Est Imper </ strong>
<P class = "cursor de texto" > Phasellus sed Lectus nisl, Eget cursus eros. Suspendisse posuere Orci eu lorem luctus et nunc posuere porta. Cras sed Lectus vitae leo accumsan adipiscing. </ p>
</ Div>
</ Li>
</ Ul>
<p> O exemplo acima demonstra uma maneira original para rodar conteúdo em destaque. Similar a outros exemplos, ele usa as classes definidas com <strong> slideClass </ strong> para criar o efeito acima. </ p>
<Pre class = "js" >
$ (Document). Ready (function () {
$ ("# Example10"). ZAccordion ({
width: 884,
velocidade: 600,
slideClass: "slider",
slideWidth: 600,
altura: 400
});
});
</ Pre>
<h2> Exemplo 11 - Flexibilização </ h2>
<Ol id = "example11" >
<li> <img src = "images/slide0.gif" width = "600" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide1.gif" width = "600" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide2.gif" width = "600" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide3.gif" width = "600" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide4.gif" width = "600" height = "150" alt = "" /> </ li>
</ Ol>
<p> Este exemplo mostra uma maneira rápida de adicionar <strong> flexibilização </ strong> ao acordeão usando o Plugin Flexibilização jQuery. </ p>
<Pre class = "js" >
$ (Document). Ready (function () {
$ ("# Example11"). ZAccordion ({
facilitando: "easeOutBounce",
altura: "150px",
slideWidth: "600px",
width: "900px"
});
});
</ Pre>
<h2> Exemplo 12 - Disparando uma função usando AfterBuild </ h2>
<Ol id = "example12" >
<li> <img src = "images/slide0.gif" width = "700" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide1.gif" width = "700" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide2.gif" width = "700" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide3.gif" width = "700" height = "150" alt = "" /> </ li>
</ Ol>
<P id = "build" > <span> </ span> </ p>
<p> O <strong> AfterBuild </ strong> opção pode ser configurado para disparar uma função uma vez que o acordeão é construído. Abaixo, o <strong> AfterBuild </ strong> opção irá alterar o texto de um <em> ID </ em> . Como um exemplo prático, esta opção pode ser usada para definir a posição do acordeão CSS a partir de fora da tela para a tela, escondendo a construção inicial e mostrando o acordeão apenas quando estiver pronto. </ p>
<Pre class = "js" >
$ (Document). Ready (function () {
$ ("# Example12"). ZAccordion ({
height: "150",
slideWidth: "700",
width: "960",
AfterBuild: function () {
$ ("# Construir span") html ("Build completa.").;
}
});
});
</ Pre>
<h2> Exemplo 13 - Altura 100% e 100% da largura </ h2>
<p> Por favor, veja o incluído <a href = "percentage.html" > percentage.html </ a> arquivo. </ p>
</ Div>
</ Div>
</ Body>
</ Html></p>
<div class='clear'></div>
</div>
</div>
<div class='clear'></div>
<div id='commentsbox'>
<a name='comments'></a>
<ol class='commentlist'>
</ol>
<p class='comment-footer'>
<div id='comment-form'>
<div id='respond'>
<a name='comment-form'></a>
<h3>Leave a Reply</h3>
<p>
</p>
<a href='https://www.blogger.com/comment/frame/3243391226522211456?pa=6109536066989009755&hl=pt-BR' id='comment-editor-src'></a>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='103%'></iframe>
<!--Can't find substitution for tag [post.friendConnectJs]-->
<script src='https://www.blogger.com/static/v1/jsbin/4269703388-comment_from_post_iframe.js' type='text/javascript'></script>
<script type='text/javascript'>
BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html', '0');
</script>
</div>
</div>
</p>
<div id='backlinks-container'>
<div id='Blog1_backlinks-container'>
</div>
</div>
</div>
</div>
</div></div>
<!--Can't find substitution for tag [adEnd]-->
</div>
<div class='clear'></div>
<div class='navigation'>
<div class='blog-pager' id='blog-pager'>
<a class='home-link' href='http://thomgsantos.blogspot.com/'>Página inicial</a>
</div>
<div class='clear'></div>
</div>
</div><div class='widget Attribution' data-version='1' id='Attribution1'>
<div class='widget-content' style='text-align: center;'>
Tecnologia do <a href='https://www.blogger.com' target='_blank'>Blogger</a>.
</div>
<div class='clear'></div>
</div></div>
<script type='text/javascript'>
var home_page_url = location.href;
var pageCount=4;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';
function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
htmlMap[htmlMap.length]='/';
postNum++;
for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};
for(var p =0;p< banyaknomer;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html += '<span class="showpageNum"><a href="/">1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}
if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
function showpageCount2(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;
htmlMap[htmlMap.length]=labelHtml;
postNum++;
for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;
itemCount++;
}
var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};
for(var p =0;p< banyaknomer;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
</script>
<script type='text/javascript'>
var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}
var home_page = "/";
if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>
<div class='clear'></div>
</div>
<div id='sidebar-wrapper'>
<div id='search'>
<form action='http://thomgsantos.blogspot.com/search/' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search my site...";}' onfocus='if (this.value == "Search my site...") {this.value = ""}' type='text' value='Search my site...'/>
</form>
</div>
<div class='clear'></div>
<div class='sidebar section' id='sidebar'><div class='widget HTML' data-version='1' id='HTML6'>
<div class='widget-content'>
<! doctype html>
Exemplos zAccordion
<script type = "text / javascript" src = "js/jquery-1.6.1.min.js" > </ script>
<Script type = "text / javascript" src = "js/jquery.easing.1.3.js" > </ script>
<Script type = "text / javascript" src = "js / jquery.zaccordion.min.js" > </ script>
<Style type = "text / css" >
/ * Basta alguns estilos para definir o layout da página. * /
* { margem : 0 ; preenchimento : 0 ; font-family : Arial , Verdana , sans-serif ;}
corpo { preenchimento : 20px ; line-height : 20px ; font-size : 12px ; cor : # 000 ;}
h1 { font-size : 18px ; margem : 10px 0 ; line-height : 1 ;}
h2 { font-size : 14px ; margem : 10px 0 ; line-height : 1 ;}
p { font-size : 12px ; margem : 10px 0 ;}
pequeno { font-size : 11px ; margem : 10px 0 ; cor : # 333 ;}
um { font-size : 12px ; text-decoration : nenhum ; cor : # f00 ;}
p intervalo { cor : # 00f ;}
# Container { width : 960px ; margem : 0 auto ; padding-bottom : 40px ;}
Exemplo # { margin-top : 60px ;}
pre { font-family : "Courier
pré . html { margem : 10px 0 ;}
. Claro { clara : ambos ;}
</ Style>
<Script type = "text / javascript" >
$ ( documento ). pronto ( função () {
$ ( "pre.js" ). cada ( função ( índice ) {
eval ( $ ( este ). texto ());
});
});
</ Script>
</ Head>
<body>
<Div id = "container" >
<h1> Exemplos zAccordion </ h1>
<p> Há um certo número de exemplos abaixo. Cada exemplo mostra o JavaScript necessário para construir o acordeão. Para HTML e CSS, por favor veja o código fonte da página. </ p>
<Div id = "exemplos" >
<h2> Exemplo 1 - Um acordeão Básico </ h2>
<Ul id = "exemplo1" >
<li>
<Img src = "images/slide0.gif" width = "600" height = "270" alt = "" />
</ Li>
<li>
<Img src = "images/slide1.gif" width = "600" height = "270" alt = "" />
</ Li>
<li>
<Img src = "images/slide2.gif" width = "600" height = "270" alt = "" />
</ Li>
<li>
<Img src = "images/slide3.gif" width = "600" height = "270" alt = "" />
</ Li>
<li>
<Img src = "images/slide4.gif" width = "600" height = "270" alt = "" />
</ Li>
</ Ul>
<p> Este exemplo demonstra a melhor maneira de acionar o acordeão. Cada slide contém uma imagem medindo 600 x 270 pixels. O <strong> largura </ strong> do acordeão é necessária e definida para <em> 960 </ em> . O <strong> slideWidth </ strong> está definido para <em> 600 </ em> , a fim de exibir o slide completo. O tamanho das abas será calculada automaticamente. </ p>
<p> A <strong> altura </ strong> é necessária e definida para <em> 270 </ em> . O <strong> tempo limite </ strong> configuração abaixo vai mudar os slides a cada <em> 4000 </ em> milissegundos em vez do padrão <em> 6000 </ em> milissegundos. </ p>
<Pre class = "js" >
$ ("# Exemplo1"). ZAccordion ({
timeout: 4000,
slideWidth: 600,
width: 960,
altura: 270
});
</ Pre>
<h2> Exemplo 2 - Percentuais </ h2>
<Div id = "exemplo2" >
<div>
<Img src = "images/slide0.gif" width = "100%" height = "100%" alt = "" />
</ Div>
<div>
<Img src = "images/slide1.gif" width = "100%" height = "100%" alt = "" />
</ Div>
<div>
<Img src = "images/slide2.gif" width = "100%" height = "100%" alt = "" />
</ Div>
</ Div>
<p> O exemplo acima mostra como usar porcentagens. O <strong> largura </ strong> do acordeão está definido para <em> 100% </ em> (entre aspas abaixo) eo <strong> tabWidth </ strong> para <em> 10% </ em> . O tamanho das lâminas será calculada automaticamente. </ p>
<p> O <strong> startingSlide </ strong> está definido para <em> 1 </ em> (o segundo slide em um índice baseado em zero). O acordeão tem <strong> auto </ strong> definido para <em> false </ em> e não vai mudar os slides em um temporizador. Em vez de um clique, a mudança de slides será <strong> desencadear </ strong> em <em> mouseover </ em> . </ p>
<p> O <strong> altura </ strong> configuração é necessária e definir a <em> 200 </ em> pixels. </ p>
<Pre class = "js" >
$ ("# Exemplo2"). ZAccordion ({
startingSlide: 1,
auto: false,
tabWidth: "10%",
width: "100%",
altura: 220,
gatilho: "mouseover"
});
</ Pre>
<h2> Exemplo 3 - Criação de Navegação </ h2>
<Style type = "text / css" >
Polegares # { list-style : nenhum ; flutuador : esquerda ;}
# Polegares li { exibição : em linha ;}
# Polegares um { margin-left : 5px ; flutuador : esquerda ;}
# Inicia { exibição : nenhum ; flutuador : deixou ;}
# Parar { flutuador : esquerda ;}
</ Style>
<Ul id = "Example3" >
<li> <img src = "images/slide0.gif" width = "600" height = "200" /> </ li>
<li> <img src = "images/slide1.gif" width = "600" height = "200" /> </ li>
<li> <img src = "images/slide2.gif" width = "600" height = "200" /> </ li>
<li> <img src = "images/slide3.gif" width = "600" height = "200" /> </ li>
<li> <img src = "images/slide4.gif" width = "600" height = "200" /> </ li>
</ Ul>
<A id = "start" href = "#" > Início </ a>
<A id = "stop" href = "#" > Parar </ a>
<Ul id = "polegares" >
<li> <a href = "#" > 0 </ a> </ li>
<li> <a href = "#" > 1 </ a> </ li>
<li> <a href = "#" > 2 </ a> </ li>
<li> <a href = "#" > 3 </ a> </ li>
<li> <a href = "#" > 4 </ a> </ li>
</ Ul>
<Div class = "clear" > </ div>
<p> Este pode ser o exemplo mais prático quando se trata de rodar conteúdo em destaque. Cada slide tem sua própria classe e imagem de fundo personalizada. </ p>
<Pre class = "js" >
$ ("# Example3"). ZAccordion ({
slideWidth: "500px",
width: "800px",
altura: "200px",
timeout: 2000
});
$ ("# Start"). Click (function () {
$ ("# Example3") zAccordion ("start").;
$ (This) css ("display", "none").;
$ ("# Parar") css ("display", "bloco").;
return false;
});
$ ("# Parar"). Click (function () {
$ ("# Example3") zAccordion ("stop").;
$ (This) css ("display", "none").;
$ ("# Start") css ("display", "bloco").;
return false;
});
$ ("# Polegares a"). Click (function () {
. $ ("# Example3") zAccordion (.. "Gatilho", $ (this) pai () índice ());
return false;
});
</ Pre>
<h2> Exemplo 4 - Um Exemplo Avançado </ h2>
<Style type = "text / css" >
# Exemplo4 ul { list-style : nenhum ;}
# Exemplo4 h3 { cor : # fff ; text-transform : maiúsculas ; font-size : 24px ; line-height : 1 ;}
# Exemplo4 p { cor : # fff ;}
# Exemplo4 . quadro-0 { fundo : url (images/slide0.gif) superior esquerdo repeat ;}
# Exemplo4 . quadro-1 { fundo : url (images/slide1.gif) superior esquerdo repeat ;}
# Exemplo4 . quadro-2 { fundo : url (images/slide2.gif) superior esquerdo repeat ;}
# Exemplo4 . quadro-3 { fundo : url (images/slide3.gif) superior esquerdo repeat ;}
# Exemplo4 . quadro conteúdo { width : 400px ; preenchimento : 50px ;}
# Exemplo4 . quadro fechado . quadro conteúdo { exibição : nenhum ;}
# Exemplo4 . frame-aberto . quadro conteúdo { exibição : bloco ;}
</ Style>
<Div id = "exemplo4" >
<ul>
<Li class = "frame-0" >
<Div class = "frame-content" >
<h3> Lorem ipsum dolor sit </ h3>
<p> Vivamus vel neque nec est hendrerit aliquet. Donec sed sapien cursus. Aenean auctor egestas turpis nec aliquam. </ p>
</ Div>
</ Li>
<Li class = "frame-1" >
<Div class = "frame-content" >
<h3> Donec um elit nisi </ h3>
<p> Proin sit amet massa vel elit eu pulvinar hendrerit nec odio. Mecenas faucibus odio sit amet nunc Semper accumsan. </ p>
</ Div>
</ Li>
<Li class = "frame-2" >
<Div class = "frame-content" >
<h3> DUIs vitae suscipit neque </ h3>
<p> Nunc porta dolor commodo, neque em vestibulum ullamcorper não. Nunc ante Elementum em metus mollis sit amet justo consequat facilisis. </ p>
</ Div>
</ Li>
<Li class = "frame-3" >
<Div class = "frame-content" >
<h3> Sed um lorem scelerisque </ h3>
<p> Phasellus ante não em Lectus eleifend scelerisque ut Eget velit. </ p>
</ Div>
</ Li>
</ Ul>
</ Div>
<p> Este exemplo é muito comum com conteúdo em destaque. Cada lâmina tem uma imagem de fundo definida com CSS. O texto dentro dos slides é exibido apenas para o slide aberto. No trecho abaixo, o <strong> slideClass </ strong> está definido para <em> quadro </ em> . Esta configuração irá adicionar uma classe de <em> quadro </ em> para cada uma das listas de itens. Ele também irá adicionar uma classe de <em> frame-aberto </ em> para o slide aberto, <em> quadro fechado </ em> para as lâminas fechadas e <em> quadro anterior </ em> para o slide que foi previamente aberta. </ p>
<p> Por zAccordion padrão não irá adicionar classes para o conteúdo. No entanto, a opção de adicionar classes existe para fazer um estilo fácil. </ p>
<Pre class = "js" >
$ (Document). Ready (function () {
$ ("# Exemplo4 ul"). ZAccordion ({
slideWidth: 600,
width: 900,
height: 250,
timeout: 3000,
slideClass: "frame"
});
});
</ Pre>
<h2> Exemplo 5 - Usando o HTML5 Dados de Atributo </ h2>
<Div id = "example5" dados de largura = "900" data-slidewidth = "500" height = dados "250" >
<Img src = "images/slide0.gif" width = "500" height = "250" alt = "" />
<Img src = "images/slide1.gif" width = "500" height = "250" alt = "" />
<Img src = "images/slide2.gif" width = "500" height = "250" alt = "" />
<Img src = "images/slide3.gif" width = "500" height = "250" alt = "" />
</ Div>
<p> HTML5 deu desenvolvedores web a capacidade de adicionar atributos de dados personalizados para elementos HTML. Em vez de definir opções com JavaScript, zAccordion pode puxar suas opções a partir de atributos de dados. Um exemplo simples é a seguir. O <strong> largura </ strong> , <strong> slideWidth </ strong> *, e <strong> altura </ strong> são prefixados com <em> dados </ em> . </ p>
<small> * Nota: Observe o minúsculo <strong> slidewidth </ strong> . A fim de atender as especificações do HTML5, os atributos de dados deve ser definido como minúsculas em vez de camelcase com JavaScript. </ small>
<Pre class = "html" >
< div id = "example5" dados de largura = "900" data-slidewidth = "500" height = dados "250" >
</ Pre>
<Pre class = "js" >
$ (Document). Ready (function () {
$ ("# Example5") zAccordion ().;
});
</ Pre>
<h2> Exemplo 6 - A função Destrua </ h2>
<Style type = "text / css" >
# Example6 ul { list-style : nenhum ;}
# Example6 li { exibição : em linha ;}
# Example6 img { flutuador : esquerda ; exibição : bloco ;}
</ Style>
<Ul id = "example6" >
<li> <img src = "images/slide0.gif" width = "320" height = "100" alt = "" /> </ li>
<li> <img src = "images/slide1.gif" width = "320" height = "100" alt = "" /> </ li>
<li> <img src = "images/slide2.gif" width = "320" height = "100" alt = "" /> </ li>
<li> <img src = "images/slide3.gif" width = "320" height = "100" alt = "" /> </ li>
<li> <img src = "images/slide4.gif" width = "320" height = "100" alt = "" /> </ li>
</ Ul>
<Div class = "clear" > </ div>
<A id = "destruir" href = "#" > Destruir </ a>
<Div class = "clear" > </ div>
<p> acordeão Um pode ser destruído a qualquer momento. Neste exemplo, o <strong> slideClass </ strong> foi criado para <em> destruir-me </ em> . Com o trecho abaixo, uma vez que o acordeão é destruído, e as classes definidas pelo zAccordion serão removidos. zAccordion também remover completamente o atributo de estilo. </ p>
<Pre class = "js" >
$ (Document). Ready (function () {
$ ("# Example6"). ZAccordion ({
slideWidth: 320,
width: 600,
height: 100,
timeout: 2000,
slideClass: "destruir-me",
velocidade: 500,
pausa: false
});
$ ("# Destruir"). Click (function () {
$ ("# Example6"). ZAccordion ("destruir", {
removeStyleAttr: true, / * Este atributo padrão será verdadeira e remover todos os estilos inline. * /
removeClasses: true / * Este atributo padrão será false e remover todas as classes que foram definidas por zAccordion. * /
});
return false;
});
});
</ Pre>
<h2> Exemplo 7 - Largura máxima Tab </ h2>
<Ul id = "example7" >
<li> <img src = "images/slide0.gif" width = "600" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide1.gif" width = "600" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide2.gif" width = "600" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide3.gif" width = "600" height = "150" alt = "" /> </ li>
</ Ul>
<Div class = "clear" > </ div>
<p> O exemplo demonstra como configurar zAccordion usando <strong> largura </ strong> e <strong> tabWidth </ strong> . O acordeão tem uma largura de 800 pixels. O <strong> tabWidth </ strong> terá de ser ajustado para menos de <em> 200 </ em> pixels. Qualquer coisa acima de <em> 200 </ em> e do acordeão não vai construir. É melhor para definir o <strong> tabWidth </ strong> a menos de <em> 200 </ em> pixels neste exemplo para os slides estarão livres para animar. </ p>
<Pre class = "js" >
$ (Document). Ready (function () {
$ ("# Example7"). ZAccordion ({
tabWidth: "200",
width: "800",
height: "150"
});
});
</ Pre>
<h2> Exemplo 8 - Largura mínima de slides </ h2>
<Ul id = "example8" >
<li> <img src = "images/slide0.gif" width = "600" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide1.gif" width = "600" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide2.gif" width = "600" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide3.gif" width = "600" height = "150" alt = "" /> </ li>
</ Ul>
<p> Este é um exemplo é semelhante ao exemplo acima, mas desta vez <strong> slideWidth </ strong> está definido para <em> 200 </ em> pixels. <strong> slideWidth </ strong> realmente deve ser ajustado para superior <em> 200 </ em> para permitir alguma animação. </ p>
<Pre class = "js" >
$ (Document). Ready (function () {
$ ("# Example8"). ZAccordion ({
slideWidth: "200",
width: "800",
height: "150"
});
});
</ Pre>
<h2> Exemplo 9 - animationStart e animationComplete </ h2>
<Style type = "text / css" >
# Animação extensão { cor : # }
</ Style>
<Ol id = "example9" >
<li> <img src = "images/slide0.gif" width = "100%" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide1.gif" width = "100%" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide2.gif" width = "100%" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide3.gif" width = "100%" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide4.gif" width = "100%" height = "150" alt = "" /> </ li>
</ Ol>
<P id = "animação" > <span> </ span> </ p>
<p> Este exemplo mostra como disparar um evento quando animação de slides começa e quando ela for concluída. O <strong> tempo limite </ strong> é aumentada para 8 segundos no trecho abaixo, a fim de ver a forma como o <strong> animationStart </ strong> e <strong> animationComplete </ strong> trabalho de opções. </ p>
<Pre class = "js" >
$ (Document). Ready (function () {
$ ("# Example9"). ZAccordion ({
timeout: 8000,
velocidade: 5000,
tabWidth: "10%",
width: "100%",
height: "150",
animationStart: function () {
$ ("# Animação span") html ("A animação começou ...").;
},
animationComplete: function () {
$ ("# Animação span") html ("A animação completa.").;
}
});
});
</ Pre>
<h2> Exemplo 10 - Outro exemplo avançado </ h2>
<Style type = "text / css" >
# Example10 li { posição : parente ;}
#example10 div.slider-bg {background:#000;top:300px;height:102px;width:600px;left:0;position:absolute;z-index:10;opacity:.5;}
#example10 div.slider-info {top:300px;height:72px;left:0;position:absolute;width:65px;z-index:15;padding:15px;}
# Example10 div . deslizante info- forte { font-size : 18px ; cor : # fff ; margin-bottom : 5px ;}
#example10 div.slider-info p {display:none;font-size:12px;line-height:14px;color:#fff;margin:0 !important;}
# Example10 li . deslizante aberta div . deslizante-info { width : 570px ;}
# Example10 li . deslizante aberta div . deslizante info- forte { font-size : 22px ;}
# Example10 li . deslizante aberta div . deslizante info- p { exibição : bloco ;}
</ Style>
<Ul id = "example10" >
<li>
<Img src = "images/slide0.gif" width = "600" height = "400" alt = "" />
<Div class = "slider-bg" > </ div>
<Div class = "slider-info" >
<strong> Lorem ipsum </ strong>
<P class = "cursor de texto" > Lorem ipsum dolor sit amet, elit adipiscing consectetur. Cras porttitor lacus sollicitudin ligula sagittis um ultricies ultricies nulla. Ut odio nisi, posuere sed blandit menos, dolor Bibendum não. </ p>
</ Div>
</ Li>
<li>
<Img src = "images/slide1.gif" width = "600" height = "400" alt = "" />
<Div class = "slider-bg" > </ div>
<Div class = "slider-info" >
<strong> Dolor Sente-se </ strong>
<P class = "cursor de texto" > Lorem ipsum dolor sit amet, elit adipiscing consectetur. Cras em condimentum SEM. Aenean faucibus auctor dignissim. Em ut libero vitae augue laoreet iaculis em um Tellus. </ p>
</ Div>
</ Li>
<li>
<Img src = "images/slide2.gif" width = "600" height = "400" alt = "" />
<Div class = "slider-bg" > </ div>
<Div class = "slider-info" >
<strong> Donec Ultrices </ strong>
<P class = "cursor de texto" > DUIs Viverra velit Orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue molestie. Donec ultrices facilisis Erat em porttitor. </ p>
</ Div>
</ Li>
<li>
<Img src = "images/slide3.gif" width = "600" height = "400" alt = "" />
<Div class = "slider-bg" > </ div>
<Div class = "slider-info" >
<strong> Est Imper </ strong>
<P class = "cursor de texto" > Phasellus sed Lectus nisl, Eget cursus eros. Suspendisse posuere Orci eu lorem luctus et nunc posuere porta. Cras sed Lectus vitae leo accumsan adipiscing. </ p>
</ Div>
</ Li>
</ Ul>
<p> O exemplo acima demonstra uma maneira original para rodar conteúdo em destaque. Similar a outros exemplos, ele usa as classes definidas com <strong> slideClass </ strong> para criar o efeito acima. </ p>
<Pre class = "js" >
$ (Document). Ready (function () {
$ ("# Example10"). ZAccordion ({
width: 884,
velocidade: 600,
slideClass: "slider",
slideWidth: 600,
altura: 400
});
});
</ Pre>
<h2> Exemplo 11 - Flexibilização </ h2>
<Ol id = "example11" >
<li> <img src = "images/slide0.gif" width = "600" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide1.gif" width = "600" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide2.gif" width = "600" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide3.gif" width = "600" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide4.gif" width = "600" height = "150" alt = "" /> </ li>
</ Ol>
<p> Este exemplo mostra uma maneira rápida de adicionar <strong> flexibilização </ strong> ao acordeão usando o Plugin Flexibilização jQuery. </ p>
<Pre class = "js" >
$ (Document). Ready (function () {
$ ("# Example11"). ZAccordion ({
facilitando: "easeOutBounce",
altura: "150px",
slideWidth: "600px",
width: "900px"
});
});
</ Pre>
<h2> Exemplo 12 - Disparando uma função usando AfterBuild </ h2>
<Ol id = "example12" >
<li> <img src = "images/slide0.gif" width = "700" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide1.gif" width = "700" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide2.gif" width = "700" height = "150" alt = "" /> </ li>
<li> <img src = "images/slide3.gif" width = "700" height = "150" alt = "" /> </ li>
</ Ol>
<P id = "build" > <span> </ span> </ p>
<p> O <strong> AfterBuild </ strong> opção pode ser configurado para disparar uma função uma vez que o acordeão é construído. Abaixo, o <strong> AfterBuild </ strong> opção irá alterar o texto de um <em> ID </ em> . Como um exemplo prático, esta opção pode ser usada para definir a posição do acordeão CSS a partir de fora da tela para a tela, escondendo a construção inicial e mostrando o acordeão apenas quando estiver pronto. </ p>
<Pre class = "js" >
$ (Document). Ready (function () {
$ ("# Example12"). ZAccordion ({
height: "150",
slideWidth: "700",
width: "960",
AfterBuild: function () {
$ ("# Construir span") html ("Build completa.").;
}
});
});
</ Pre>
<h2> Exemplo 13 - Altura 100% e 100% da largura </ h2>
<p> Por favor, veja o incluído <a href = "percentage.html" > percentage.html </ a> arquivo. </ p>
</ Div>
</ Div>
</ Body>
</ Html></script></!>
</div>
<div class='clear'></div>
</div><div class='widget HTML' data-version='1' id='HTML4'>
<h2 class='title'>Blogger templates</h2>
<div class='widget-content'>
</div>
<div class='clear'></div>
</div><div class='widget HTML' data-version='1' id='HTML3'>
<h2 class='title'>Blogger news</h2>
<div class='widget-content'>
</div>
<div class='clear'></div>
</div><div class='widget HTML' data-version='1' id='HTML2'>
<h2 class='title'>Blogroll</h2>
<div class='widget-content'>
</div>
<div class='clear'></div>
</div><div class='widget HTML' data-version='1' id='HTML1'>
<h2 class='title'>About</h2>
<div class='widget-content'>
</div>
<div class='clear'></div>
</div>
<div class='widget BlogArchive' data-version='1' id='BlogArchive1'>
<h2>Blog Archive</h2>
<div class='widget-content'>
<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>
▼
</span>
</a>
<a class='post-count-link' href='http://thomgsantos.blogspot.com/2012/'>2012</a>
<span class='post-count' dir='ltr'>(5)</span>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>
▼
</span>
</a>
<a class='post-count-link' href='http://thomgsantos.blogspot.com/2012/07/'>julho</a>
<span class='post-count' dir='ltr'>(5)</span>
<ul class='posts'>
<li><a href='http://thomgsantos.blogspot.com/2012/07/5.html'>5</a></li>
<li><a href='http://thomgsantos.blogspot.com/2012/07/4.html'>#4</a></li>
<li><a href='http://thomgsantos.blogspot.com/2012/07/postagem-teste-3.html'>Postagem teste #3</a></li>
<li><a href='http://thomgsantos.blogspot.com/2012/07/postagem-teste-2.html'>Postagem teste #2</a></li>
<li><a href='http://thomgsantos.blogspot.com/2012/07/postagem-teste-1.html'>Postagem teste #1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class='clear'></div>
</div>
</div>
<div class='widget Followers' data-version='1' id='Followers1'>
<h2 class='title'>Followers</h2>
<div class='widget-content'>
<div id='Followers1-wrapper'>
<div style='margin-right:2px;'>
<div><script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<div id="followers-iframe-container"></div>
<script type="text/javascript">
window.followersIframe = null;
function followersIframeOpen(url) {
gapi.load("gapi.iframes", function() {
if (gapi.iframes && gapi.iframes.getContext) {
window.followersIframe = gapi.iframes.getContext().openChild({
url: url,
where: document.getElementById("followers-iframe-container"),
messageHandlersFilter: gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER,
messageHandlers: {
'_ready': function(obj) {
window.followersIframe.getIframeEl().height = obj.height;
},
'reset': function() {
window.followersIframe.close();
followersIframeOpen("https://www.blogger.com/followers.g?blogID\x3d3243391226522211456\x26colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByMwMDAwMDAiByMwMDAwMDAqByNGRkZGRkYyByMwMDAwMDA6ByMwMDAwMDBCByMwMDAwMDBKByMwMDAwMDBSByNGRkZGRkZaC3RyYW5zcGFyZW50\x26pageSize\x3d21\x26origin\x3dhttp://thomgsantos.blogspot.com/");
},
'open': function(url) {
window.followersIframe.close();
followersIframeOpen(url);
},
'blogger-ping': function() {
}
}
});
}
});
}
followersIframeOpen("https://www.blogger.com/followers.g?blogID\x3d3243391226522211456\x26colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByMwMDAwMDAiByMwMDAwMDAqByNGRkZGRkYyByMwMDAwMDA6ByMwMDAwMDBCByMwMDAwMDBKByMwMDAwMDBSByNGRkZGRkZaC3RyYW5zcGFyZW50\x26pageSize\x3d21\x26origin\x3dhttp://thomgsantos.blogspot.com/");
</script></div>
</div>
</div>
<div class='clear'></div>
</div>
</div></div>
</div>
<div class='clear'></div>
</div>
<div id='footer'>
<div class='fcred'>
© <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script>
<a href='http://thomgsantos.blogspot.com/'>.</a> Blogger by <a href='http://besttheme.net/'>Best Themes</a> | <a href='http://themeshive.com/'>ThemesHive</a> |
Designs by <a href='http://www.fabthemes.com' title='WordPress Themes Designs'>Fab Themes</a>
</div>
<div class='clear'></div>
</div>
<div class='clear'></div>
</div>
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/4290687098-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY6CUq6oR5gYgf3CNMDs7iiJCq0kVQ:1714883120111';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3243391226522211456','//thomgsantos.blogspot.com/p/testes_27.html','3243391226522211456');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '3243391226522211456', 'title': '.', 'url': 'http://thomgsantos.blogspot.com/p/testes_27.html', 'canonicalUrl': 'http://thomgsantos.blogspot.com/p/testes_27.html', 'homepageUrl': 'http://thomgsantos.blogspot.com/', 'searchUrl': 'http://thomgsantos.blogspot.com/search', 'canonicalHomepageUrl': 'http://thomgsantos.blogspot.com/', 'blogspotFaviconUrl': 'http://thomgsantos.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'pt-BR', 'localeUnderscoreDelimited': 'pt_br', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22. - Atom\x22 href\x3d\x22http://thomgsantos.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22. - RSS\x22 href\x3d\x22http://thomgsantos.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22. - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/3243391226522211456/posts/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/a26ecadc30bb77e6', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Gerar link', 'key': 'link', 'shareMessage': 'Gerar link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Compartilhar no Facebook', 'target': 'facebook'}, {'name': 'Postar no blog!', 'key': 'blogThis', 'shareMessage': 'Postar no blog!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Compartilhar no Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Compartilhar no Pinterest', 'target': 'pinterest'}, {'name': 'E-mail', 'key': 'email', 'shareMessage': 'E-mail', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27pt_BR\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Leia mais', 'pageType': 'static_page', 'pageId': '6109536066989009755', 'pageName': 'testes', 'pageTitle': '.: testes'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Editar', 'linkCopiedToClipboard': 'Link copiado para a \xe1rea de transfer\xeancia.', 'ok': 'Ok', 'postLink': 'Link da postagem'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Personalizar', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'testes', 'description': '\ufeff \t \t\t Exemplos zAccordion \x3c/ title\x3e \t\t\x3cMeta http-equiv \x3d \x22Content-Type\x22 content \x3d \x22text / html; charset \x3d UTF-8\x22 /\x3e \t\t\x3cScript type \x3d...', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_s8RkvG8cHr89rGKyYexuCsW1xWiPtFH97fr22H8kGsqN1nV23Y2szQVi58BASbO29KYhASxMkujQ', 'url': 'http://thomgsantos.blogspot.com/p/testes_27.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': true, 'isPost': false, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'pageId': 6109536066989009755}}]);
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML5', 'menu-primary', document.getElementById('HTML5'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList1', 'menu-primary', document.getElementById('PageList1'), {'title': '', 'links': [{'isCurrentPage': false, 'href': 'http://thomgsantos.blogspot.com/', 'title': 'In\xedcio'}, {'isCurrentPage': false, 'href': 'http://thomgsantos.blogspot.com/p/redes-sociais.html', 'id': '2223438006089075411', 'title': 'Redes Sociais'}, {'isCurrentPage': false, 'href': 'http://thomgsantos.blogspot.com/p/contatos.html', 'id': '1666567481228173463', 'title': 'Contatos'}, {'isCurrentPage': true, 'href': 'http://thomgsantos.blogspot.com/p/testes_27.html', 'id': '6109536066989009755', 'title': 'testes'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': true}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'menu-primary', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2706874810-lbx__pt_br.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/13464135-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AttributionView', new _WidgetInfo('Attribution1', 'main', document.getElementById('Attribution1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML6', 'sidebar', document.getElementById('HTML6'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'sidebar', document.getElementById('HTML4'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'sidebar', document.getElementById('HTML3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'sidebar', document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'sidebar', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Carregando\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FollowersView', new _WidgetInfo('Followers1', 'sidebar', document.getElementById('Followers1'), {}, 'displayModeFull'));
</script>
</body>
</html> 