当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Manually edit the html of "Thumbnail grid with expanding preview" / Change the .js?

问题描述:

I just used this tutorial with a thumbnail grid with expanding preview: http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/

This works with a javascript generatet html-code for the content of the expanding preview. So I can't manually edit the html for the box, I only can fill in title, description, image and link.

Is there an easy way to change the .js file, that I always have to edit the html for the box manually?

As an expample, it would be like this in the html file:

<li>

<a href="#">

<img src="img/thumbnail1.png" alt="img01"/>

</a>

<div>

Content

</div>

</li>

And in this div is the content of the box, that appears on click.

Thanks for your help!

Philipp

网友答案:

Yes, You can definatly do that by easily changing function which is responsible for rendering detail page.

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

Check out how I have injected new div and it is visible on details page as shown below.

分享给朋友:
您可能感兴趣的文章:
随机阅读: