通過呼叫javascript類方法顯示引導吐司

我想通過呼叫這樣的東西來展示一個引導吐司：

let my_toast = new myToast('title', 'hello world');
my_toast.show();

到目前為止，我正在從外部檔案myToast.html加載 html ：

  <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
    <img src="" class="rounded me-2" alt="">
    <strong class="me-auto">
      <div id="toast-title">
        Bootstrap
      </div>
    </strong>
    <small><div id=""></div></small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div id="toast-body" class="toast-body">
        Hello, world! This is a toast message.
    </div>
</div>
</div>

并將其添加到<div id="mydiv"></div>主頁上，更改標題和正文并呼叫Tost.show()方法：

<script>
    class myToast{
        toast_html; 

        constructor(title, message) {
            this.title = title;
            this.message = message;
            
            let template_html;
            $.ajax({
                async: false, // resume if finished
                type: 'GET',
                url: "myToast.html",
                success: function(data) {
                    template_html = data;
                }
            });

            console.log("var html: "   html); 

            let toast_div = document.createElement("div");
            toast_div.id = "toast_wrapper";              
            toast_div.innerHTML = template_html;            
            toast_div.querySelector("#toast-title").innerHTML = (this.title);
            toast_div.querySelector("#toast-body").innerHTML = (this.message);

            this.toast_html = toast_div;
        }
    }

    let to = new myToast('title', 'hello world');
    $("#mydiv").append(to.toast_html);

    var toastLiveExample = document.getElementById('liveToast');
    var toast = new bootstrap.Toast(toastLiveExample);

    toast.show();
</script>

有更好/更短的解決方案嗎？

uj5u.com熱心網友回復：

您可以將您的 HTML 模板代碼傳輸到您的 JavaScript，因此您不需要對外部 HTML 模板進行額外的 ajax 呼叫。通過這種方式，您還可以對 toast 的布局添加更改（也許您想要危險、成功、資訊或警告 toast 型別）。訣竅是在 Toast 類的初始化期間創建元素。

我將提供您可以在下面測驗的實作。

參考：Bootstrap 5 Toast - getOrCreateInstance

/* Implementation */
function Toast(title, description) {
    var toastElement = buildToast(title, description);
    var toastWrapper = getOrCreateToastWrapper();
    toastWrapper.append(toastElement);
    this.bootstrapToast = bootstrap.Toast.getOrCreateInstance(toastElement);
    
    this.show = function() {
        this.bootstrapToast.show();
    }
    
    this.hide = function() {
        this.bootstrapToast.hide();
    }
    
    this.dispose = function() {
        this.bootstrapToast.dispose();
    }
}

/* Example CTA */
var title = 'Bootstrap';
var description = 'Hello, world! This is a toast message.';
var toast = new Toast(title, description);
toast.show();

/* Utility methods */
function getOrCreateToastWrapper() {
    var toastWrapper = document.querySelector('body > [data-toast-wrapper]');
    
    if (!toastWrapper) {
        toastWrapper = document.createElement('div');
        toastWrapper.style.zIndex = 11;
        toastWrapper.style.position = 'fixed';
        toastWrapper.style.bottom = 0;
        toastWrapper.style.right = 0;
        toastWrapper.style.padding = '1rem';
        toastWrapper.setAttribute('data-toast-wrapper', '');
        document.body.append(toastWrapper);
    }
    
    return toastWrapper;
}

function buildToastHeader(title) {
    var toastHeader = document.createElement('div');
    toastHeader.setAttribute('class', 'toast-header');
    
    var img = document.createElement('img');
    img.setAttribute('class', 'rounded me-2');
    img.setAttribute('src', '');
    img.setAttribute('alt', '');
    
    var strong = document.createElement('strong');
    strong.setAttribute('class', 'me-auto');
    strong.textContent = title;
    
    var closeButton = document.createElement('button');
    closeButton.setAttribute('type', 'button');
    closeButton.setAttribute('class', 'btn-close');
    closeButton.setAttribute('data-bs-dismiss', 'toast');
    closeButton.setAttribute('data-label', 'Close');
    
    toastHeader.append(img);
    toastHeader.append(strong);
    toastHeader.append(closeButton);

    return toastHeader;
}

function buildToastBody(description) {
    var toastBody = document.createElement('div');
    toastBody.setAttribute('class', 'toast-body');
    toastBody.textContent = description;
    
    return toastBody;
}

function buildToast(title, description) {
    var toast = document.createElement('div');
    toast.setAttribute('class', 'toast');
    toast.setAttribute('role', 'alert');
    toast.setAttribute('aria-live', 'assertive');
    toast.setAttribute('aria-atomic', 'true');
    
    var toastHeader = buildToastHeader(title);
    var toastBody = buildToastBody(description);
    
    toast.append(toastHeader);
    toast.append(toastBody);
    
    return toast;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

標籤：javascript 推特引导 引导程序 5 吐司

上一篇：如何在選項卡中拉伸bootstrap5文本區域

下一篇：如何在react-bootstrap2.2.3中替換標簽<Media>和<Media.Body>？