使用展开预览＆＃34;手动编辑＆＃34;缩略图网格的html; /改变.js？

Question

我刚使用本教程的缩略图网格，展开预览：http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/

这适用于扩展预览内容的javascript generatet html-code。所以我无法手动编辑框中的html，我只能填写标题，说明，图片和链接。

是否有一种简单的方法来更改.js文件，我总是需要手动编辑该框的html？ 作为一个例子，它在html文件中就像这样：

Declare <cursor_name> CURSOR
STATIC/FORWARD_ONLY/DYNAMIC/KEYSET/SCROLL/READ_ONLY
FOR 
<Any Select Query>
..
..
GO
..
OPEN <Cursor_Name>
FETCH NEXT/FIRST/PRIOR
FROM <Cursor_Name>
..
..
CLOSE <Cursor_Name>
DEALLOCATE <Cursor_Name>

在这个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();
        }
    },

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