[asp.net-mvc]生成动态库 jquery

发布时间: 2017/2/20 21:48:02
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我在个人工作项目,并有生成正确的标记与 jQuery 的问题。

我有返回此 json 结构中显示的图像列表的行动

[{
    "Id": imageid,
    "imagePath": path to image,
    "imageThumbnailPath": path of the thumbnail,
    "imageTitle": image title,
    "imageSubtitle": image subtitle,
    "CategoryId": id of the category
}]

所以我想让 dinamically 生成标记以显示不同的图像。我正与引导的模板,这就是所要生成︰

<div class="span3">
    <div class="picture">
        <a href="path to image" rel="image" title="image title">
            <img src="path to thumbnail" alt="" class="customgalleryclass"  />
        <div class="image-overlay-zoom"></div>
        </a>
    </div>
    <div class="item-description">
        <h5><a href="#">image title</a></h5>
        <p>image subtitle</p>
    </div>
</div>

我试图生成正确的标记与 jQuery 追加,wrapInner 等。但因为我不了解它很好其产生一片混乱。

谢谢!

解决方法 1:

你不要共享代码在其产生一片混乱。

如果你只不知道如何去做它请搜索"jquery 模板 json"。这将是一个良好的开端。你可以找到百的方式去做。

简单的例子,我将使用 jquery 和http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js

感谢http://www.borismoore.com/2010/10/jquery-templates-is-now-official-jquery.html

你可以在http://jsfiddle.net/marathonman/EkVvS/找到工作示例

HTML

    <div id="myGallery"></div>

模板

    <script id="myGalleryTemplate" type="text/x-jquery-tmpl">
    <div class="span3">
        <div class="picture">
            <a href="${imagePath}" rel="image" title="${imageTitle}">
                <img src="${imageThumbnailPath}" alt="" class="customgalleryclass"  />
            <div class="image-overlay-zoom"></div>
            </a>
        </div>
        <div class="item-description">
            <h5><a href="#">${imageTitle}</a></h5>
            <p>${imageSubtitle}</p>
        </div>
    </div>
    </script>

脚本

    var images = [
    {
        "Id": "imageid",
        "imagePath": "path to image",
        "imageThumbnailPath": "path of the thumbnail",
        "imageTitle": "image title",
        "imageSubtitle": "image subtitle",
        "CategoryId": "id of the category"
    }
    ];

    $( "#myGalleryTemplate" ).tmpl(images).appendTo( "#myGallery" );
官方微信
官方QQ群
31647020