PopWindow

Posted by Daniel Lopes on 29/12/2008

De fato não me arrependo em nada em migrar para Jquery. Muitos fatores me fazem acreditar que o Jquery é superior ao Prototype, fatores como milhares de plugins e uma sintaxe mais simples para trabalhar com o dom.

Pessoalmente odeio soluções como popup’s e modal ( na maioria dos casos), e pensando neste problema, acabei esbarrando na necessidade de um plugin para jquery que permitisse exibir divs( ou qualquer outra tag ) próxima a um botão ou link ao ser clicado ( algo semelhante a um tooltip, mas que seja ativado e desativado por click ).

E como não encontrei nenhum plugin que fizesse isso de forma simples e objetiva, acabei criando um.

O código do plugin esta no github ( http://github.com/danielvlopes/popwindow/tree/master ) e a página no site do Jquery é http://plugins.jquery.com/project/popwindow

Veja abaixo como usar

Javascript

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.popwindow.js"></script>
<script src="jquery.bgiframe.js"></script>      

<script language="javascript" type="text/javascript">

$(document).ready(function(){
  $("#show").popwindow("#popup_div1");
});

</script>

XHTML

<input type="button" id="show" value="Show Message in Bottom"/>
<div id="popup_div1" class="popup_msg">
    Popup Message<br /> 
    Message goes here <br /> 
    Message goes here
</div>

CSS

.popup_msg{ display:none; }

Parâmetros

  • position => “bottom”,“right”,“top”,“left”
  • offsetTop => Qualquer valor númerico (default é 10)
  • offsetSides => Qualquer valor númerico (default é 0)
  • transitionSpeed => “fast”,“slow” (default é “fast”)

Github

Projeto está hospedado no Github e as atualizações da documentação serão feitas por lá.

blog comments powered by Disqus