javascript - 手动编辑 "Thumbnail grid with expanding preview"的html/更改.js？

Question

我刚刚将本教程与带扩展预览的缩略图网格一起使用:http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/

这适用于扩展预览内容的 javascript generate html 代码。所以我无法手动编辑框的 html，我只能填写标题、描述、图像和链接。

有没有一种简单的方法来更改 .js 文件，我总是必须手动编辑框的 html？例如，在 html 文件中它会是这样的:

<li>
     <a href="#">
          <img src="img/thumbnail1.png" alt="img01"/>
     </a>
     <div>
          Content
     </div>
 </li>

在这个 div 中是框的内容，在点击时出现。

感谢您的帮助!

菲利普

Answer 1

是的，您肯定可以通过轻松更改负责呈现详细信息页面的函数来做到这一点。

Preview.prototype = {
    create : function() {
        // create Preview structure:
        this.$title = $( '<h3></h3>' );
        this.$description = $( '<p></p>' );
        this.$href = $( '<a href="#">Visit website</a>' );
        this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href );
        this.$myDiv = $( '<div class="my-div"></div>' ).append( "My Injected DIVVVVVVVVVVVVVVVVVVVVVVVVVVV" );
        this.$loading = $( '<div class="og-loading"></div>' );
        this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
        this.$closePreview = $( '<span class="og-close"></span>' );
        this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$myDiv,this.$details);
        this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
        // append preview element to the item
        this.$item.append( this.getEl() );
        // set the transitions for the preview and the item
        if( support ) {
            this.setTransition();
        }
    },

查看我是如何注入(inject)新的 div 的，它在详细信息页面上可见，如下所示。