Recherche avancée

GestionDSI Recherche avancée.

by lun471k

HTML

<div id="search" class="ui-state-default ui-corner-all">
    <input type="text" placeholder="Rechercher" /><span class="ui-icon ui-icon-search"></span><span class="ui-icon ui-icon-plus"></span>

</div>
<div id="advanced-search">
    <span>
        <label for="titre">Titre</label>
        <input type="text" name="titre" id="titre" />
    </span>
    <span>
        <label for="tags">Tags</label>
        <input type="text" name="tags" id="tags" />
    </span>
    <div>
        <label for="description">Description</label>
        <input type="text" name="description" id="description" />
        <fieldset>
            <legend>Date Créée</legend>
            <label for="dateCreeeDebut">Entre</label>
            <div class="date" name="dateCreeeDebut" id="dateCreeeDebut"></div>Et
            <div class="date" name="dateCreeeFin" id="dateCreeeFin"></div>
        </fieldset>
        <fieldset>
            <legend>Date complétée</legend>
            <label for="dateCompleteeDebut">Entre</label>
            <div class="date" name="dateCompleteeDebut" id="dateCompleteeDebut"></div>Et
            <div class="date" name="dateCompleteeFin" id="dateCompleteeFin"></div>
        </fieldset>
    </div>
</div>

CSS

.ui-icon {
    margin-top:1px;
    zoom:1.2;
    cursor:pointer;
    display:inline-block;
}
.date {
    display:inline-block;
}
#search {
    width:200px;
}
#search input, #search span {
    display:inline-block;
}
#advanced-search {
    display:none;
}
input {
    border-radius:4px;
    border:1px solid #333;
    background-color:#DDD;
    padding-left:3px;
    outline:none;
}

JavaScript

$.datepicker.regional['fr'] = {clearText: 'Effacer', clearStatus: '',
    closeText: 'Fermer', closeStatus: 'Fermer sans modifier',
    prevText: '&lt;Préc', prevStatus: 'Voir le mois précédent',
    nextText: 'Suiv&gt;', nextStatus: 'Voir le mois suivant',
    currentText: 'Courant', currentStatus: 'Voir le mois courant',
    monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
    'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
    monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun',
    'Jul','Aoû','Sep','Oct','Nov','Déc'],
    monthStatus: 'Voir un autre mois', yearStatus: 'Voir un autre année',
    weekHeader: 'Sm', weekStatus: '',
    dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
    dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
    dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
    dayStatus: 'Utiliser DD comme premier jour de la semaine', dateStatus: 'Choisir le DD, MM d',
    dateFormat: 'dd/mm/yy', firstDay: 0, 
    initStatus: 'Choisir la date', isRTL: false};
 $.datepicker.setDefaults($.datepicker.regional['fr']);


$('.date').datepicker({},$.datepicker.regional['fr']);
$('#search .ui-icon-plus').click(function () {
    $('#advanced-search').dialog({
        title: "Recherche avancée",
        modal: true,
        draggable: false,
        width: "900px",
        open: function (event, ui) {
            $('.ui-widget-overlay').on('click', function () {
                $("#advanced-search").dialog('close');
            });
        }
    });
});