SORU
27 Mayıs 2013, PAZARTESİ


/Devre dışı bırakmak için en kolay yolu düğmeleri ve bağlantılar (jQuery Bootstrap)etkinleştir nedir

Bazen tutturur düğmeleri tarz olarak kullanıyorum ve sadece düğmeleri kullanın bazen. Böylece belirli klik-her şey devre dışı bırakmak istiyorum

  • Engelli görünüyorlar
  • Tıkladım olmak bırakırlar

Bunu nasıl yapabilirim?

CEVAP
28 Mayıs 2013, Salı


Düğmeleri

Düğmeler disabled tarayıcı tarafından işlenir hangi düğme bir özellik olarak devre dışı bırakmak için basit

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

Özel bir WordPress kullanmak bir işlevi ile bu devre dışı bırakmak için, sadece fn.extend() kullanmak istiyorum:

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

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

// Enabled with:
$('input[type="submit"], input[type="button"], button').disable(false);

JSFiddle disabled button and input demo.

Aksi jQuery kullanımı 35* *yöntemi yapmak istiyorum:

$('button').prop('disabled', true);
$('button').prop('disabled', false);

Etiketler Çapa

disabled valid property çapa için bir kategori olmadığını belirtmekte yarar var. Bu nedenle, Bootstrap .btn elemanları üzerine aşağıdaki stil kullanır:

.btn.disabled, .btn[disabled] {
    cursor: default;
    background-image: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #333;
    background-color: #E6E6E6;
}

[disabled] özelliği de .disabled bir sınıf olarak hedeflenen nasıl not. .disabled sınıfı bir bağlantı etiketi devre dışı görünür yapmak için gerekli olan budur.

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

Tabii ki, bu tıklandığında çalışmasını bağlantıları engellemez. Yukarıdaki link http://example.com götürecek. Bunu önlemek için, DV kodu basit bir parça event.preventDefault() arama disabled sınıfı ile bağlantı etiketlerini hedef Ekle:

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

toggleClass() kullanarak disabled sınıf geçiş yapabiliriz:

jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            var $this = $(this);
            $this.toggleClass('disabled', state);
        });
    }
});

// Disabled with:
$('a').disable(true);

// Enabled with:
$('a').disable(false);

JSFiddle disabled link demo.


Kombine

O zaman önceki devre dışı bırak işlevi yukarıda yapılan is() kullanarak devre dışı bırakmak için çalışıyoruz öğenin türünü kontrol etmek için genişletebiliriz. Bu şekilde eğer input button bir öğe değil. eğer 28 ** ya o disabled özelliğini değiştirmek:

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

// Disabled on all:
$('input, button, a').disable(true);

// Enabled on all:
$('input, button, a').disable(false);

Full combined JSFiddle demo.

Tüm giriş türleri hakkında daha fazla yukarıdaki işlevi de çalışacağını belirtmekte yarar var.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • After Effects Tutorials w/ Mikey

    After Effect

    24 HAZİRAN 2009
  • lissaandbeauty

    lissaandbeau

    24 Aralık 2011
  • thegeniuses.tv

    thegeniuses.

    11 Aralık 2006