JSファイルを変更して検索ボックスのスタイルを美しく変更する方法

DedeCMS は、非常に人気のある CMS Web サイト構築システムであり、その使いやすさ、使いやすさ、拡張性、オープンソースにより広く支持されています。中でも、DedeCMS の検索ボックスのスタイルは、ユーザーの目に留まりやすいため、欠かせない部分です。ただし、DedeCMS のデフォルトの検索ボックス スタイルは少し単一で時代遅れに見え、最新の Web サイトのニーズを満たしていません。では、DedeCMS の検索ボックスのスタイルを現代の Web サイトのニーズにさらに適合させるにはどうすればよいでしょうか?この記事では、DedeCMS 5.7SP2 安定版を例に、JS ファイルを変更して検索ボックスのスタイルを美しく変更する方法を説明します。

1. JS ファイルの検索

DedeCMS の検索機能は JavaScript で実装されているため、対応する JS ファイルを見つけて変更する必要があります。 DedeCMS では、一般的に使用される JS ファイルが「/dede/js」ディレクトリに配置されており、このディレクトリ内に「search_guide.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));
        }
    });
}

このコードは、検索ボックスの自動消去、自動入力、直接ジャンプなどの機能を実装していますが、検索ボックスのスタイルは変更していません。検索ボックスを美しくするには、このコードを変更し、対応するスタイルを追加する必要があります。

次は変更されたコードです:

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

検索ボックスにクラス名を追加および削除するために、「addClass」メソッドと「removeClass」メソッドを Bind 関数に追加しました。 CSS を使用して検索ボックスのスタイルを定義できます。 2 つのクラス名を定義できます。1 つはフォーカスのないクラス名、もう 1 つはフォーカスのあるクラス名です。 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 ツールを介して Web サイトの「/dede/js」ディレクトリにアップロードし、元のファイルを置き換えることができます。

5. Web ページを更新します

変更したコードを有効にするには、Web ページを更新する必要があります。 Web サイトを開いて検索ボックスをクリックすると、検索ボックスにフォーカスが当たると、検索ボックスのスタイルが変わり、クラス名「.search_focus」で定義されたスタイルが表示されます。検索ボックスのスタイルは単色ではなくなり、より美しくモダンな外観になりました。

結論:

この記事では、DedeCMS の JavaScript ファイル「search_guide.js」を修正して、検索ボックスのスタイルを美しくします。もちろん、JS ファイルを変更するだけでなく、CSS スタイル シートを使用するなど、他の方法で検索ボックスのスタイルを変更したり美しくしたりすることもできます。ただし、ほとんどの場合、JavaScript の方が便利で強力です。
この記事が、DedeCMS の検索ボックスのスタイルを美しく変更し、Web サイトをより美しくモダンにするのに役立つことを願っています。

以上がJSファイルを変更して検索ボックスのスタイルを美しく変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。