Twitter Bootstrap kullanarak Uyarıları Otomatik Olarak Kapatma

Twitter'ın bootstrap CSS çerçevesini kullanıyorum (bu harika). Kullanıcılara bazı mesajlar için, bunları Javascript JS ve CSS uyarılarını kullanarak gösteriyorum.

İlgilenenler için şurada bulunabilir: http://getbootstrap.com/javascript/#alerts

Benim sorunum şu; Bir kullanıcıya bir uyarı görüntüledikten sonra, bir süre sonra kaybolmasını istiyorum. Twitter'ın belgelerine ve incelediğim koda göre, bunun içinde pişirilmemiş gibi görünüyor:

• İlk sorum, bunun gerçekten de Bootstrap'e dahil edilmediğine dair bir onay isteği.
• İkincisi, bu davranışa nasıl ulaşabilirim?

Telefon window.setTimeout(function, delay)etmek bunu başarmanıza izin verecektir. Uyarıyı görüntülendikten 2 saniye (veya 2000 milisaniye) sonra otomatik olarak kapatacak bir örnek aşağıda verilmiştir.

$(".alert-message").alert();
window.setTimeout(function() { $(".alert-message").alert('close'); }, 2000);

Eğer onu şık bir fonksiyona sarmak istiyorsanız, bunu yapabilirsiniz.

function createAutoClosingAlert(selector, delay) {
   var alert = $(selector).alert();
   window.setTimeout(function() { alert.alert('close') }, delay);
}

O zaman onu böyle kullanabilirsin ...

createAutoClosingAlert(".alert-message", 2000);

Bunu başarmanın daha zarif yolları olduğundan eminim.

Ben de alarm ile çalışmasını sağlayamadım. ('Kapat').

Ancak bunu kullanıyorum ve bir muamele yapıyor! Uyarı 5 saniye sonra kaybolur ve bir kez gittiğinde altındaki içerik doğal konumuna kayar.

window.setTimeout(function() {
    $(".alert-message").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove(); 
    });
}, 5000);

Uyarıları patlatmaya ve onları soldurmaya çalışırken aynı sorunu yaşadım. Çeşitli yerleri araştırdım ve bunu benim çözümüm olarak buldum. 'İn' sınıfını eklemek ve kaldırmak sorunumu çözdü.

window.setTimeout(function() { // hide alert message
    $("#alert_message").removeClass('in'); 

}, 5000);

.Remove () ve benzer şekilde .alert ('close') çözümünü kullanırken, uyarının belgeden kaldırılmasıyla ilgili bir sorunla karşılaşmış gibiydim, bu yüzden aynı uyarı div'i tekrar kullanmak istersem, yapamadım. Bu çözüm, uyarının sayfayı yenilemeden yeniden kullanılabileceği anlamına gelir. (Bir form göndermek ve kullanıcıya geri bildirim sunmak için aJax kullanıyordum)

    $('#Some_Button_Or_Event_Here').click(function () { // Show alert message
        $('#alert_message').addClass('in'); 
    });

Uyarıdaki 'kapat' eylemini kullanmak benim için işe yaramıyor çünkü uyarıyı DOM'den kaldırıyor ve uyarıya birden çok kez ihtiyacım var (ajax ile veri gönderiyorum ve her gönderide kullanıcıya bir mesaj gösteriyorum) . Bu yüzden, her ihtiyacım olduğunda uyarıyı oluşturan ve ardından oluşturulan uyarıyı kapatmak için bir zamanlayıcı başlatan bu işlevi yarattım. İşleve uyarıyı eklemek istediğim kabın kimliğini, uyarının türünü ('başarılı', 'tehlike' vb.) Ve mesajı iletiyorum. İşte kodum:

function showAlert(containerId, alertType, message) {
    $("#" + containerId).append('<div class="alert alert-' + alertType + '" id="alert' + containerId + '">' + message + '</div>');
    $("#alert" + containerId).alert();
    window.setTimeout(function () { $("#alert" + containerId).alert('close'); }, 2000);
}

Bu kahve yazı versiyonu:

setTimeout ->
 $(".alert-dismissable").fadeTo(500, 0).slideUp(500, -> $(this.remove()))
,5000

Yukarıdaki çözümlerin her biri ile uyarının yeniden kullanılabilirliğini kaybetmeye devam ettim. Benim çözümüm şuydu:

Sayfa yüklemede

$("#success-alert").hide();

Uyarının görüntülenmesi gerektiğinde

 $("#success-alert").show();
 window.setTimeout(function () {
     $("#success-alert").slideUp(500, function () {
          $("#success-alert").hide();
      });
 }, 5000);

FadeTo'nun opaklığı 0 olarak ayarladığına dikkat edin, böylece ekran yok ve opaklık 0 idi, bu yüzden çözümümden kaldırdım.

Buradaki bazı cevapların üzerinden başka bir başlıkta geçtikten sonra, işte şunu buldum:

showAlert()İsteğe bağlı typeve ile dinamik olarak bir uyarı ekleyecek adlı bir işlev oluşturdum closeDealy. Böylece, örneğin, aşağıdaki dangergibi 5 saniye sonra otomatik olarak kapanacak bir uyarı türü (yani, Bootstrap'ın uyarı tehlikesi) ekleyebilirsiniz :

showAlert("Warning message", "danger", 5000);

Bunu başarmak için aşağıdaki Javascript işlevini ekleyin:

function showAlert(message, type, closeDelay) {

    if ($("#alerts-container").length == 0) {
        // alerts-container does not exist, add it
        $("body")
            .append( $('<div id="alerts-container" style="position: fixed;
                width: 50%; left: 25%; top: 10%;">') );
    }

    // default to alert-info; other options include success, warning, danger
    type = type || "info";    

    // create the alert div
    var alert = $('<div class="alert alert-' + type + ' fade in">')
        .append(
            $('<button type="button" class="close" data-dismiss="alert">')
            .append("&times;")
        )
        .append(message);

    // add the alert div to top of alerts-container, use append() to add to bottom
    $("#alerts-container").prepend(alert);

    // if closeDelay was passed - set a timeout to close the alert
    if (closeDelay)
        window.setTimeout(function() { alert.alert("close") }, closeDelay);     
}

Bir süre sonra bir şeyi gizlemek için çok basit bir çözüme ihtiyacım vardı ve bunu çalıştırmayı başardım:

Açısal olarak bunu yapabilirsiniz:

$timeout(self.hideError,2000);

İşte zaman aşımına ulaşıldığında aradığım fonksiyon

 self.hideError = function(){
   self.HasError = false;
   self.ErrorMessage = '';
};

Şimdi benim diyalog / kullanıcı arayüzüm bu özellikleri öğeleri gizlemek için kullanabilir.

Gecikme ve solma ile:

setTimeout(function(){
    $(".alert").each(function(index){
        $(this).delay(200*index).fadeTo(1500,0).slideUp(500,function(){
            $(this).remove();
        });
    });
},2000);

bunu dene

$(function () {

 setTimeout(function () {
            if ($(".alert").is(":visible")){
                 //you may add animate.css class for fancy fadeout
                $(".alert").fadeOut("fast");
            }

        }, 3000)

});