How to beautify and modify the search box style by modifying JS files

DedeCMS is a very popular CMS website building system, which is widely favored for its user-friendliness, ease of use, scalability and open source. Among them, the search box style of DedeCMS is an integral part because it is easily noticed by users. However, the default search box style of DedeCMS seems a bit single and outdated, and does not meet the needs of modern websites. So how can we make the search box style of DedeCMS more in line with the needs of modern websites? This article came into being. This article will take DedeCMS 5.7SP2 stable version as an example to explain how to beautify and modify the search box style by modifying JS files.

1. Locating JS files

The search function of DedeCMS is implemented in JavaScript, so we need to find the corresponding JS file and modify it. In DedeCMS, commonly used JS files are placed in the "/dede/js" directory. We can find the "search_guide.js" file in this directory. This is the JS file that needs to be modified.

2. Backup JS file

Before modifying the JS file, we must first back up the original JS file to avoid errors due to misoperation. After copying the "search_guide.js" file, rename it to "search_guide_backup.js" as a backup file.

3. Modify the JS file

After finding the "search_guide.js" file, open the file with a text editor and find the following code at the end of the file:

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

This code implements functions such as automatic clearing, automatic filling, and direct jump of the search box, but does not make any modifications to the style of the search box. We need to modify this code and add corresponding styles to beautify the search box.

The following is our modified 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));
        }
    });
}

We added the "addClass" and "removeClass" methods to the Bind function to add and remove class names to the search box. This class name We can use CSS to define the style of the search box. We can define two class names, one is the class name without focus, and the other is the class name with focus. The CSS style is as follows:

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

We define the basic style of the search box in the class name ".search_box", and define the style when the search box gets focus in the class name ".search_focus". In this way, we can modify and beautify the search box style by modifying these styles.

4. Save the JS file

After completing the code modification, we need to save the JS file and replace the original file. We can upload the modified "search_guide.js" file to the "/dede/js" directory of the website through the FTP tool and replace the original file.

5. Refresh the web page

We need to refresh the web page to make the modified code take effect. Open the website and click the search box. When the search box gains focus, the style of the search box changes, displaying the style defined by the class name ".search_focus". The style of the search box is no longer a single color, but has a more beautified and modern look.

Conclusion:

In this article, we modify the JavaScript file "search_guide.js" of DedeCMS to beautify the search box style. Of course, in addition to modifying JS files, we can also modify and beautify the style of the search box in other ways, such as using CSS style sheets. However, JavaScript is more convenient and powerful in most cases.
We hope this article can help you beautify and modify the search box style of DedeCMS, and make your website more beautiful and modern.

The above is the detailed content of How to beautify and modify the search box style by modifying JS files. For more information, please follow other related articles on the PHP Chinese website!