Artigos com a tag 'jQuery'
Como visto no post Variedade de codificação e de codificação abordagens que um desenvolvedor possa ter para resolver um problema são múltiplas e diversificadas para a mesma linguagem de programação utilizada. Veja como alguns dos quadros mais populares Javascript ter resolvido uma função simples de CamelCase :
Prototype.js
Prototype.js , versão 1.6.0.3, explicitamente propõe um método camelize() para fazer o CamelCase em uma corda. A abordagem do autor é bastante simples eo código é auto-explicativo. Neste caso, não foi feita qualquer utilização de expressão regular!
1 2 3 4 5 6 7 8 9 10 11 12 13
| ( ) { camelize: function () { this . split ( '-' ) , len = parts. length ; . peças var = Esta divisão ('-'), len = partes de comprimento,. len == 1 ) return parts [ 0 ] ; se as peças (len == 1) de retorno [0];
this . charAt ( 0 ) == '-' camelized var = esta charAt (0). == '-' 0 ] . charAt ( 0 ) . toUpperCase ( ) + parts [ 0 ] . substring ( 1 ) ? Parts [0]. CharAt (0). ToUpperCase () + parts [0] Substring. (1) 0 ] ; : Partes [0];
var i = 1 ; i < len ; i ++ ) for (var i = 1, i <len; i + +) i ] . charAt ( 0 ) . toUpperCase ( ) + parts [ i ] . substring ( 1 ) ; camelized + = partes [i] charAt (0) toUpperCase () + peças [i] substring (1)...;
retorno camelized; } |
Leia mais ...
(che nella versione camelize è backgroundColor ). Eu não entendi se é um bug ou algo intencional, a verdade é que qualquer que seja o método animate() para jQuery não funciona com alguns atributos CSS, incluindo background-color (que versão camelize é backgroundColor ). Por exemplo, o código seguinte não tem nenhum efeito:
1 2 3 4 5
| "text/css" > < estilo type = "text / css"> div # caixa {background-color: # eee; width: 100px; height: 100px} </ estilo > <-! .... -> "box" >< / div > < div id = "caixa"> </ div > |
1
| ) . animate ( { backgroundColor : "#f90" } ) ; $ ('Div # caixa') Animar ({backgroundColor: "# f90"}).; |
Para resolver esse problema você precisa instalar uma extensão: Animações Cor jQuery . Isso permite que você execute o "Animations" atributo backgroundColor e mais:
-
backgroundColor -
borderBottomColor -
borderLeftColor -
borderRightColor -
borderTopColor -
color -
outlineColor
Leia mais ...
Recentemente, Cristiano Up lançou um plugin útil para WordPress que podem aggiugere dois links para cada comentário em um post (talvez você tenha instalado um similar, já que no WordPress.org diretório que transmitiu um casal, no entanto, sendo um software italiano seria o evento para homenagear o excelente trabalho feito pelos cristãos). Esses links (resposta e citação), conhecer e / ou indicação do autor de um comentário, realizando a tarefa tediosa de inserir o sinal de arroba (@) para indicar a quem é dirigida. Neste tutorial vou explicar - a médio especializados usuários - como adicionar essas características duas "mão", sem recorrer à instalação de quaisquer plugins. Além disso conscientemente explorar os recursos de jQuery para JavaScript partido. A técnica que apresento é o mesmo que eu usei para introduzir esta característica neste blog.
Nota: O uso de um plugin é a melhor solução para aqueles que tendem a mudar freqüentemente seu modelo WordPress, ou pelo menos, tem planos para implementar isso. Este tutorial é apenas para mostrar como realizar intervenções específicas dentro do código do WordPress e é dedicado aos mais curiosos.
Edite seu comments.php
A primeira mudança que fazemos é para inserir o link "Responder" e "Ações" em cada comentário. Para fazer isso, edite o arquivo comments.php localizado na pasta do nosso tema. Este arquivo contém todas as instruções que exibem os comentários no final de um post. A seção estamos interessados (que podem variar ligeiramente de tema para tema) é o loop para a criação de comentários diferentes, identificados por:
Leia mais ...
Como todas as bibliotecas deste tipo também jQuery permite que você estenda sua funcionalidade básica usando o plugin real. Respeitar as regras do seu funcionamento, ou seja restituiendo sempre um ponteiro para o item selecionado ou o jQuery mesmo, você pode escrever um plugin com algumas linhas de código. Tomemos por exemplo o código proposto em jQuery contra todos: um benchmark com 5 navegador , que foi (após a correção relatado 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 ();.... } ); |
Leia mais ...
Um bom programador não tem nenhum problema mudar de uma linguagem de programação para outra. A escolha de se concentrar em uma determinada linguagem de quadro, ou ambiente de desenvolvimento, é ditada mais pela disponibilidade de tempo e do tipo de trabalho que se passa. No entanto, um fator importante que pode influenciar a escolha do "quadro" Tal é a simpatia eo carinho que pode amadurecer ao longo do tempo.
Especificamente, eu queria analisar alguns - não todos - frameworks JavaScript disponíveis hoje, porque mesmo "avisado" para dar uma olhada especialmente em jQuery .
Os criadores do mootools (um dos quadros mais populares JavaScript) disponibilizaram uma ferramenta para executar um teste de velocidade e validade de cinco quadros conhecidos JavaScript: Slickspeed . Este teste, o resultado não é de todo óbvio, é importante como trabalhar no cliente quadros laterais Javascript, que são executadas pelo nosso browser. É precisamente por esta razão que alguns acham Safari mais rápido que o Internet Explorer ou Google Chrome mais rápido que o Firefox . No entanto, isso muitas vezes depende do tipo de página que você está vendo. De fato, pode muito bem acontecer que um determinado site é realmente "mais rápido" quando visto no Safari, mas isso não significa que "todos os sites" será mais rápido com o Safari! Obviamente, isso é verdade para qualquer outro navegador.
O benchmark
Nos testes que eu fiz com Slickspeed eu comparei os navegadores disponíveis na minha máquina (Windows Vista 64 bits Utilmate - Intel Core 2 Quad de 2,4 GHz com 8Gb de RAM).
Infelizmente, os testes não são capazes de executar com Internet Explorer 7, como o carro bateu, mesmo saindo da escala com os resultados! Mais uma vez, parabéns Microsoft.
Eu crercato para manter o mesmo status do PC durante o ensaio, abrir o navegador e não individualmente, enviando nenhum outro processo em execução.
Nota: Se você se sentir como se também executar um ou mais desses testes, você pode comentar sobre este post em caso de resultados "estranhos" e diferente.

Google Chrome foi muito rápido, com um valor de 68 (média) no teste com jQuery . O mais lento, porém, foi Flock , apesar de provenientes da "mãe" mesmo Mozilla. Este fraco desempenho do Flock é muito curioso como as suas redes sociais de corte, porque é precisamente a Rede Social da Web 2.0 para tirar vantagem dos frameworks JavaScript muitos disponíveis, de modo a proporcionar uma experiência de navegação verdadeiramente inovador e interação.
Surpreendentemente bate Firefox e Opera também tem um "pouco agradável, mesmo recebendo um 74 no desempenho do Dojo ! Firefox e Safari, afinal, são semelhantes, com o Safari mais rápido em testes com Mootools e jQuery.
Que quadro para escolher?
Se nós não nos importamos para testar a velocidade de execução e não nos importamos dimesion em Kbytes do mesmo quadro, a resposta pode ser "o que quiser", ou, se quiser, "o que você sabe melhor ou é mais harmonioso com o seu estilo de programação ".
Em última análise, estas estruturas vão olhar tudo um pouco "(ver, por exemplo, o uso de US $), apesar de algumas diferenças importantes e substanciais que podem saltar aos olhos de um perito ou realmente empurrou o uso de uma biblioteca particular. Em princípio, na verdade, tudo o que pode ser feito com jQuery, por exemplo, você pode fazer muito bem com mootools ou protótipos! Se jQuery tem uma sintaxe muito compacto, como todos os métodos de sempre retornar a base objeto jQuery, criando filas intermináveis de oggetto.metodo().metodo().metodo()... disse que isso não é de todo custa uma força, especialmente para aqueles que terão de debug!
Bibliotecas como prototype.js pecado, talvez, na ausência de efeitos, mesmo simples, forçando o desenvolvedor a implementar, como uma divisão scriptaculous.js , pesados e distantes da escolha primeira biblioteca.
Um exemplo
É justamente por isso, por exemplo, levou-me para substituir o protótipo acoplado / scriptaculous com jQuery para criar painéis interativos / undolog.com animado aqui na barra lateral. Na verdade, mesmo usando a API do Google para importar bibliotecas, é uma carga de resíduos e toda a biblioteca scriptaculous para um slideUp slideDown. Para obter informações e um exemplo, aqui está o código Javascript como foi juntamente com o protótipo / scriptaculous:
1 2 3 4 5 6 7 8 9 10 11 12 13
| / Protótipo / / scriptaculous ) . each ( $ $ ('H2.dropdown'). Cada ( element ) { função (elemento) { = "pointer" ; .. elemento de estilo cursor = "ponteiro"; 'click' , elemento. observar ('click', event ) { function (event) { this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration : .5 } ) ; if (.. this. next () estilo de exibição == "") Efeito nova BlindUp (this. next (), {duration: .5});. Effect. BlindDown ( this . next ( ) , { duration : .3 } ) ; Efeito mais novo BlindDown (this. next (), {duration: 0,3}).; event ) ; . Evento Parar (evento); } ) } ); |
e agora é com jQuery:
1 2 3 4 5 6 7 8 9 10
| / JQuery / ) . each ( $ ('H2.dropdown'). Cada ( i ) { função (s) { ) . css ( 'cursor' , 'pointer' ) . click ( $ (Este). 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 ();.... } ); } ); |
Tudo somado, um olhar mais atento, eu não acho que há muita diferença! Mas como eu disse antes ... a questão é "bem" de gosto pessoal.
Leia mais ...
Ainda esta semana (sob a orientação ...) Eu estava navegando em jQuery , uma biblioteca grande no estilo de prototype.js e scriptaculous.js e MooTools , por assim dizer ... e isso é que hoje todo o site foi completamente redesenhado:
Grande começam a ampliar meus horizontes sobre este tipo de bibliotecas! Logo estaremos publicando alguns artigos interessantes, especialmente sobre as diferenças entre jQuery e outras bibliotecas "semelhantes".
Leia mais ...
Google , no último período, lançou uma infinidade de ferramentas para desenvolvedores, atualizando constantemente seus lançamentos. Agora tem um acordo com o quadro AJAX popular, e não apenas para centralizar a distribuição de biblioteca jQuery , Prototype , script.aculo.us , MooTools e dojo !
Na prática, é possível acessar estas bibliotecas, aproveitando a infra-estrutura e da rede do Google, com vantagens significativas em termos de velocidade e segurança.
A velocidade, na carga, é garantida pela mesma rede Google que, além de fornecer uma estrutura de per se de servidor distribuído, permite (por padrão) carregamento compactado (gzip / minify) das bibliotecas. O Google hospedagem mais próxima do pedido será usado para enviar o código e, se não forem cumpridas ou para baixo temporariamente, o Google irá fornecer à rede, no entanto, enviar o código Javascript!
Leia mais ...
Planetozh criou uma bela paisagem da ferramenta dinâmica que pode listar todas as bibliotecas Javascript como Lightbox.
Usando um painel (ver imagem à esquerda) com um número de "carrapatos" (caixa), que indicam as várias características das bibliotecas, você pode executar um filtro obtendo assim uma lista de uma ou mais bibliotecas que fazem o trabalho. Esperamos que o autor mantém atualizada esta página grande, muito útil para desembaraçar uma das bibliotecas de numerosos e poderosos deste tipo.
Leia mais ...
Aqui está mais um recém-lançado biblioteca JavaScript discreta para galerias de imagens e muito mais. Lightview em 2.0.0_rc1 lançamento , também adiciona recursos para janela "aberta" com o conteúdo que vai além da simples imagem: filmes em Flash, QuickTime , Forma e IFRAME! Em comparação à versão anterior (1.1.0 - que trata de apenas imagens), então, esta versão candidata é recursos avançados também estão presentes em outras bibliotecas . . As ferramentas necessárias por Lighview para trabalhar são muito bem conhecidos Prototype 1.6.0.2 e Scriptaculous 1.8.1 . Gliattributi usado para gerenciar a biblioteca são class e rel .
Um aspecto interessante desta biblioteca é o extremo cuidado com que o gráfico aparece.
Nota: 9 - Início Lightview
Leia mais ...
Alguns podem dizer - e com razão - o suficiente! Bibliotecas JavaScript (discreta - não intrusiva, ou parcialmente) para gerenciar imagens e galerias existem tantos. De qualquer forma aqui está a lista, com prós e contras, o melhor que eu tentei.
Slimbox 1:41
Extremamente mínima 7K (versão 1,41), exige mootools para trabalhar. Como indicado na página inicial é um gráfico verdadeiro clone Lightbox , veremos a seguir. Honestamente, além da extrema compacidade da biblioteca não possui características peculiares. No mesmo local, no entanto, você também pode encontrar um script para gerar em tempo de execução reflexões ... você pode querer limitar esse 
Nota: -6 - Slimbox Home Page, Home Page Reflection.js para MooTools
Lightbox2
Um dos mais conhecidos e simples. Gerencia imagens contidas neste comunicado são (por isso não funciona com o QuickTime, Flash, etc.) Para sua operação, requer Prototype e Scriptaculous . Use o atributo rel para identificar os links de suas imagens para ser processado:
1
| "images/image-1.jpg" rel = "lightbox" title = "my caption" > image #1 < / a > < um href = "images/image-1.jpg" rel = "lightbox" title = "caption minha"> image # 1 </ uma > |
Como as outras bibliotecas que vamos ver, ele suporta o modo de apresentação de slides, inserindo colchetes qualquer identificador em uma série de link / imagem:
1 2 3
| "images/image-1.jpg" rel = "lightbox[roadtrip]" > image #1 < / a > < um href = "images/image-1.jpg" rel = "lightbox [roadtrip]"> image # 1 </ uma > "images/image-2.jpg" rel = "lightbox[roadtrip]" > image #2 < / a > < um href = "images/image-2.jpg" rel = "lightbox [roadtrip]"> image # 2 </ uma > "images/image-3.jpg" rel = "lightbox[roadtrip]" > image #3 < / a > < um href = "images/image-3.jpg" rel = "lightbox [roadtrip]"> image # 3 </ uma > |
Nota: 6 - Página Inicial Lightbox2
LightWindow 2,0
Mesmo isso é muito comum! Afinal, como entender o que é o mais utilizado?
. No entanto, é extremamente abrangente e versátil. No local está o pedido de doações para a compra de um Mac ... um pouco invasivo e urgente ... Enfim, como o anterior, para o seu funcionamento, exige a presença de Prototype e Scriptaculous . Ao contrário de seu antecessor, no entanto, isso permite que você visualize tipos moltisiimi de arquivos: a partir das imagens, filmes QuickTime, animações em Flash, externos páginas HTML e PDF. ) altri obbligatori ( class e params - per impostare il comportamento della libreria). Por outro lado, usa vários atributos, alguns opcionais ( author, caption e title ) outro (obrigatório class e params - para definir o comportamento da biblioteca). Por exemplo, para exibir um show de galeria ou slide usando o atributo rel :
1 2 3
| "gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "Look's super tasty!" author = "Unknown" > image #1 < / a > < um href = "gallery/0-sushi.jpg" class = "LightWindow" title rel = "[Sushi]" = "Left Behind" caption = "Look super saboroso!" author = "Desconhecido"> image # 1 </ a > "gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Beware of warewolves..." caption = "I shouldn't be doing this when I am hungry" author = "Unknown" > image #2 < / a > < um href = "gallery/1-sushi.jpg" class = "LightWindow" title rel = "[Sushi]" = "Cuidado com warewolves ..." caption = "Eu não deveria estar fazendo isso quando eu estou com fome" author = "Desconhecido"> image # 2 </ uma > "gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "That was good!" caption = "Take that sushi!" author = "Unknown" > image #3 < / a > < um href = "gallery/2-sushi.jpg" class = "LightWindow" rel = "[Sushi]" title = "Essa foi boa!" caption = "Pegue o sushi!" author = "Desconhecido"> image # 3 </ uma > |
Pontuação: 8 - Página Inicial LightWindow 2,0
Shadowbox 1.0B
Embora o beta versão 1.0, este é talvez o mais completa biblioteca, tanto do ponto de vista funcional para ambas as bibliotecas suporte. Para seu funcionamento, de fato, você pode escolher entre uma variedade de quadros, com o arquivo "adaptadores" especialmente fabricadas e fornecidas pelo autor:
O efeito visual (configurável através da pele / css), então, ao contrário dos outros, é definitivamente mais atraente. Os atributos são usados apenas rel onde, no seu interior, encontram espaço todos os outros parâmetros de configuração. Por exemplo, para realizar uma galeria, é só usar:
1 2
| "beach.jpg" rel = "shadowbox[Vacation]" > The Beach < / a > < um href = "beach.jpg" rel = "shadowbox [de férias]"> A Praia </ uma > "pier.jpg" rel = "shadowbox[Vacation]" > The Pier < / a > < um href = "pier.jpg" rel = "shadowbox [de férias]"> O Pier </ uma > |
Se você deseja definir algumas opções ( consulte o site para lista completa ) basta usar a seguinte sintaxe:
1
| "myimage.jpg" rel = "shadowbox;options={overlayOpacity: 0.5, resize: false}" > My Image < / a > < um href = "myimage.jpg" rel = "shadowbox; opções = {overlayOpacity: 0,5, resize: false}"> Imagem Minha </ uma > |
Na Internet podem encontrar outras, como Highslide JS . Na verdade, se alguma outra biblioteca que quer denunciar o me ... Enfim, pessoalmente, prefiro Shadowbox para escalabilidade, simplicidade e cruz-quadro.
Nota: 9 - Top Shadowbox 1.0B
Leia mais ...
Últimos Comentários
Gabriel : Olá, interessante artigo. Eu preciso de algo semelhante, mas com algumas mudanças. Em um ...
sebastian : grande parcela - muito obrigado!
Assunto : muito útil mesmo! Eu tentei isso e é exatamente o que eu precisava. Agora eu quero saber como faço para obter ...
vik : Com a ajuda estratégica!
Pimenta : Olá, eu não sei se você é um dos criadores do plugin WP Bannerize. Tenho visto um ...