Quer fazer aqueles menus estilo Accordion sem o uso de qualquer framework JavaScript? E ainda por cima o tamanho do Script é de 1KB. Sim, isso é possível, foi o que fez o Leigeber, dê só uma olhada lá.
Via: Anieto2K - Acordeón horizontal en Javascript de solo 1kb
Já pensou em adicionar um teclado virtual a suas aplicações?
Esta versão desenvolvida em JavaScript, nos permite, entre outras coisas, selecionar a configuração das teclas que desejamos mostrar dentro de várias possíveis.
O Script se baseia em 2 arquivos, um JS onde se encontra a funcionalidade principal para que o teclado virtual funcione e um arquivo CSS onde podemos personalizar o teclado a nossa maneira. Simplesmente temos que chamar os arquivos dentro das tags <head></head> de nossa aplicação.
<link rel="stylesheet" type="text/css" href="keyboard.css">
<script type="text/javascript" src="keyboard.js" charset="UTF-8"></script>
Uma vez que você adicionou na página os arquivos necessários, basta você adicionar agora a classe keyboardInput aos seus inputs.
<input type="text" value="" class="keyboardInput">
Todo desenvolvedor um dia já utilizou o famoso efeito Lightbox ao menos uma vez em seus projetos, seja para mostrar uma galeria de fotos, ou para mostrar formulários de login, objetos multimídia. Ele se tornou uma bela alternativa ao popup. Para os utilizadores do framework jquery existe uma alternativa chamada prettyPhoto. Sua utilização é muito simples, basta efetuar o download do jquery, e dos arquivos do prettyPhoto. Exemplo de como adicioná-lo na página:
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
Depois basta adicionar o atributo rel=”prettyOverlay” em sua tag que o JavaScript executa todo o processo. Exemplo:
<a href="images/fullscreen/1.jpg" rel="prettyOverlay" title="Descrição da Imagem">IMAGEM 1</a>
Caso você precise adicionar funcionalidades em suas aplicações, é necessário verificar antes se o usuário possui o complemento instalado em seu micro, pois caso contrário você pode alertá-lo disso e não ter problemas com suas aplicações. Isso pode ocorrer quando você está fazendo o uso do window.ActiveXObject(). Abaixo você vê uma recompilação dos detectores de plugins para Internet Explorer:
var plugins = {
hasAcrobat:function() {
if (!window.ActiveXObject) return false;
try { if (new ActiveXObject('AcroPDF.PDF')) return true;}
catch (e) {}
try { if (new ActiveXObject('PDF.PdfCtrl')) return true;}
catch (e) {}
return false;
},
hasFlash: function() {
if (!window.ActiveXObject) return false;
try {if (new ActiveXObject('ShockwaveFlash.ShockwaveFlash')) return true;}
catch (e) { return false;}
},
hasJava: function() {
return (!navigator.javaEnabled());
},
hasQuickTime: function() {
if (!window.ActiveXObject) return false;
try { if (new ActiveXObject('QuickTime.QuickTime')) return true;}
catch (e) {}
try {if(new ActiveXObject('QuickTimeCheckObject.QuickTimeCheck')) return true;}
catch (e) {};
return false;
},
hasRealPlayer: function() {
if (!window.ActiveXObject) return false;
var definedControls = [
'rmocx.RealPlayer G2 Control',
'rmocx.RealPlayer G2 Control.1',
'RealPlayer.RealPlayer(tm) ActiveX Control (32-bit)',
'RealVideo.RealVideo(tm) ActiveX Control (32-bit)',
'RealPlayer'
];
for (var i = 0; i < definedControls.length; i++) {
try {if(new ActiveXObject(definedControls[i])) return true;}
catch (e) {continue;}
}
return false;
},
hasShockwave: function() {
if (!window.ActiveXObject) return false;
try {if(new ActiveXObject(’SWCtl.SWCtl’)) return true;}
catch (e) {return false;}
},
hasWMP: function() {
if (!window.ActiveXObject) return false;
try {if(new ActiveXObject(’WMPlayer.OCX’)) return true;}
catch (e) { return false;}
}
}
if (plugins.hasFlash()) {
.... você possui o plugin do flash ...
} else {
.... você não possui o plugin do flash ...
}
Você pode ver uma demonstração de uso aqui.
O jQuery é o framework javascript utilizado por cerca de 50% dos desenvolvedores hoje em dia devido as suas facilidades de uso, e se você quer começar a utilizá-lo e não quer fazer feio para seus amigos, aconselho a dar uma olhada nesse guia que foi criado por Simon Willison:
Nesses slides você tem uma rápida introdução a tudo o que o Framework jQuery oferece:
Recentemente, Trevor Davis postou em seu site uma solução para abrir links externos em uma nova janela com jQuery, que consiste no seguinte:
$(document).ready(function(){
$("a[@href^='http']“).attr(’target’,’_blank’);
});
O que esse script faz é pegar todos os links da página que iniciem com http e com isso o JavaScript adiciona o atributo target com valor _blank. É uma solução muito interessante, mas a meu ver, eu utilizaria uma solução mais semântica:
$(document).ready(function(){
$("a[@rel=external]“).attr(’target’,'_blank’);
});
Minha solução pega todos os links da página que contenham o atributo rel=”external” e faça com que os mesmos abram em uma outra aba/janela. A meu ver, bem mais semântico. E você, tem alguma sugestão?
Enquanto eu aos 12 anos não sabia mexer no computador, esse NERD já contribui para a comunidade Open-Source mantendo códigos do Drupal e jQuery, e dando palestras por Los Angeles. Nas horas vagas ele diz que gosta de compor e tocar música contemporânea.
Via: Freak Group.
Já vi pessoas utilizarem document.write para gerar uma página inteira, e sinceramente, isso é ridículo, sendo que existem opções mais limpas e cômodas. Utilizar JavaScript para fazer uma página inteira é uma coisa ridícula, mas caso seja necessário, aconselho a utilizar a DOM Tool.
DOM Tool se encarrefa de converter qualquer porção de HTML nas correspondentes chamadas JavaScript. Dessa forma, a criação de pequenas porções de HTML a partir de JavaScript serão mais rápidas de implementar.
Via: Anieto2K - DOM Tool, genera HTML mediante JS de forma fácil.
innerHTML com certeza foi uma mão na roda para os desenvolvedores durante muito tempo, e ainda hoje existe muita gente que o utiliza seja por não conhecer outras alternativas ou por pura preguiça.
A partir de um Array, vamos criar uma lista de elementos uitlizando innerHTML e depois usando DOM.
innerHTML:
data = new Array("one","two","three");
mHTML = "<ul>";
for(i=0;i<data.length;i++) {
mHTML+="<li>" + data[i] + “</li>”;
}
mHTML+=”</ul>”;
document.getElementById(”mContainer”).innerHTML = mHTML;
Dessa forma definimos todo o HTML necessário para construírmos nossa lista, usando DOM seria dessa forma:
DOM:
data = new Array("one","two","three");
// create the UL element that our LI elements will descend from
eUL = document.createElement(”ul”);
// loop over the length of the “data” array
for(i=0;i<data.length;i++) {
// create an LI
eLI = document.createElement(”li”);
// append the value of data[i] to the LI as a text node
eLI.appendChild(document.createTextNode(data[i]));
// append the LI to the UL
eUL.appendChild(eLI);
}
// append the UL to the “mContainer” element.
document.getElementById(”mContainer”).appendChild(eUL);
