如何优化并更改Js文件以改进网站的搜索栏外观

发布时间：2023-09-11 11:30:17 所属栏目：教程来源：转载

导读： 　　这篇文章主要介绍了怎么修改JS文件实现搜索框样式的美化与修改的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么修改JS文件实现搜索框样式的美化与修

　　这篇文章主要介绍了怎么修改JS文件实现搜索框样式的美化与修改的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么修改JS文件实现搜索框样式的美化与修改文章都会有所收获，下面我们一起来看看吧。

　　定位JS文件

　　DedeCMS 的搜索功能是用 JavaScript 实现的，所以我们需要找到对应的 JS 文件进行修改。而在 DedeCMS 中，常用的 JS 文件都放在“/dede/js”目录下，我们在这个目录下可以找到“search_guide.js”这个文件，这个就是需要我们修改的 JS 文件。

　　备份JS文件

　　在修改 JS 文件之前，我们必须要先备份好原始的 JS 文件，以免误操作出现错误。复制“search_guide.js”文件后，重命名为“search_guide_backup.js”作为备用文件。

　　修改JS文件

　　找到“search_guide.js”文件后，用文本编辑器打开这个文件，并在文件末尾找到下面这段代码：

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

　　        }

　　    });

　　}

　　这段代码实现了搜索框的自动清空、自动填充和回车直接跳转等功能，但是对于搜索框的样式并没有进行任何修改。我们需要修改这个代码，增加相应的样式来美化搜索框。

　　下面是我们修改后的代码：

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

　　        }

　　    });

　　}

　　我们在 Bind 函数中添加了 “addClass” 和 “removeClass” 方法来给搜索框添加和移除类名，这个类名我们就可以用 CSS 来定义搜索框的样式。我们可以定义两个类名，一个是没有焦点的类名，另一个是有焦点的类名。CSS 样式如下：

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

　　}

　　我们在类名 “.search_box” 中定义了搜索框的基本样式，并在类名 “.search_focus” 中定义了搜索框获取焦点时的样式。这样，我们就可以通过修改这些样式来实现搜索框样式的修改和美化了。

　　保存JS文件

　　完成代码的修改后，我们需要保存 JS 文件并替换原来的文件。我们可以通过 FTP 工具将修改后的 “search_guide.js” 文件上传到网站的 “/dede/js” 目录下，替换原来的文件。

　　刷新网页

　　我们需要刷新网页来使修改后的代码生效。打开网站，并点击搜索框，在搜索框获取焦点时，搜索框的样式就发生了改变，显示出类名 “.search_focus” 定义的样式。搜索框的样式不再是单一的颜色，而是更加美化和现代化的模样。

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!