So verschönern und ändern Sie den Suchfeldstil durch Ändern von JS-Dateien

DedeCMS ist ein sehr beliebtes CMS-System zum Erstellen von Websites, das aufgrund seiner Benutzerfreundlichkeit, Benutzerfreundlichkeit, Skalierbarkeit und Open Source weithin beliebt ist. Darunter ist der Suchfeldstil von DedeCMS ein wesentlicher Bestandteil, da er von Benutzern leicht wahrgenommen wird. Allerdings wirkt der Standard-Suchfeldstil von DedeCMS etwas eintönig und veraltet und entspricht nicht den Anforderungen moderner Websites. Wie können wir also den Suchfeldstil von DedeCMS besser an die Anforderungen moderner Websites anpassen? Dieser Artikel entstand am Beispiel der stabilen Version von DedeCMS 5.7SP2, um zu erklären, wie der Stil des Suchfelds durch Ändern von JS-Dateien verschönert und geändert wird.

1. JS-Dateien suchen

Die Suchfunktion von DedeCMS ist in JavaScript implementiert, daher müssen wir die entsprechende JS-Datei zum Ändern finden. In DedeCMS werden häufig verwendete JS-Dateien im Verzeichnis „/dede/js“ abgelegt. In diesem Verzeichnis finden wir die Datei „search_guide.js“.

2. JS-Dateien sichern

Bevor wir die JS-Datei ändern, müssen wir zunächst die ursprüngliche JS-Datei sichern, um Fehler aufgrund von Fehlbedienungen zu vermeiden. Nachdem Sie die Datei „search_guide.js“ kopiert haben, benennen Sie sie als Sicherungsdatei in „search_guide_backup.js“ um.

3. Ändern Sie die JS-Datei

Nachdem Sie die Datei „search_guide.js“ gefunden haben, öffnen Sie die Datei mit einem Texteditor und finden Sie den folgenden Code am Ende der Datei:

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));
        }
    });
}

Dieser Code realisiert das automatische Löschen der Suchfeld Es gibt Funktionen wie automatisches Ausfüllen und direktes Springen durch Drücken der Eingabetaste, es wurden jedoch keine Änderungen am Stil des Suchfelds vorgenommen. Wir müssen diesen Code ändern und entsprechende Stile hinzufügen, um das Suchfeld zu verschönern.

Das Folgende ist unser geänderter Code:

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));
        }
    });
}

Wir haben der Bind-Funktion die Methoden „addClass“ und „removeClass“ hinzugefügt, um Klassennamen zum Suchfeld hinzuzufügen und zu entfernen. Mit diesem Klassennamen können wir CSS verwenden, um die zu definieren Suche Der Stil der Box. Wir können zwei Klassennamen definieren, einer ist der Klassenname ohne Fokus und der andere ist der Klassenname mit Fokus. Der CSS-Stil ist wie folgt:

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

Wir definieren den Grundstil des Suchfelds im Klassennamen „.search_box“ und definieren den Stil, wenn das Suchfeld den Fokus erhält, im Klassennamen „.search_focus“. Auf diese Weise können wir den Stil des Suchfelds ändern und verschönern, indem wir diese Stile ändern.

4. Speichern Sie die JS-Datei

Nach Abschluss der Codeänderung müssen wir die JS-Datei speichern und die Originaldatei ersetzen. Wir können die geänderte Datei „search_guide.js“ über das FTP-Tool in das Verzeichnis „/dede/js“ der Website hochladen und die Originaldatei ersetzen.

5. Aktualisieren Sie die Webseite

Wir müssen die Webseite aktualisieren, damit der geänderte Code wirksam wird. Öffnen Sie die Website und klicken Sie auf das Suchfeld. Wenn das Suchfeld den Fokus erhält, ändert sich der Stil des Suchfelds und zeigt den durch den Klassennamen „.search_focus“ definierten Stil an. Der Stil des Suchfelds ist nicht mehr einfarbig, sondern sieht schöner und moderner aus.

Fazit:

In diesem Artikel ändern wir die JavaScript-Datei „search_guide.js“ von DedeCMS, um den Stil des Suchfelds zu verschönern. Natürlich können wir den Stil des Suchfelds neben der Änderung von JS-Dateien auch auf andere Weise ändern und verschönern, beispielsweise durch die Verwendung von CSS-Stylesheets. Allerdings ist JavaScript in den meisten Fällen bequemer und leistungsfähiger.
Wir hoffen, dass dieser Artikel Ihnen dabei helfen kann, den Suchfeldstil von DedeCMS zu verschönern und zu ändern und Ihre Website schöner und moderner zu gestalten.

Das obige ist der detaillierte Inhalt vonSo verschönern und ändern Sie den Suchfeldstil durch Ändern von JS-Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!