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...
© Abel Poucet Webdesign - Motorisé par