javascript - 有赞的微商城可视化编辑是如何做到的？
本文介绍了javascript - 有赞的微商城可视化编辑是如何做到的？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
有赞的可视化
如上图：
随便点击椭圆中的一项添加，会弹出一个对应的div，这个div是事先定义好的吗？是不是通过display的两个属性显示和隐藏的，即none表示不显示，block表示显示呢？？
还是说把这个弹出的div保存起来到数组中呢？
如果有对这个熟悉了解的，请大家解答一下，感激不尽！！！
解决方案
事先定义好或动态生成都可以~
例如动态生成:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.dynamidDiv{
width:100%;
height:100%;
border:1px solid red;
background-color: red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div style="height:30px;">
<div id="showDiv" style="display:inline-block;width: 100px;height: 20px;background-color: white;border: 1px solid gray;line-height: 20px;text-align: center">显示DIV</div>
<div id="closeDiv" style="display:inline-block;width: 100px;height: 20px;background-color: white;border: 1px solid gray;line-height: 20px;text-align: center">关闭DIV</div>
</div>
<div id="dynamicContainer" style="display: none;width:300px;height:300px;margin-top:20px;"></div>
<script>
function createDiv(){
var containerDiv=document.getElementById("dynamicContainer");
var newDynamicDiv=document.createElement("div");
document.getElementById("dynamidDiv")&&containerDiv.removeChild(document.getElementById("dynamidDiv"));
newDynamicDiv.id="dynamidDiv";
newDynamicDiv.setAttribute("class","dynamidDiv");
containerDiv.appendChild(newDynamicDiv);
containerDiv.style.display="block";
}
function closeDiv(){
var containerDiv=document.getElementById("dynamicContainer");
document.getElementById("dynamidDiv")&&containerDiv.removeChild(document.getElementById("dynamidDiv"));
containerDiv.style.display="none";
}
document.getElementById("showDiv").addEventListener("click",function(){
createDiv();
},false);
document.getElementById("closeDiv").addEventListener("click",function(){
closeDiv();
},false);
</script>
</body>
</html>这篇关于javascript - 有赞的微商城可视化编辑是如何做到的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
