Em uma aplicação web, muitas vezes precisamos que uma determinada seja aberta de forma diferente do padrão. Por exemplo, algumas vezes precisamos inserir a página dentro de uma tag div na página atual ou abri-la em uma janela popup
Neste artigo, apresentaremos um script que otimiza a execução desses procedimentos, através da definição de classes para os links, sendo que para cada uma dessas classes definiremos ações distintas.
Para conseguir isso, basicamente iremos definir diversas funções .on() do jQuery para o evento click, uma para cada classe que queremos definir. Essa função deverá ter a seguinte definição:
$(document).on('click', '.link', function (event) { ... }
Também precisamos definir a tag a dessa forma:
<a href="#" class="..." data-action="..." data-target="..."> ... </a>
Também podemos usar:
<button type="button" class="..." data-action="..." data-target="..."> ... </button>
onde:
- action: é a url da página de destino que será lida
- target: é a tag onde o conteúdo do arquivo lido será inserido
Cada uma dessas funções executa uma sequência de ações similares:
- Lê a url de destino e o alvo onde a página deve ser “aberta”.
- Abre a página web como a função $.ajax() do jQuery e armazena seu conteúdo em uma variável.
- Adiciona o conteúdo desejado ao alvo
Em relação ao alvo, este deve ser uma tag div em um dos formatos a seguir:
<div id="..."> ... </div>
ou
<div id="..."> <div id="titulo"> ... </div> <div id="conteudo"> ... </div> </div>
A primeira opção é usada caso não se precise do titulo da página. A segunda recupera tanto o titulo (tag title dentro de head) quando o conteudo (tag body).
Para a primeira opção, temos um código similar a este:
$(document).on('click', '.action', function (event) {
event.preventDefault();
event.stopPropagation();
var action = $(this).data('action');
var target = $(this).data('target');
$.ajax({
type: 'GET',
url: action
}).done(function(data){
var $temp = $('<div/>', {html:data});
var div = $('#'+target);
div.empty();
div.html( $temp.remove('head').html() );
$('a[href="#'+ target +'"]').trigger("click");
});
});
Para a segunda opção, o código seria o seguinte:
$(document).on('click', '.link', function (event) {
event.preventDefault();
event.stopPropagation();
var action = $(this).data('action');
var target = $(this).data('target');
$.ajax({
type: "GET",
url: url
}).done(function( data ) {
var $temp = $('<div/>', {html:data});
var div = $('#'+target);
div.find('.panel').find("#titulo").empty();
div.find('.panel').find("#titulo").text( $temp.find('title').text() );
div.find('.panel').find("#conteudo").empty();
div.find('.panel').find("#conteudo").html( $temp.remove('head').html() );
});
});
Uma terceira opção seria abrir a página em uma janela popup. Para isso, usaremos o widget dialog da biblioteca jquery-ui. Para isso, devemos adicionar, além da função .on() especifica para esse tipo, a seguinte estrutura, que define que as tags da classe especificada serão dialog‘s:
$( '.dialog' ).dialog({
autoOpen: false,
closeOnEscape: true,
closeText: "fechar",
height: 680,
width: 1046,
show: {
effect: "fadeIn",
duration: 1000
},
hide: {
effect: "fadeOut",
duration: 1000
},
close: function(){
//$(this).remove();
}
});
E teriamos que ter, em nossa página web, a seguinte tag div:
<div class="dialog" id="...">
<div class="text"></div>
</div>
O código para a função .on() seria o seguinte:
$(document).on('click', '.popup', function (event) {
event.preventDefault();
event.stopPropagation();
var action = $(this).data('action');
var target = $(this).data('target');
$.ajax({
type: "GET",
url: action
}).done(function(data){
var $temp = $('<div/>', {html:data});
//var dialog_box = add_dialog(target);
var dialog_box = $('#'+target);
$(dialog_box).find('.text').empty();
$(dialog_box).find('.text').html( $temp.remove('head').html() );
$(dialog_box).dialog('option', 'title', $temp.find('title').text());
$(dialog_box).dialog( "open" );
});
});