Semantic-ui popup动态内容

时间:2015-08-15 06:47:40

标签: javascript jquery html semantic-ui

Semantic-ui ver。 2.0.8。 我目前使用以下方法在弹出窗口中加载动态内容

  

JAVASCRIPT

var popupContent = null;
var popupLoading = '<i class="notched circle loading icon green"></i> wait...';

$('.vt').popup({
    inline: true,
    on: 'hover',
    exclusive: true,
    hoverable: true,
    html: popupLoading,
    variation: 'wide',
    delay: {
        show: 400,
        hide: 400
    },
    onShow: function(el) { // load data (it could be called in an external function.)
        var then = function(r) {
            if (r.status) {
                popupContent = r.data; // html string
            } else {
                // error
            }
        };
        var data = {
            id: el.dataset.id
        };
        ajax.data('http://example.site', data, then); // my custom $.ajax call
    },
    onVisible: function(el) { // replace popup content
        this.html(popupUserVoteContent);
    },
    onHide: function(el) { // replace content with loading
        this.html(popupLoading);
    }
});
  

HTML

<h2 data-id="123" class="vt">10</h2>
<div class="ui popup" data-id="123"></div>

有一种方法可以简化整个过程吗? 例如,在加载新内容后使用element.popup('refresh')? 我试过了:

  

JAVASCRIPT

...
if (r.status) {
   $('.ui.popup[data-id="123"]').html(r.data);
} 
...

但它不起作用。 我也尝试使用(替换)数据内容到h2.vt但没有。

0 个答案:

没有答案