Bagaimana untuk mencantikkan dan mengubah suai gaya kotak carian dengan mengubah suai fail JS

DedeCMS ialah sistem pembinaan tapak web CMS yang sangat popular, yang digemari secara meluas kerana kemesraan pengguna, kemudahan penggunaan, kebolehskalaan dan sumber terbuka. Antaranya, gaya kotak carian DedeCMS adalah bahagian penting kerana ia mudah diperhatikan oleh pengguna. Walau bagaimanapun, gaya kotak carian lalai DedeCMS kelihatan agak tunggal dan ketinggalan zaman, dan tidak memenuhi keperluan tapak web moden. Jadi bagaimana kita boleh menjadikan gaya kotak carian DedeCMS lebih selaras dengan keperluan tapak web moden? Artikel ini wujud. Artikel ini akan mengambil versi stabil DedeCMS 5.7SP2 sebagai contoh untuk menerangkan cara mencantikkan dan mengubah suai gaya kotak carian dengan mengubah suai fail JS.

1. Mencari fail JS

Fungsi carian DedeCMS dilaksanakan dalam JavaScript, jadi kami perlu mencari fail JS yang sepadan untuk diubah suai. Dalam DedeCMS, fail JS yang biasa digunakan diletakkan dalam direktori "/dede/js" Kita boleh mencari fail "search_guide.js" dalam direktori ini.

2. Sandarkan fail JS

Sebelum mengubah suai fail JS, kita mesti menyandarkan fail JS asal dahulu untuk mengelakkan salah operasi dan ralat. Selepas menyalin fail "search_guide.js", namakannya semula kepada "search_guide_backup.js" sebagai fail sandaran.

3. Ubah suai fail JS

Selepas mencari fail "search_guide.js", buka fail dengan editor teks dan cari kod berikut di hujung fail :

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

Kod ini melaksanakan fungsi seperti pembersihan automatik, pengisian automatik dan lompat terus kotak carian, tetapi tidak membuat sebarang pengubahsuaian pada gaya kotak carian. Kami perlu mengubah suai kod ini dan menambah gaya yang sepadan untuk mencantikkan kotak carian.

Berikut ialah kod kami yang diubah suai:

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

Kami menambah kaedah "addClass" dan "removeClass" dalam fungsi Bind untuk menambah dan mengalih keluar nama kelas pada kotak carian, ini Dengan nama kelas, kita boleh menggunakan CSS untuk menentukan gaya kotak carian. Kita boleh menentukan dua nama kelas, satu ialah nama kelas tanpa fokus, dan satu lagi ialah nama kelas dengan fokus. Gaya CSS adalah seperti berikut:

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

Kami mentakrifkan gaya asas kotak carian dalam nama kelas ".search_box", dan mentakrifkan gaya apabila kotak carian mendapat fokus dalam nama kelas ". fokus_cari". Dengan cara ini, kita boleh mengubah suai dan mencantikkan gaya kotak carian dengan mengubah suai gaya ini.

4. Simpan fail JS

Selepas melengkapkan pengubahsuaian kod, kami perlu menyimpan fail JS dan menggantikan fail asal. Kami boleh memuat naik fail "search_guide.js" yang diubah suai ke direktori "/dede/js" tapak web melalui alat FTP dan menggantikan fail asal.

5. Muat semula halaman web

Kami perlu memuat semula halaman web untuk kod yang diubah suai berkuat kuasa. Buka tapak web dan klik kotak carian Apabila kotak carian mendapat fokus, gaya kotak carian berubah, memaparkan gaya yang ditakrifkan oleh nama kelas ".search_focus". Gaya kotak carian bukan lagi satu warna, tetapi mempunyai rupa yang lebih cantik dan moden.

Kesimpulan:

Dalam artikel ini, kami mengubah suai fail JavaScript "search_guide.js" DedeCMS untuk mencantikkan gaya kotak carian. Sudah tentu, selain mengubah suai fail JS, kami juga boleh mengubah suai dan mencantikkan gaya kotak carian dengan cara lain, seperti menggunakan helaian gaya CSS. Walau bagaimanapun, JavaScript lebih mudah dan berkuasa dalam kebanyakan kes.
Kami berharap artikel ini dapat membantu anda mencantikkan dan mengubah suai gaya kotak carian DedeCMS, dan menjadikan laman web anda lebih cantik dan moden.

Atas ialah kandungan terperinci Bagaimana untuk mencantikkan dan mengubah suai gaya kotak carian dengan mengubah suai fail JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!