Artigos com a tag 'discreta'


Shadowbox 3.0 beta

Foi lançado agora (graças à sugestão do autor Michael Jackson JI ) a versão beta 3.0 de Shadowbox.js . Além do novo design do site aqui são as mudanças mais importantes nesta versão preliminar:

Continuação ...

jQuery: como construir um Plugin extensão

Como todas as bibliotecas deste tipo também jQuery permite que você estenda sua funcionalidade através de alguns reais plugin do básico. Seguindo as regras do seu funcionamento, ou seja, restituiendo sempre um ponteiro para o elemento ou a própria jQuery selecionado, você pode escrever um plugin com algumas linhas de código. Tomemos por exemplo o código proposto em jQuery contra todos: a referência com cinco navegador foi (após a correção indicada por Luca ):

1
2
3
4
5
) . css ( 'cursor' , 'pointer' ) . click ( $ ('H2.dropdown). Css (' cursor ',' ponteiro '). Clique em (
function () {
$ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if (.. $ (this) next () é (": hidden")) $ (this) next () slideDown () else $ (this) next () slideUp ();....
}
);

Continuação ...

Accordion simples com o USimpleTabStrip classe

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

1
2
3
4
5
6
7
8
9
10
função init () {
USimpleTabStrip ( ) ; USimpleTabStrip UTS = new ();
; UTS init ().;
function ( e ) { UTS. onShow = function (e) {
( e ) ; . novo Efeito BlindDown (e);
}
function ( e ) { UTS. OnHide = function (e) {
( e ) ; . novo Efeito BlindUp (e);
}
}

E elementos HTML reposicionamento ( 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 > < a href = "# acc1"> Acordeão 1 </ a >
"acc1" >< / a > < a name = "acc1"> </ a >
< div >
h1 > < h1 > Conteúdo # 1 </ h1 >
p > < p > Blá, blá, blá .... </ p >
</ div >

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

"#acc3" > Accordion 3 < / a > < a href = "# acc3"> Accordion 3 </ a >
"acc3" >< / a > < a name = "acc3"> </ a >
< div >
h1 > < h1 > Conteúdo # 3 </ h1 >
p > < p > Blá, blá, blá .... </ p >
</ div >

</ div >

Você ganha um Menu Accordion simples que pode ser usado de uma forma extremamente rápida.

Continuação ...

Discreto TabStrip Simples

USimpleTabStrip é um JavaScript discreto pode melhorar a ligação âncora clássico (ainda) dentro de uma página HTML. Essa fonte é uma melhoria da função apresentada em Tabstrip discreto . Nesta versão também alinhar o código para liberar 1,6 de prototype.js foi criado uma classe real para lidar com o TabStrip. A versão aqui apresentada é muito simples e direto. Sua obra principal reside na adição de um evento de clique com o âncora do link normal. Eles também não são apresentados os estilos CSS, apenas para permitir a máxima liberdade de ação, mas você pode obter um TabStrip eficaz com algumas linhas de código CSS adicionais, consulte Adicionar estilos CSS abaixo.

HTML

A classe USimpleTabStrip trabalhando em um simples HTML, 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 > < li > < a href = "# tbs1"> Link 1 </ a > </ li >
= "#tbs2" > Link 2 < / a >< / li > < li > < a href = "# tbs2"> Link 2 </ a > </ li >
= "#tbs3" > Link 3 < / a >< / li > < li > < a href = "# tbs3"> Link 3 </ a > </ li >
</ ul >

<- Blocos / abas ->

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

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

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

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

Continuação ...

Técnicas de substituição de texto no Flash

A técnica de substituição do texto que apresento hoje é, em alguns aspectos, muito interessante. Ao contrário da substituição clássica é a imagem via CSS , esta técnica usa um filme do Flash para substituir os títulos de nosso site. Apesar de ser um pouco mais articulada, uma vez que implica a criação de um filme de inflamação e a utilização de Javascript, permite a obtenção de uma série de vantagens consideráveis:

  • Mantém a "acessibilidade do local, explorando a -True-Discreto Javascript para que crawlers e aranhas continuar a ver a página como HTML simples e correta
  • Ele não exige a criação de imagens n para n stocks. Leva apenas um filme para substituir todos os títulos do nosso site, com uma economia considerável em termos de download
  • Permite a criação de títulos simples, mas também com fonte normalmente não é utilizado na Web
  • O texto pode ser processado em HTML, graças às características do Flash
  • O texto é selecionável
  • Sendo um filme do Flash, você pode colocar qualquer tipo de interatividade e animações

Você vai notar, também, que neste procedimento a CSS dificilmente são levados em conta!

Continuação ...

Javascript discreto: um pouco 'de clareza e cuidado com os impostores

Alguns scripts, e alguns Web, utilizar algumas funções de JavaScript fazê-los passar como não-intrusiva (discreto), mesmo quando eles não são. Que faz um script (geralmente Javascript) não intrusiva? Em princípio, um script JavaScript é não intrusiva quando você pode fazer sem ele! Simplificando! No desenvolvimento de uma usabilidade do site Web da mesma não deve depender de qualquer tipo de script. Apenas neste caso, temos um verdadeiro roteiro discreto.

Continuação ...

Shadowbox AssetUrl: Definir o caminho da imagem

Quando Shadowbox abre a janela para mostrar conteúdo (imagem, iframe, filme, etc ...), vista, esperando, um gif animado que vem no pacote. Se a página que está usando Shadowbox está no mesmo nível que a pasta de imagens, tudo funciona bem. Por padrão, na verdade, olhar para o gif animado abaixo imagens Shadowbox / loading.gif - ou imagens / carga-light.gif se você tiver escolhido a luz estilos (shadowbox-light.css). Caso contrário, e, muitas vezes, há também o risco de não accorgesene, se estamos em um diferentes mastros, que gera um bom código 404 - página não viga em nosso arquivo caso não encontrado!

Para resolver o problema apenas inicializar Shadowbox com um parâmetro adequado que indica precisamente o caminho absoluto para a pasta de imagens: undolog.com de, por exemplo, coloquei o gif animado de carregamento diretamente na pasta imagens neste raiz (como cerca de um bilhão de outros Sites :) . Para tornar esta pasta acessível a Shadowbox, independentemente do caminho, eu incluí uma maneira fácil:

1
2
/ / Init shadowbox parâmetro com AssetUrl
assetURL : 'http://www.undolog.com/' } ) ; Shadowbox Init ({AssetUrl: 'http://www.undolog.com/'}).;

Continuação ...

Todos os clones Lightbox em uma matriz dinâmica

Planetozh criou um belo cenário da ferramenta dinâmica pode listar todas as bibliotecas JavaScript como o Lightbox.

imagem

imagem Usando um painel (veja a imagem à esquerda) com uma série de "tiques" (caixa), que indicam as várias características das bibliotecas, você pode executar um filtro, resultando em uma lista de uma ou mais bibliotecas que fazem o trabalho. Esperamos que o autor mantém actualizado esta página fantástico, muito útil para separar os numerosos e cada vez mais poderoso bibliotecas desse tipo.

Continuação ...

Discreto SWFObject 2.0

swfobject SWFObject é um script JavaScript usado para inserir conteúdo em Flash nas páginas da Web Sua principal função é eliminar a necessidade de ativação de controle por parte do Microsoft Internet Explorer (que, por sinal, está sendo operações descontinuadas - ver aqui ) e, o mais interessante, a capacidade de verificar automaticamente e instalar o Flash Player, se necessário. SWFObject pode ser considerado uma boa alternativa para o kit de instalação / detectar fornecida pela própria Adobe, e que pode ser gerada a partir do IDE do Flash (em todos suas versões). Com a versão 2.0 , SWFObject melhora o seu desempenho e seu uso. Como indicado na documentação oficial , mudou-se para o Google Code, a notícia deste lançamento são tantos como para torná-lo não é compatível com as versões anteriores. Isso resulta, na verdade, em uma revisão completa do código para quem decidir fazer o upgrade de uma versão anterior do SWFObject 2.0.

O script está agora alinhado com o padrão mais recente, tanto sintática e de que "não intrusiva". Suporta todas as características anteriores, como a instalação rápida do Flash Player, com um código mais claro e mais fácil de usar. A passagem dos parâmetros, por exemplo, a partir de Javascript para Flash Player (e, portanto, ao nosso filme) é agora muito mais clara e mais versátil. Também foram introduzidos dois principais modos de operação: estático e dinâmico, dependendo do tipo de página e processo de design que estamos realizando.

Útil e realmente fez bon é a ferramenta on-line que gera código SWFObject para nós.

LINK:

Continuação ...

Effect.Tween Scriptaculous: Como Funciona

Entre todas as bibliotecas "web 2.0" disponíveis, scriptaculous é certamente o mais mal documentado! No site oficial, muitas vezes lento, a documentação é parcial, mal feita e difícil de usar. Com os mais recentes lançamentos, então, algumas novas funcionalidades estão completamente ausentes, assim como o novo núcleo efeito Tween (Effect.Tween). A última, de uma maneira semelhante à do Tween Flash, permite manipular transições personalizadas. SINOPSE sua base é o seguinte:

Continuação ...