Artigos com a tag 'USimpleTabStrip TabStrip'

Accordion Simples com a classe USimpleTabStrip

A classe USimpleTabStrip , apresentado em TabStrip simples discreta , também podem ser utilizados para realizar um acordeão menu simples .
offerti da Scriptaculous : Usando os efeitos de BlindUp() e BlindDown() oferecida pela Scriptaculous :

1
2
3
4
5
6
7
8
9
10
função init () {
USimpleTabStrip ( ) ; USimpleTabStrip uts = new ();
; uts Init ().;
function ( e ) { UTS. OnShow = função (s) {
( e ) ; . novo efeito BlindDown (s);
}
function ( e ) { UTS. onHide = função (s) {
( e ) ; . novo efeito BlindUp (s);
}
}

E pela substituição de elementos HTML ( fonte HTML ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
"accordion" > < div class = "acordeão">
"#acc1" > Accordion 1 < / a > < um href = "# ACC1"> Acordeão 1 </ uma >
"acc1" >< / a > < um name = "ACC1"> </ uma >
< div >
h1 > < h1 > Content # 1 </ h1 >
p > < p > Blá, blá, blá .... </ p >
</ div >

"#acc2" > Accordion 2 < / a > < um href = "# ACC2"> Acordeão 2 </ uma >
"acc2" >< / a > < um name = "ACC2"> </ uma >
< div >
h1 > < h1 > Conteúdo # 2 </ h1 >
p > < p > Blá, blá, blá .... </ p >
</ div >

"#acc3" > Accordion 3 < / a > < um href = "# ACC3"> Acordeão 3 </ uma >
"acc3" >< / a > < um name = "ACC3"> </ uma >
< div >
h1 > < h1 > # 3 Conteúdo </ h1 >
p > < p > Blá, blá, blá .... </ p >
</ div >

</ div >

É obtido por um acordeão menu simples que pode ser usado em um extremamente rápido.

Leia mais ...

TabStrip Simples Discreto

USimpleTabStrip JavaScript discreta é melhorar a âncora do link clássico (ainda) dentro de uma página HTML. Esta fonte é uma melhoria da função apresentada em TabStrip discreta . Nesta versão, bem como alinhar o código para liberar 1,6 de prototype.js criou uma classe real para lidar com o TabStrip. A versão apresentada aqui é muito simples e direto. Seu trabalho principal está na adição de um evento de clique com o âncora do link normal. Estilos CSS não são apresentados também, só para deixar o máximo de liberdade de ação, mas você pode obter um TabStrip eficaz com algumas linhas extras de código CSS, consulte Adicionando estilos CSS abaixo.

Código HTML

A classe USimpleTabStrip trabalha em um HTML simples, sftuttando a âncora ( &lt;a name&gt;&lt;/a&gt; ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<! - Simples lista de links na página ->
< ul >
= "#tbs1" > Link 1 < / a >< / li > < los > < um href = "# Tbs1"> Link 1 </ um > </ viagem >
= "#tbs2" > Link 2 < / a >< / li > < los > < um href = "# tbs2"> Link 2 </ um > </ viagem >
= "#tbs3" > Link 3 < / a >< / li > < los > < um href = "# tbs3"> Link 3 </ um > </ viagem >
</ ul >

<! - Blocos / guias ->

"tbs1" >< / a > < um name = "Tbs1"> </ uma >
< div >
h1 > < h1 > Lista # 1 </ h1 >
p > < p > Blá, blá, blá .... </ p >
</ div >

"tbs2" >< / a > < um name = "tbs2"> </ uma >
< div >
h1 > < h1 > Lista # 2 </ h1 >
p > < p > Blá, blá, blá .... </ p >
</ div >

"tbs3" >< / a > < um name = "tbs3"> </ uma >
< div >
h1 > < h1 > Dados # 3 </ h1 >
p > < p > Blá, blá, blá .... </ p >
</ div >

funziona da contenitore. A etiqueta de div logo abaixo da âncora a funcionar como um recipiente.

Leia mais ...


Pare SOPA