Notes

Une searchbox "à la" OS X dans SPIP.

Un moteur de recherche stylé à la OS X pour votre site sous SPIP

Tags : , , , ,

Le moteur de recherche d’OS X est partie intégrante de l’OS d’Apple, on peut ainsi le retrouver dans diverses applications de la plateforme. Ceci dit, il est possible, à l’aide quelques styles CSS et d’un peu de javascript, de styler le moteur de recherche d’un site à la mode OS X.

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...

Voir en ligne : http://www.brandspankingnew.net/arc...

© 2017 - Abel Poucet web design