{% extends 'front/base/front_base.html' %}
{% block title %}
| 照片试衣
{% endblock %}
{% block head %}
<link rel="stylesheet" href="{% static 'css/photoFit.min.css' %}">
<script src="{% static 'arttemplate/template-web.js' %}"></script>
<script src="{% static 'js/photoFit.min.js' %}"></script>
{% endblock %}
{% block content-header %}
<h1>照片试衣</h1>
{% endblock %}
{% block content %}
<div class="row">
<div class="box box-primary">
<div class="col-md-12">
<div class="btn-photos">
<button class="btn btn-warning" id="add-photo-btn">
<i class="fa fa-plus">上传照片</i>
</button>
</div>
<ul class="tips">
<li>支持JPG,GIF,PNG格式图片,最多可上传6张图片</li>
<li>比例4:1,宽度在800px以上,5M以内</li>
</ul>
</div>
</div>
</div>
<div class="photos-list-group"></div>
<!--注意这里要使用id,使用class,是不能够传递给template()的,会在使用arttemplate添加框架的时候,
出现错误:template-web.js:3 Uncaught TemplateError: template not found: Cannot read property 'value' of null-->
<script id="photos-item" type="text/html">
{% verbatim %}
<div class="box photos-item">
<div class="box-header">
<span class="pub-time">照片发布时间:</span>
<button class="btn-default btn-xs pull-right close-btn">
<i class="fa fa-close"></i>
</button>
</div>
<div class="box-body">
<div class="thumbnail-group">
<input type="file" class="image-input" style="display:none;">
<!--注意这里不能够识别Django语法,只能够使用静态文件路径的方式-->
<img src="/static/images/addphoto02.min.jpg" alt="" class="thumbnail" style="cursor: pointer">
</div>
</div>
<div class="box-footer">
<button class="btn btn-primary pull-right save-btn">保存图片</button>
</div>
</div>
{% endverbatim %}
</script>
{% endblock %}
function PhotoFit() {
}
// 监听添加图片的按钮事件
PhotoFit.prototype.createPhotoBtnEvent = function () {
// 需要注意的是,这里传递给template的第一个参数为html中的script的id,不是class,否者的话,就会出现错误:template-web.js:3 Uncaught TemplateError: template not found: Cannot read property 'value' of null
var tpl = template("photos-item");
var photoListGroup = $(".photos-list-group");
photoListGroup.prepend(tpl);
};
PhotoFit.prototype.listenAddBannerEvent = function () {
var self = this;
var addPhotoBtn = $("#add-photo-btn");
addPhotoBtn.click(function () {
self.createPhotoBtnEvent();
});
};
PhotoFit.prototype.run = function () {
this.listenAddBannerEvent();
};
$(function () {
var photo = new PhotoFit();
photo.run();
});
一定要注意,传递给template()函数的第一个参数,只能是html中的script的id,不能是class。否者的话,就会出现template-web.js:3 Uncaught TemplateError: template not found: Cannot read property ‘value’ of null。