Le moteur de recherche sur le site d’Apple :
Le résultat sur un site SPIP :
La technique pour styler le champs de saisie à la mode OS X d’un moteur de recherche à été bien expliqué en détail par son auteur ici : http://www.brandspankingnew.net/arc...
Je me suis contenté d’adapter cette technique aux spécificités de SPIP.
Marche à suivre :
Téléchargez le dossier OSX_searchbox.zip.
Ce fichier, une fois décompressé, contient 4 dossiers à déposer dans le dossiers squelettes.
- formulaires
- images
- js
- styles
(Si un ou plusieurs de ces dossiers existent déjà dans votre dossier squelettes, ne le remplacez pas : déposez-y simplement le contenu à ajouter.)
Appeler les CSS et le javascript en collant le code suivant dans le fichier inc-head.html (ou entre les balises head de vos pages) :
<!-- for the "mac os x style" search box -->
<link rel="stylesheet" type="text/css" href="[(#CHEMIN{styles/default.css})]" name="default" />
<link rel="stylesheet" type="text/css" href="[(#CHEMIN{styles/dummy.css})]" id="dummy_css" />
<script type="text/javascript" src="[(#CHEMIN{js/applesearch.js})]"></script>
<script type="text/javascript">
//<![CDATA[
window.onload = function () { applesearch.init(); }
//]]>
</script>
<!-- for the "mac os x style" search box --> Et voilà ! N’hésitez pas à me poster un message si vous rencontrez des problèmes.
Contenu du ZIP :
Le fichier recherche.html modifié, à placer dans le dossier formulaires :
<div id="applesearch"><!-- bloc de recherche -->
<span class="sbox_l"></span>
<form id="searchform" action="[(#ENV{lien})]" method="get">
[(#ENV{lien}|form_hidden)]
[<input type="hidden" name="lang" value="(#ENV{lang})" />]
<span class="sbox">
<input type="search" id="recherche" name="recherche" placeholder="Search..." autosave="applestyle_srch" results="5" onkeyup="applesearch.onChange('srch_fld','srch_clear')" />
</span>
<span class="sbox_r" id="srch_clear"></span>
</form>
</div> Le dossier "styles" contenant les 3 fichiers CSS suivants :
- applesearch.css :
#applesearch .sbox_l {
background: url(../images/srch_l.gif) no-repeat top left;
float: left;
width: 19px; height: 19px;
}
#applesearch .sbox_r {
background: url(../images/srch_r.gif) no-repeat top left;
float: left;
width: 19px; height: 19px;
}
#applesearch .sbox input {
background: url(../images/srch_bg.gif) repeat-x top left;
float: left;
border: 0;
height: 19px; width: 142px;
padding: 3px;
font: 11px/13px;
color: #000;
}- default.css :
#applesearch .sbox_l {
/*default styling*/
}
#applesearch .sbox_r {
/*default styling*/
}
#applesearch .sbox input {
/*default styling*/
width: 180px;
float:left;
}
#content {
clear: both;
}- dummy.css
/* no styles here! */
Le dossier js contenant le javascript :
/* START applesearch object */
if (!applesearch) var applesearch = {};
applesearch.init = function ()
{
// add applesearch css for non-safari, dom-capable browsers
if ( navigator.userAgent.toLowerCase().indexOf('safari') < 0 && document.getElementById )
{
this.clearBtn = false;
// add style sheet if not safari
var dummy = document.getElementById("dummy_css");
if (dummy) dummy.href = "squelettes/styles/applesearch.css";
}
}
// called when on user input - toggles clear fld btn
applesearch.onChange = function (fldID, btnID)
{
// check whether to show delete button
var fld = document.getElementById( fldID );
var btn = document.getElementById( btnID );
if (fld.value.length > 0 && !this.clearBtn)
{
btn.style.background = "white url('squelettes/images/srch_r_f2.gif') no-repeat top left";
btn.fldID = fldID; // btn remembers it's field
btn.onclick = this.clearBtnClick;
this.clearBtn = true;
} else if (fld.value.length == 0 && this.clearBtn)
{
btn.style.background = "white url('squelettes/images/srch_r.gif') no-repeat top left";
btn.onclick = null;
this.clearBtn = false;
}
}
// clears field
applesearch.clearFld = function (fldID,btnID)
{
var fld = document.getElementById( fldID );
fld.value = "";
this.onChange(fldID,btnID);
}
// called by btn.onclick event handler - calls clearFld for this button
applesearch.clearBtnClick = function ()
{
applesearch.clearFld(this.fldID, this.id);
}
/* END applesearch object */ Le dossier images contenant les images.
Vous trouverez plus d’explications sur le fonctionnement de ces codes sur le site de leur auteur : http://www.brandspankingnew.net/arc...
Vos commentaires
# Le 5 janvier à 16:39, par Magellan En réponse à : Une searchbox "à la" OS X dans SPIP.
Bonjour,
Merci pour cet article ainsi que pour le zip. Ca marche du premier coup, aucun risque de ce tromper. Le seul problème (cosmétique) que j’ai rencontré est sous IE8 où les bords droit et gauche du champs de recherche ne bénéficient pas de la transparence (srch_l.gif et srch_r.gif). Une petite retouche avec photoshop et c’est corrigé.
Cordialement
Répondre à cet article
Suivre les commentaires :
| 