又一次合并
This commit is contained in:
@@ -0,0 +1,8 @@
|
||||
{% load static simpletags %}
|
||||
{% if "SIMPLEUI_STATIC_OFFLINE"|get_config %}
|
||||
<link rel="stylesheet" href="{% static '/admin/simpleui-x/elementui/theme-chalk/index.css' %}">
|
||||
<link rel="stylesheet" href="{% static '/admin/simpleui-x/fontawesome-free-5.8.1-web/css/all.min.css' %}">
|
||||
{% else %}
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css">
|
||||
{% endif %}
|
||||
@@ -0,0 +1,219 @@
|
||||
<fieldset class="module aligned {{ fieldset.classes }}">
|
||||
{% if fieldset.name %}<h2>{{ fieldset.name }}</h2>{% endif %}
|
||||
{% if fieldset.description %}
|
||||
<div class="description">{{ fieldset.description|safe }}</div>
|
||||
{% endif %}
|
||||
{% for line in fieldset %}
|
||||
<div class="form-row{% if line.fields|length_is:'1' and line.errors %} errors{% endif %}{% if not line.has_visible_field %} hidden{% endif %}{% for field in line %}{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% endfor %}">
|
||||
{% if line.fields|length_is:'1' %}{{ line.errors }}{% endif %}
|
||||
{% for field in line %}
|
||||
<div{% if not line.fields|length_is:'1' %} class="fieldBox{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% if not field.is_readonly and field.errors %} errors{% endif %}{% if field.field.is_hidden %} hidden{% endif %}"{% elif field.is_checkbox %} class="checkbox-row"{% endif %}>
|
||||
{% if not line.fields|length_is:'1' and not field.is_readonly %}{{ field.errors }}{% endif %}
|
||||
{% if field.is_checkbox %}
|
||||
{{ field.field }}{{ field.label_tag }}
|
||||
{% else %}
|
||||
{{ field.label_tag }}
|
||||
{% if field.is_readonly %}
|
||||
<div class="readonly">{{ field.contents }}</div>
|
||||
{% else %}
|
||||
{{ field.field }}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if field.field.help_text %}
|
||||
<div class="help">{{ field.field.help_text|safe }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</fieldset>
|
||||
|
||||
<!--<script type="text/javascript" src="/static/admin/js/image_pro.js"></script>-->
|
||||
<!--<script type="text/javascript" src="/static/admin/js/imagePreview.js"></script>-->
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
/**
|
||||
* Created by hucf on 2019/11/20.
|
||||
*/
|
||||
var ImagePreview = {
|
||||
default_params:{},
|
||||
init:function (param) {
|
||||
if (param) {
|
||||
$.extend(this.default_params, param);
|
||||
}
|
||||
ip_global_img_list = [];
|
||||
var id = this.default_params.id;
|
||||
if (typeof id == 'string') {
|
||||
if ((ip_global_img_list = $("#"+id).find("img")).length == 0) {
|
||||
return;
|
||||
}
|
||||
} else if (typeof id == 'object' && id != null) {
|
||||
ip_global_img_list = $(id);
|
||||
}
|
||||
this.fnGenerateHtml();
|
||||
this.fnBindEvent(ip_global_img_list);
|
||||
},
|
||||
fnBindEvent:function (ip_global_img_list) {
|
||||
if (ip_global_img_list.length == 0) {
|
||||
return;
|
||||
}
|
||||
$(ip_global_img_list).on("click", this.onClickEvent);
|
||||
this.onDragEvent($("#ip-img-preview"));
|
||||
$("#ip-img-preview").on('mousewheel DOMMouseScroll', this.onMouseScrollEvent);
|
||||
|
||||
$('#ip-img-floatshadow').on("click", function () {
|
||||
$('#ip-img-preview').hide();
|
||||
$("#ip-left").hide();
|
||||
$("#ip-right").hide();
|
||||
$('#ip-img-floatshadow').hide();
|
||||
$('#ip-img-preview').attr("src", "");
|
||||
});
|
||||
$("#ip-left").hover(this.fnMouseOver,this.fnMouseOut).click(this.fnPrev);
|
||||
$("#ip-right").hover(this.fnMouseOver,this.fnMouseOut).click(this.fnNext);
|
||||
},
|
||||
fnGenerateHtml:function () {
|
||||
$("body").append('<img id="ip-img-preview" style="position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 19941206;cursor: move;display: none"/><div id="ip-img-floatshadow" style="z-index: 19941205;background-color: #000;opacity: .5;top: 0;left: 0;width: 100%;height: 100%;position: fixed;display: none" title="点击空白处关闭"></div>');
|
||||
$("body").append('<div id="ip-left" style="display: none; width: 100px; height: 100px;left: 5px; top: 50%; position:fixed;z-index:19941207; cursor: pointer;">' +
|
||||
'<div style="left:-30px;border: 50px solid;border-color: transparent #1CB9C4 transparent transparent;position: absolute;"></div></div>');
|
||||
$("body").append('<div id="ip-right" style="display: none; width: 100px; height: 100px; right: 5px; top: 50%; position:fixed; z-index:19941207;cursor: pointer;">' +
|
||||
'<div style="left:30px;border: 50px solid;border-color: transparent transparent transparent #1CB9C4;position: absolute;"></div></div>');
|
||||
},
|
||||
fnMouseOver:function () {
|
||||
$(this).css("background", "rgb(134, 134, 134)");
|
||||
$(this).css("border", "1px solid rgb(111, 111, 111)");
|
||||
},
|
||||
fnMouseOut:function () {
|
||||
$(this).css("background", "");
|
||||
$(this).css("border", "");
|
||||
},
|
||||
fnPrev:function () {
|
||||
if (typeof(ip_global_cur) == "number" && ip_global_cur>0) {
|
||||
ImagePreview.fnReset();
|
||||
$("#ip-img-preview").animate({left:"48%"}, 100);
|
||||
$("#ip-img-preview").attr("src", ip_global_img_list[--ip_global_cur].src);
|
||||
$("#ip-img-preview").animate({left:"50.5%"}, 100);
|
||||
$("#ip-img-preview").animate({left:"50%"}, 100);
|
||||
ImagePreview.fnAdjustMaxWidth();
|
||||
}
|
||||
},
|
||||
fnNext:function () {
|
||||
if (typeof(ip_global_cur) == "number" && ip_global_cur<ip_global_img_list.length-1) {
|
||||
ImagePreview.fnReset();
|
||||
$("#ip-img-preview").animate({left:"52%"}, 100);
|
||||
$("#ip-img-preview").attr("src", ip_global_img_list[++ip_global_cur].src);
|
||||
$("#ip-img-preview").animate({left:"49.5%"}, 100);
|
||||
$("#ip-img-preview").animate({left:"50%"}, 100);
|
||||
ImagePreview.fnAdjustMaxWidth();
|
||||
}
|
||||
},
|
||||
fnGetIndexOfCurImg:function (cur) {
|
||||
for (var i=0; i<ip_global_img_list.length; i++) {
|
||||
if ($(ip_global_img_list[i]).is(cur)) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
},
|
||||
onClickEvent:function (e) {
|
||||
ImagePreview.fnReset();
|
||||
$("#ip-img-preview").attr("src", $(this).attr("src"));
|
||||
ImagePreview.fnAdjustMaxWidth();
|
||||
ip_global_cur = ImagePreview.fnGetIndexOfCurImg($(this));
|
||||
$("#ip-img-floatshadow").fadeIn();
|
||||
$("#ip-img-preview").fadeIn();
|
||||
$("#ip-left").fadeIn();
|
||||
$("#ip-right").fadeIn();
|
||||
},
|
||||
fnAdjustMaxWidth:function () {
|
||||
//最长边判定,避免超出屏幕画幅的展示
|
||||
var widthFlag = true;
|
||||
var max = $("#ip-img-preview").width();
|
||||
if (max < $("#ip-img-preview").height()) {
|
||||
widthFlag = false;
|
||||
max = $("#ip-img-preview").height();
|
||||
}
|
||||
if (widthFlag && $(window).width() < max) {
|
||||
$("#ip-img-preview").css("width","75%");
|
||||
} else if (!widthFlag && $(window).height() < max) {
|
||||
$("#ip-img-preview").css("height","75%");
|
||||
}
|
||||
},
|
||||
fnReset:function () {
|
||||
$("#ip-img-preview").css("left","50%");
|
||||
$("#ip-img-preview").css("top","50%");
|
||||
$("#ip-img-preview").css("width","");
|
||||
$("#ip-img-preview").css("height","");
|
||||
},
|
||||
onMouseScrollEvent:function (e) {
|
||||
e.preventDefault();
|
||||
var wheel = e.originalEvent.wheelDelta || -e.originalEvent.detail;
|
||||
var delta = Math.max(-1, Math.min(1, wheel));
|
||||
if (delta < 0) { //向下滚动
|
||||
$(this).width($(this).width() / 1.1);
|
||||
$(this).height($(this).height() / 1.1);
|
||||
} else { //向上滚动
|
||||
$(this).width($(this).width() * 1.1);
|
||||
$(this).height($(this).height() * 1.1);
|
||||
}
|
||||
},
|
||||
onDragEvent:function (obj) {
|
||||
obj.bind("mousedown", start);
|
||||
function start(event) {
|
||||
if (event.button == 0) {
|
||||
gapX = event.clientX - obj.offset().left;
|
||||
gapY = event.clientY - obj.offset().top;
|
||||
$(document).bind("mousemove", move);
|
||||
$(document).bind("mouseup", stop);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
function move(event) {
|
||||
obj.css({
|
||||
"left": (event.clientX - gapX + obj.width() / 2) + "px",
|
||||
"top": (event.clientY - gapY + obj.height() / 2) + "px"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
function stop() {
|
||||
$(document).unbind("mousemove", move);
|
||||
$(document).unbind("mouseup", stop);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
console.log("============================")
|
||||
|
||||
|
||||
|
||||
var image_document = document.getElementsByTagName("a");
|
||||
console.log(image_document)
|
||||
for (var i = 0; i < image_document.length; i++) {
|
||||
let text_list = image_document[i].href.split('.')
|
||||
console.log("text_list",text_list)
|
||||
let image_list = ["jpg", "png"]
|
||||
for (let j = 0; j <image_list.length ; j++) {
|
||||
console.log("image_list[i]-====", image_list[j])
|
||||
console.log("text_list[text_list.length-1]===",text_list[text_list.length-1])
|
||||
if (text_list[text_list.length-1] == image_list[j] )
|
||||
{
|
||||
console.log("oho=====")
|
||||
var herf = image_document[i].href
|
||||
console.log(herf)
|
||||
var image_html = image_document[i].outerHTML
|
||||
image_document[i].outerHTML = '<div id="imgBox"><img style="width: 200px" id="img" src="' + herf + '"/></div>'
|
||||
}
|
||||
}
|
||||
}
|
||||
// ImagePreview.init({id:"imgBox"});
|
||||
ImagePreview.init({id:$("#imgBox img")});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
#imgs img {
|
||||
width: 24%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
{% load static simpletags %}
|
||||
{% if "SIMPLEUI_STATIC_OFFLINE"|get_config %}
|
||||
<script type="text/javascript" src="{% static '/admin/simpleui-x/js/vue.min.js' %}"></script>
|
||||
<script type="text/javascript" src="{% static '/admin/simpleui-x/elementui/index.js' %}"></script>
|
||||
{% else %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>
|
||||
{% endif %}
|
||||
Reference in New Issue
Block a user