Exibir filtros dinâmicos nas listagem de imóveis. Exemplo: Casa, Apartamento...
Como Utilizar
1- Importar o arquivo filtro.js, exibido em Complementos, Item 1;
2- Inserir o Filtro, exibido em Complementos, Item 2;
3- Dentro do foreach de exibição de Imóveis, criar uma <ul> e fechar </ul>;
4- Dentro da <ul>, criar uma <li> e fechar </li>;
5- Dentro da <ul> inserir a ID, id="itemContainer", ficando assim: <ul id="itemContainer">
6- Dentro da <li> inserir a clase, class="{$rs2.tipo|strip:''}, ficando assim: <li class="{$rs2.tipo|strip:''}">
6.1- A classe tem como objetivo gerar os tipos de imóveis para que o filtro do item 2, consiga filtrar, foi inserido uma função (strip) para remover espaços em brancos, uma vez que o código não consegue filtrar com espaços.
Complementos
Código: Selecionar todos
1- filtro.js
(function($) {
$.fn.filtrogz = function(settings) {
settings = $.extend({
useHash: true,
animationSpeed: 1000,
show: { width: 'show', opacity: 'show' },
hide: { width: 'hide', opacity: 'hide' },
useTags: true,
tagSelector: '#filtro a',
selectedTagClass: 'current',
allTag: 'todos'
}, settings);
return $(this).each(function(){FILTRO: FILTRO: seleciona TAG e Filtro
Código: Selecionar todos
$(this).bind("filter", function( e, tagToShow ){
if(settings.useTags){
$(settings.tagSelector).removeClass(settings.selectedTagClass);
$(settings.tagSelector + '[href=' + tagToShow + ']').addClass(settings.selectedTagClass);
}
$(this).trigger("filtroimoveis", [ tagToShow.substr(1) ]);
});FILTRO: passar class para exibir, restante esconde
Código: Selecionar todos
$(this).bind("filtroimoveis", function( e, classToShow ){
if(classToShow == settings.allTag){
$(this).trigger("show");
}else{
$(this).trigger("show", [ '.' + classToShow ] );
$(this).trigger("hide", [ ':not(.' + classToShow + ')' ] );
}
if(settings.useHash){
location.hash = '#' + classToShow;
}
});EXIBIR: exibe class
Código: Selecionar todos
$(this).bind("show", function( e, selectorToShow ){
$(this).children(selectorToShow).animate(settings.show, settings.animationSpeed);
});/* EXIBIR: esconde class*/
Código: Selecionar todos
$(this).bind("hide", function( e, selectorToHide ){
$(this).children(selectorToHide).animate(settings.hide, settings.animationSpeed);
});============ Checar URL ====================
Código: Selecionar todos
if(settings.useHash){
if(location.hash != '')
$(this).trigger("filter", [ location.hash ]);
else
$(this).trigger("filter", [ '#' + settings.allTag ]);
}============ Configurações TAGS ====================
Código: Selecionar todos
if(settings.useTags){
$(settings.tagSelector).click(function(){
$('#itemContainer').trigger("filter", [ $(this).attr('href') ]);
$(settings.tagSelector).removeClass('current');
$(this).addClass('current');
});
}
});
}
})(jQuery);
$(document).ready(function(){
$('#itemContainer').filtrogz();
});2- Menu Filtro
Código: Selecionar todos
<ul id="filtro">
<li><a href="#todos">Todos</a></li>
<li><a href="#CASA">Casa</a></li>
<li><a href="#APARTAMENTO">Apartamento</a></li>
<li><a href="#IMÓVEISRURAIS">Imóveis Rurais</a></li>
</ul>