Comment embellir et modifier le style du champ de recherche en modifiant les fichiers JS

DedeCMS est un système de création de sites Web CMS très populaire, largement apprécié pour sa convivialité, sa facilité d'utilisation, son évolutivité et son open source. Parmi eux, le style du champ de recherche de DedeCMS en fait partie intégrante car il est facilement remarqué par les utilisateurs. Cependant, le style de champ de recherche par défaut de DedeCMS semble un peu unique et obsolète, et ne répond pas aux besoins des sites Web modernes. Alors, comment pouvons-nous rendre le style du champ de recherche de DedeCMS plus conforme aux besoins des sites Web modernes ? Cet article a vu le jour. Cet article prendra la version stable de DedeCMS 5.7SP2 comme exemple pour expliquer comment embellir et modifier le style du champ de recherche en modifiant les fichiers JS.

1. Localiser les fichiers JS

La fonction de recherche de DedeCMS est implémentée en JavaScript, nous devons donc trouver le fichier JS correspondant à modifier. Dans DedeCMS, les fichiers JS couramment utilisés sont placés dans le répertoire "/dede/js". Nous pouvons trouver le fichier "search_guide.js" dans ce répertoire. C'est le fichier JS qui doit être modifié.

2. Sauvegarder les fichiers JS

Avant de modifier le fichier JS, nous devons d'abord sauvegarder le fichier JS d'origine pour éviter les erreurs dues à une mauvaise opération. Après avoir copié le fichier « search_guide.js », renommez-le en « search_guide_backup.js » comme fichier de sauvegarde.

3. Modifiez le fichier JS

Après avoir trouvé le fichier "search_guide.js", ouvrez le fichier avec un éditeur de texte et trouvez le code suivant à la fin du fichier :

if($("#query").length>0) //搜索框表单ID
{
    $('#query').bind('focus',function(){
        if(this.value=='输入搜索内容') this.value='';
        if(this.style.backgroundColor=='#FFF3EA'||this.style.backgroundColor=='rgb(255, 243, 234)') this.style.backgroundColor='#FFFFFF';
    }).bind('blur',function(){
        if(this.value=='') this.value='输入搜索内容';
        if(this.style.backgroundColor=='#FFFFFF'||this.style.backgroundColor=='rgb(255, 255, 255)') this.style.backgroundColor='#FFF3EA';
    });
    $("#query").keyup(function(e){
        if(e.keyCode == 13)
        {
            window.location.href = ('/search.php?q='+encodeURIComponent(document.getElementById("query").value));
        }
    });
}

Ce code réalise l'effacement automatique du champ de recherche. Il existe des fonctions telles que le remplissage automatique et le saut direct en appuyant sur Entrée, mais aucune modification n'a été apportée au style du champ de recherche. Nous devons modifier ce code et ajouter les styles correspondants pour embellir le champ de recherche.

Voici notre code modifié :

if($("#query").length>0) //搜索框表单ID
{
    $('#query').bind('focus',function(){
        if(this.value=='输入搜索内容') this.value='';
        if(this.style.backgroundColor=='#FFF3EA'||this.style.backgroundColor=='rgb(255, 243, 234)') this.style.backgroundColor='#FFFFFF';
        $(this).addClass('search_focus');
    }).bind('blur',function(){
        if(this.value=='') this.value='输入搜索内容';
        if(this.style.backgroundColor=='#FFFFFF'||this.style.backgroundColor=='rgb(255, 255, 255)') this.style.backgroundColor='#FFF3EA';
        $(this).removeClass('search_focus');
    });
    $("#query").keyup(function(e){
        if(e.keyCode == 13)
        {
            window.location.href = ('/search.php?q='+encodeURIComponent(document.getElementById("query").value));
        }
    });
}

Nous avons ajouté les méthodes "addClass" et "removeClass" à la fonction Bind pour ajouter et supprimer des noms de classe dans le champ de recherche. Avec ce nom de classe, nous pouvons utiliser CSS pour définir le. rechercher Le style de la boîte. Nous pouvons définir deux noms de classe, l’un est le nom de classe sans focus et l’autre est le nom de classe avec focus. Le style CSS est le suivant :

.search_box {
    width: 200px;
    height: 30px;
    background-color: #FFF3EA;
    border: none;
    font-size: 14px;
    color: #666666;
    padding-left: 8px;
    outline: none;
    -webkit-appearance: none;
}
.search_focus {
    background-color: #ffffff;
    box-shadow: 0px 1px 5px #ccc;
}

Nous définissons le style de base du champ de recherche dans le nom de classe ".search_box", et définissons le style lorsque le champ de recherche obtient le focus dans le nom de classe ".search_focus". De cette façon, nous pouvons modifier et embellir le style du champ de recherche en modifiant ces styles.

4. Enregistrez le fichier JS

Après avoir terminé la modification du code, nous devons enregistrer le fichier JS et remplacer le fichier d'origine. Nous pouvons télécharger le fichier « search_guide.js » modifié dans le répertoire « /dede/js » du site Web via l'outil FTP et remplacer le fichier d'origine.

5. Actualiser la page Web

Nous devons actualiser la page Web pour que le code modifié prenne effet. Ouvrez le site Web et cliquez sur le champ de recherche. Lorsque le champ de recherche obtient le focus, le style du champ de recherche change, affichant le style défini par le nom de classe « .search_focus ». Le style du champ de recherche n’est plus d’une seule couleur, mais a un aspect plus embelli et moderne.

Conclusion :

Dans cet article, nous modifions le fichier JavaScript "search_guide.js" de DedeCMS pour embellir le style du champ de recherche. Bien entendu, en plus de modifier les fichiers JS, nous pouvons également modifier et embellir le style du champ de recherche par d'autres moyens, par exemple en utilisant des feuilles de style CSS. Cependant, JavaScript est plus pratique et plus puissant dans la plupart des cas.
Nous espérons que cet article pourra vous aider à embellir et à modifier le style du champ de recherche de DedeCMS, et à rendre votre site Web plus beau et plus moderne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!