2

BackboneJS (0.9.2) と RequireJS (2.1.3) があり、Fancybox を使用してインラインの隠しコンテンツ (アンダースコア テンプレートからレンダリング) を開く必要がある状況があります。

<div id="inlineContent" style="display: none">
    <div class="brand-images">
        <img class="brand-image" src="/img/brandImage.png" alt="" />
        <img class="designer-image" src="/img/designer.jpg" alt="" />
        <div class="external button"><a href="<%= designer.get("link") %>" data-designer="<%= designerId.substr(2, designerId.length) %>">Shop the full collection</a><span></span></div>
    </div>
    <div class="details">
        <p><%= designer.get("bio") %></p>
        <p class="more-bio"><%= designer.get("bioMore") %></p>
    </div>
</div>

ファンシーボックスを要素にアタッチするさまざまな方法を試しましたが、最も簡単なのは View.render (View.events も使用) です。

$(this.el).html(  _.template( detailsDesignerTemplate, data )).appendTo(that.pageElement);
$('.read-more').fancybox({
    padding: 0,
    height: 'auto',
    width: 970,
    autoSize: false,
    title: '<h1>Title</h1>'
});

IE7 (IE6 はサポートされていません) 以外はすべて動作します。IE7 は何もしません (興味深いことに、"beforeLoad" コールバックを呼び出します)。

また、興味深いことに、iFrame コンテンツで動作します。

4

1 に答える 1

0

fancyboxはコンテナ＃fancybox-contentを使用しました。el：$（'＃fancybox-content'）を表示し、$。fancybox（this。$ el.html（）、{options}）を呼び出します。

于 2013-01-05T20:01:03.410 に答える