Bagaimana untuk Melumpuhkan dan Mendayakan Butang dan Pautan dengan Mudah dengan jQuery dan Bootstrap?

Cara Melumpuhkan dan Mendayakan Butang dan Pautan dengan Mudah dengan jQuery dan Bootstrap

Melumpuhkan atau mendayakan perkara klik (butang dan pautan) pada anda halaman web boleh menjadi penting untuk mengawal interaksi pengguna dan menyediakan pengalaman yang lancar. Berikut ialah panduan komprehensif untuk mencapai tugas ini dengan mudah menggunakan jQuery dan Bootstrap:

Melumpuhkan Butang

Butang sememangnya lebih mudah untuk dilumpuhkan menggunakan sifat kurang upaya, atribut yang disokong secara meluas dalam pelayar:

<input type="submit" class="btn" value="My Input Submit" disabled>
<input type="button" class="btn" value="My Input Button" disabled>
<button class="btn" disabled>My Button</button>

Anda juga boleh mencipta fungsi jQuery tersuai untuk butang menggunakan kaedah fn.extend():

jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            this.disabled = state;
        });
    }
});

$('input[type="submit"], input[type="button"], button').disable(true);

Melumpuhkan Pautan

Teg anchor tidak menyokong harta dilumpuhkan. Walau bagaimanapun, Bootstrap menawarkan kelas .disabled untuk mencapai rupa disabled yang diingini. Untuk mengelakkan klik, anda boleh menggunakan event.preventDefault():

<a href="http://example.com" class="btn disabled">My Link</a>

$('body').on('click', 'a.disabled', function(event) {
    event.preventDefault();
});

Menggabungkan Butang dan Pengurusan Pautan

Untuk memudahkan kod anda dan mengendalikan kedua-dua butang dan pautan, anda boleh melanjutkan fungsi nyahdaya:

jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            var $this = $(this);
            if($this.is('input, button, textarea, select'))
              this.disabled = state;
            else
              $this.toggleClass('disabled', state);
        });
    }
});

$('input, button, a').disable(true);

Fungsi ini menyemak jenis elemen dan menggunakan teknik pelumpuhan yang sesuai, termasuk .disabled untuk pautan dan dilumpuhkan untuk butang dan elemen bentuk lain.

Dengan melaksanakan teknik ini, anda boleh melumpuhkan atau mendayakan sebarang jenis elemen boleh klik pada halaman anda dengan lancar, meningkatkan pengalaman pengguna dan fungsi tapak web.

Atas ialah kandungan terperinci Bagaimana untuk Melumpuhkan dan Mendayakan Butang dan Pautan dengan Mudah dengan jQuery dan Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!