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
<div id="..."> ... </div>
ou
<div id="..."> <div id="titulo"> ... </div> <div id="conteudo"> ... </div> </div>
$(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"); }); });
$(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() ); }); });
$( '.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(); } });
<div class="dialog" id="..."> <div class="text"></div> </div>
$(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" ); }); });