টুইটার বুটস্ট্র্যাপ ব্যবহার করে কীভাবে স্বয়ংক্রিয়ভাবে সতর্কতাগুলি বন্ধ করবেন

Question 1

আমি টুইটারের বুটস্ট্র্যাপ সিএসএস ফ্রেমওয়ার্ক ব্যবহার করছি (যা দুর্দান্ত)। ব্যবহারকারীদের কয়েকটি বার্তাগুলির জন্য আমি জাভাস্ক্রিপ্ট জেএস এবং সিএসএস সতর্কতা ব্যবহার করে তাদের প্রদর্শিত করছি।

আগ্রহীদের জন্য, এটি এখানে পাওয়া যাবে: http://getbootstrap.com/javascript/#alerts

আমার বিষয়টি এই; কোনও ব্যবহারকারীর কাছে আমি একটি সতর্কতা প্রদর্শন করার পরে আমি চাই যে এটি কিছু সময়ের ব্যবধানের পরে চলে যেতে পারে। টুইটারের ডক্স এবং আমি যে কোডটি দেখেছি তার উপর ভিত্তি করে দেখে মনে হচ্ছে এটি এতে বেক করা হয়নি:

আমার প্রথম প্রশ্নটি নিশ্চিত হওয়ার জন্য একটি অনুরোধ যে এটি সত্যই বুটস্ট্র্যাপে বেকড নয়
দ্বিতীয়ত, আমি কীভাবে এই আচরণটি অর্জন করতে পারি?

Question 2

কলিং window.setTimeout(function, delay)আপনাকে এটি সম্পাদন করার অনুমতি দেবে। এখানে এমন একটি উদাহরণ যা সতর্কতাটি প্রদর্শিত হওয়ার পরে 2 সেকেন্ড (বা 2000 মিলিসেকেন্ড) স্বয়ংক্রিয়ভাবে বন্ধ করবে।

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

আপনি যদি এটি একটি নিফ্টি ফাংশনে মুড়িয়ে রাখতে চান তবে আপনি এটি করতে পারেন।

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

তাহলে আপনি এটি এর মতো ব্যবহার করতে পারেন ...

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

আমি নিশ্চিত যে এটি সম্পাদন করার জন্য আরও মার্জিত উপায় রয়েছে।

Question 3

আমি এটি সতর্কতার সাথে কাজ করতে পারিনি। ('বন্ধ') হয়।

তবে আমি এটি ব্যবহার করছি এবং এটি একটি ট্রিট কাজ করে! সতর্কতাটি 5 সেকেন্ডের পরে ম্লান হয়ে যাবে এবং একবার গেলে তার নীচের সামগ্রীটি তার প্রাকৃতিক অবস্থানে চলে যাবে।

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

Question 4

পপিং সতর্কতাগুলি হ্যান্ডেল করার চেষ্টা করার সময় এবং তাদের বিবর্ণ করার সময় আমার এই একই সমস্যা ছিল। আমি বিভিন্ন স্থানের আশেপাশে অনুসন্ধান করেছি এবং এটি আমার সমাধান হিসাবে পেয়েছি। 'ইন' ক্লাস যুক্ত করা এবং সরানো আমার সমস্যাটি স্থির করে।

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

}, 5000);

.Remove () এবং তেমনিভাবে .alert ('ক্লোজ') সমাধান ব্যবহার করার সময় মনে হয়েছিল ডকুমেন্ট থেকে সতর্কতা অপসারণের সাথে আমি একটি সমস্যা হিট করেছি, তাই যদি আমি আবার একই সতর্কতা ডিভি ব্যবহার করতে চাই তবে আমি অক্ষম হয়ে পড়েছিলাম। এই সমাধানটির অর্থ পৃষ্ঠাটি রিফ্রেশ না করে সতর্কতা পুনরায় ব্যবহারযোগ্য। (আমি একটি ফ্যাক্স জমা দিতে এবং ব্যবহারকারীর কাছে প্রতিক্রিয়া উপস্থাপন করতে আমি জ্যাক্স ব্যবহার করছি)

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

Question 5

সতর্কতাটিতে 'ক্লোজ' অ্যাকশন ব্যবহার করা আমার পক্ষে কাজ করে না, কারণ এটি ডিওএম থেকে সতর্কতা সরিয়ে দেয় এবং আমার একাধিকবার সতর্কতা প্রয়োজন (আমি এজ্যাক্স দিয়ে ডেটা পোস্ট করছি এবং আমি প্রতিটি পোস্টে ব্যবহারকারীর কাছে একটি বার্তা দেখাই) । সুতরাং আমি এই ফাংশনটি তৈরি করেছি যা আমার যতবার প্রয়োজন সতর্কতা তৈরি করে এবং তারপরে তৈরি সতর্কতাটি বন্ধ করার জন্য একটি টাইমার শুরু করে। আমি যে ধারকটিতে সতর্কতা, সতর্কতার ধরণ ('সাফল্য', 'বিপদ' ইত্যাদি) এবং বার্তা যুক্ত করতে চাই তার ফাংশনে আমি প্রবেশ করি into আমার কোডটি এখানে:

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

Question 6

এটি কফস্ক্রিপ্ট সংস্করণ:

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

Question 7

উপরের প্রতিটি সমাধানের সাথে আমি সতর্কতার পুনরায় ব্যবহারযোগ্যতা হারাতে থাকি। আমার সমাধানটি নিম্নরূপ ছিল:

পৃষ্ঠা লোড এ

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

একবার সতর্কতা প্রদর্শন করা প্রয়োজন

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

নোট করুন যে ফ্যাদডো অপসারণকে 0 তে সেট করে, তাই প্রদর্শনটি কোনওটিই ছিল না এবং অস্বচ্ছতা 0 ছিল তাই আমি আমার সমাধান থেকে সরিয়েছি।

Question 8

উত্তরগুলির কয়েকটি এখানে যাওয়ার পরে একটি অন্য থ্রেডে, এখানে আমি কী শেষ করেছি:

আমি একটি ক্রিয়াকলাপ তৈরি করেছি যা একটি showAlert()icallyচ্ছিক typeএবং সহ গতিশীলভাবে একটি সতর্কতা যুক্ত করবে closeDealy। যাতে আপনি, উদাহরণস্বরূপ, টাইপের একটি সতর্কতা যুক্ত করতে পারেন danger(যেমন, বুটস্ট্রাপের সতর্কতা-বিপদ) যা এইভাবে 5 সেকেন্ডের পরে স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যাবে:

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

এটি অর্জন করতে, নিম্নলিখিত জাভাস্ক্রিপ্ট ফাংশন যুক্ত করুন:

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

Question 9

কিছু সময়ের পরে কিছু আড়াল করার জন্য আমার খুব সহজ সমাধানের প্রয়োজন হয়েছিল এবং এটি কাজ করতে সক্ষম হয়েছিল:

কৌণিকভাবে আপনি এটি করতে পারেন:

$timeout(self.hideError,2000);

সময়সীমাটি শেষ হয়ে গেলে আমি যে ফাংশনটি কল করি তা এখানে

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

সুতরাং এখন আমার ডায়লগ / ui উপাদানগুলিকে আড়াল করতে সেই বৈশিষ্ট্যগুলি ব্যবহার করতে পারে।

Question 10

বিলম্ব এবং বিবর্ণ সহ:

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

Question 11

আর একবার চেষ্টা কর

$(function () {

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

        }, 3000)

});