簡單的jQuery模式插件，如何處理HTML內容

Question

基本上，我是在實踐中構建一個基本的jQuery模態插件，並且盡可能多的野外變種可供參考，但我不確定將html插入正在構建的模態中的最佳方法在我的jQuery中。

這段代碼正在構建我的彈出窗口：

        var container = $('<div class="container"></div>');
        var header = $('<div class="modal"><div class="modal-header"></div></div>');
        var content = $('<div class="modal-body"></div>');
        var footer = $('<div class="modal-footer"><a class="secondary" href="#">Cancel</a><span id = "button-secondary-label">or</span><span class="green_btn"></span></div>');

        $(".popup").append(container);
        $(".container").append(header);
        $(".modal").append(content);
        $(".modal").append(footer);

在使用上述代碼調用javascript文件的html文件中，我想將html傳遞給modal-body。 我知道我可以寫以下內容：

$(".modal-body").html("html goes here")

但我想讓插件盡可能地處理，因此執行以下操作的最佳方法是什么：

在example.html中：

 ...
<script type="text/javascript">
$(.popup).modal();
</script>
</head>
<body>
<div class="popup"><div class="body-text">I want this text in the .modal-body</div></div>

在js文件中：

我想將.body-text中的html移到.modal-body類中，否則將獲得相似的結果。

同樣，嘗試在外部js文件而不是example.html中完成此操作

Answer 1

嘗試從模式框中定位DOm元素時，通常會使用ID（因為可以將其設置為href，並且可以用於指向鏈接的給定內容）。 所以你可以做

模態中的一些內容

然后抓住它並將其附加到模式

$('#boo').clone().appendTo(content);

您還可以選擇一個選項，以便對其進行克隆並將原始副本留在后面

$('.popup').each(function() {
    $(this).appendTo(content);
});



var items = $('.popup'),
len = items.length,
cur = 0;

$next.click(function() {
    cur++;
    if (cur === len) cur = 0;
    items.eq(cur).show();
});

從技術上講，您也可以處理類，但是這取決於插件的構建方式。 正如您可以抓住所有內容並生成單個模式內容一樣，或者創建多個內容以在使用它們之間進行瀏覽。

 $('.popup').each(function() { $(this).appendTo(content); }); var items = $('.popup'), len = items.length, cur = 0; $next.click(function() { cur++; if (cur === len) cur = 0; items.eq(cur).show(); });

簡單的jQuery模式插件，如何處理HTML內容

問題描述

1 個解決方案

解決方案1
1 已采納 2012-04-16 06:30:45

簡單的jQuery模式插件，如何處理HTML內容

問題描述

1 個解決方案

解決方案1 1 已采納 2012-04-16 06:30:45

解決方案1
1 已采納 2012-04-16 06:30:45