JS 파일을 수정하여 검색창 스타일을 아름답게 만들고 수정하는 방법

DedeCMS는 매우 인기 있는 CMS 웹 사이트 구축 시스템으로, 사용자 친화성, 사용 용이성, 확장성 및 오픈 소스로 인해 널리 선호됩니다. 그중 DedeCMS의 검색창 스타일은 사용자가 쉽게 알아볼 수 있다는 점에서 필수적인 부분입니다. 그러나 DedeCMS의 기본 검색창 스타일은 다소 낡고 오래된 것으로 보이며 최신 웹사이트의 요구 사항을 충족하지 않습니다. 그렇다면 어떻게 DedeCMS의 검색창 스타일을 현대 웹사이트의 요구에 더 부합하게 만들 수 있을까요? 이 기사는 DedeCMS 5.7SP2 안정 버전을 예로 들어 JS 파일을 수정하여 검색 상자 스타일을 수정하는 방법을 설명합니다.

1. JS 파일 찾기

DedeCMS의 검색 기능은 JavaScript로 구현되어 있으므로 수정할 해당 JS 파일을 찾아야 합니다. DedeCMS에서는 일반적으로 사용되는 JS 파일이 "/dede/js" 디렉터리에 있습니다. 이 디렉터리에서 수정이 필요한 JS 파일을 찾을 수 있습니다.

2. JS 파일 백업

JS 파일을 수정하기 전에 오작동으로 인한 오류를 피하기 위해 먼저 원본 JS 파일을 백업해야 합니다. "search_guide.js" 파일을 복사한 후 백업 파일로 "search_guide_backup.js"로 이름을 바꿔주세요.

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

이 코드는 검색창 자동 완성, Enter 키를 눌러 바로 이동 등의 기능이 있지만 검색창 스타일은 수정되지 않았습니다. 검색 상자를 아름답게 하려면 이 코드를 수정하고 해당 스타일을 추가해야 합니다.

수정된 코드는 다음과 같습니다.

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"에 검색창이 포커스를 받을 때의 스타일을 정의합니다. 이러한 방식으로 이러한 스타일을 수정하여 검색창 스타일을 수정하고 아름답게 만들 수 있습니다.

4. JS 파일 저장

코드 수정 완료 후 JS 파일을 저장하고 원본 파일을 교체해야 합니다. 수정된 "search_guide.js" 파일을 FTP 도구를 통해 웹사이트의 "/dede/js" 디렉터리에 업로드하고 원본 파일을 교체할 수 있습니다.

5. 웹페이지 새로고침

수정된 코드를 적용하려면 웹페이지를 새로고침해야 합니다. 웹 사이트를 열고 검색 상자를 클릭합니다. 검색 상자에 포커스가 생기면 검색 상자의 스타일이 변경되어 클래스 이름 ".search_focus"에 정의된 스타일이 표시됩니다. 검색창의 스타일은 더 이상 단일 색상이 아닌 더욱 아름답고 현대적인 모습으로 바뀌었습니다.

결론:

이 글에서는 DedeCMS의 JavaScript 파일 "search_guide.js"를 수정하여 검색창 스타일을 아름답게 했습니다. 물론 JS 파일을 수정하는 것 외에도 CSS 스타일 시트를 사용하는 등 다른 방법으로 검색창의 스타일을 수정하고 아름답게 할 수도 있습니다. 그러나 대부분의 경우 JavaScript가 더 편리하고 강력합니다.
이 기사가 DedeCMS의 검색창 스타일을 꾸미고 수정하여 귀하의 웹사이트를 더욱 아름답고 현대적으로 만드는 데 도움이 되기를 바랍니다.

위 내용은 JS 파일을 수정하여 검색창 스타일을 아름답게 만들고 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!