噢 一个例子
// 记录当前窗口是否被关闭的状态
var createJSPanelP;
/**
* {
* "DisplayName": "提示位置",
* "DefaultValue": "默认提示信息",
* "ClassficationInfos": [
* {
* "DimensionName": "归类维度名称",
* "ClassficationName": "类别名称",
* "ElementInfos": [
* {
* "ElementName": "要素名称",
* "LearningType": "学习类型：输入值提示/输入要素提示",
* "PromptLevel": "提示等级：必填/推荐填写",
* "PromptValue": "提示值"
* }
* ]
* }
* ]
* }
*/
function showMLPromptInformation(obj)
{
let titleStr = "<span class='ml-panel-title'>" + obj.DisplayName + " 输入提示：</span>";
let contentStr = obj.DefaultValue;
if (obj.ClassficationInfos != null && obj.ClassficationInfos.length > 0)
{
contentStr = "";
obj.ClassficationInfos.forEach(element => {
if (contentStr != "")
{
contentStr += "<br>";
}
// let DimensionName = element.DimensionName;
let ClassficationName = element.ClassficationName;
// contentStr += "<span class='ml-panel-title'>" + DimensionName + "维度下的" + ClassficationName + "分类</span>" + "<br>";
contentStr += "<span class='ml-panel-tj-title'>（" + ClassficationName + "分类）</span>" + "<br>";
let tempBT = ""; // 必填信息
let tempTJ = ""; // 推荐填写信息
element.ElementInfos.forEach(item => {
let ElementName = " · " + item.ElementName;
let LearningType = item.LearningType;
let PromptLevel = item.PromptLevel;
let PromptValue = item.PromptValue;
if (PromptLevel == "必填")
{
if (LearningType == "输入要素提示")
{
tempBT += ElementName + "(必填)" + "<br>";
}
else
{
tempBT += PromptValue + "(必填)" + "<br>";
}
}
else
{
if (LearningType == "输入要素提示")
{
tempTJ += ElementName + "(推荐)" + "<br>";
}
else
{
tempTJ += PromptValue + "(推荐)" + "<br>";
}
}
})
if (tempBT != "")
{
// contentStr += "<span class='ml-panel-bt-title'>必填信息</span>";
// contentStr += "<br>";
// contentStr += "<span class='ml-panel-bt'>" + tempBT + "</span>";
contentStr += "<span class='ml-panel-bt'>" + tempBT + "</span>";
}
if (tempTJ != "")
{
// contentStr += "<span class='ml-panel-tj-title'>推荐输入信息</span>";
// contentStr += "<br>";
// contentStr += "<span class='ml-panel-tj'>" + tempTJ + "</span>";
contentStr += "<span class='ml-panel-tj'>" + tempTJ + "</span>";
}
})
}
let ml_z_panel_bases = document.getElementById("ml_z_panel_bases");
if (ml_z_panel_bases == undefined)
{
createZPanel();
setTimeout(function() {
createZPanelF(titleStr, contentStr); // 第一次，多一次。。。
}, 800);
}
createZPanelF(titleStr, contentStr);
}
function createZPanel(){
let workspace = document.getElementById("s4-workspace");
let ml_z_panel_bases = document.getElementById("ml_z_panel_bases");
if (ml_z_panel_bases == undefined)
{
ml_z_panel_bases = document.createElement('div');
ml_z_panel_bases.id = 'ml_z_panel_bases';
ml_z_panel_bases.className = 'ml_z_panel_bases ml_z_panel_bases_big_width';
}
// 删除子节点
let childNodesLen = ml_z_panel_bases.childNodes.length;
for (let i = 0;i < childNodesLen; i++)
{
ml_z_panel_bases.removeChild(ml_z_panel_bases.childNodes[i]);
i--;
childNodesLen--;
}
// 添加子节点
let tempXA = document.createElement('div');
tempXA.id = 'div_xiaoao';
tempXA.className = 'div_xiaoao'; // 静态图片/动态图片
ml_z_panel_bases.appendChild(tempXA);
tempXA.addEventListener("dblclick", basePanelDBClick);
insertAfter(ml_z_panel_bases, workspace);
workspace.style.position = "absolute"; // 为了悬浮！！！
dragFunc("ml_z_panel_bases");
}
var createCount = 0;
// 创建提示信息
function createZPanelF(titleStr, contentStr)
{
if (titleStr == undefined || titleStr == "" || contentStr == undefined || contentStr == "")
{
return;
}
createCount++;
contentStr = "<span>" + titleStr + "</span><br>" + contentStr;
let ml_z_panel_bases = document.getElementById("ml_z_panel_bases");
// 在小奥图标前插入
ml_z_panel_bases.parentNode.insertBefore(createMLZPanel(contentStr), ml_z_panel_bases);
if (ml_z_panel_bases.firstChild.className == "div_xiaoao_little")
{
let rootPanelDiv = document.getElementById("ml_z_panel_root");
if (rootPanelDiv != undefined)
{
rootPanelDiv.style.display = "none";
}
}
else
{
setZpanelContentPosition();
}
}
// 背景云朵图片的宽度和高度
var bkImgWidth = 198;
var bkImgHeight = 182;
let basewidthyd = 25;
// 设置位置
function setZpanelContentPosition(again) {
// 设置位置 根据输入框变动
// debugger
// 提示文字的根div
let rootPanelDiv = document.getElementById("ml_z_panel_root");
if (rootPanelDiv != undefined)
{
// 解决初始化的时候云朵显示异常的问题
if (createCount == 1)
{
rootPanelDiv.style.display = "none";
}
else if (imgType)
{
rootPanelDiv.style.display = "inherit";
}
// 修改背景图片div的宽度和高度
let ml_z_panel_bases = document.getElementById("ml_z_panel_bases");
let pw = ml_z_panel_bases.offsetLeft;
let ph = ml_z_panel_bases.offsetTop;
let bkW = rootPanelDiv.clientWidth + basewidthyd;
let bkH = Math.ceil((bkW / bkImgWidth) * bkImgHeight);
rootPanelDiv.firstChild.style.width = bkW + "px";
rootPanelDiv.firstChild.style.height = bkH + "px";
// 设置文本框div距离背景框顶部的距离
// let ydContentHeight = rootPanelDiv.firstChild.clientHeight;
let h1 = rootPanelDiv.childNodes[0].clientHeight;
let h2 = rootPanelDiv.childNodes[1].clientHeight;
// if (ydContentHeight > 0)
if (h1 > 0)
{
// var marginTops = Math.ceil((ydContentHeight - rootPanelDiv.clientHeight) / 2.2);
let marginTops = Math.ceil((h1 - h2) / 3.2);
rootPanelDiv.childNodes[1].style.marginTop = marginTops + "px"; // 设置内部文字距离顶部的高度
}
// 设置显示文本的根div距离左侧位置
rootPanelDiv.style.left = (pw - basewidthyd - rootPanelDiv.clientWidth) + "px";
// 设置显示文本的根div距离顶部位置
if (rootPanelDiv.childNodes[0].clientHeight == 0)
{
rootPanelDiv.style.top = (ph - basewidthyd - rootPanelDiv.clientHeight) + "px";
}
else
{
rootPanelDiv.style.top = (ph + 65 - rootPanelDiv.childNodes[0].clientHeight) + "px";
}
}
// 初始化显示欢迎信息 start
// 您好
// 很高兴为您服务
// createCount++;
// 初始化显示欢迎信息 end
if (createCount == 2) //处理显示异常
{
setZpanelContentPosition();
}
if (again != undefined && again == "again")
{
setZpanelContentPosition();
}
}
var imgType = true; // true ： 大；false ： 小
// 小奥图标panel距离左上的距离
var styleLeft = "";
var styleTop = "";
// 图标双击变大缩小
function basePanelDBClick() {
// 小奥图片
let div_xiaoao = document.getElementById("div_xiaoao");
// 提示文字
let rootPanelDiv = document.getElementById("ml_z_panel_root");
if (imgType)
{
// debugger
div_xiaoao.parentNode.className = 'ml_z_panel_bases ml_z_panel_bases_min_width';
styleLeft = div_xiaoao.parentNode.style.left;
div_xiaoao.parentNode.style.left = "";
styleTop = div_xiaoao.parentNode.style.top;
div_xiaoao.parentNode.style.top = "";
removeDragFunc("ml_z_panel_bases");
// div_xiaoao.className = 'div_xiaoao_little';
if (rootPanelDiv != undefined)
{
rootPanelDiv.style.display = "none";
window.getSelection().empty();
}
imgType = false;
}
else
{
// debugger
div_xiaoao.parentNode.className = 'ml_z_panel_bases ml_z_panel_bases_big_width';
div_xiaoao.parentNode.style.left = styleLeft;
div_xiaoao.parentNode.style.top = styleTop;
dragFunc("ml_z_panel_bases");
// div_xiaoao.className = 'div_xiaoao';
if (rootPanelDiv != undefined)
{
rootPanelDiv.style.display = "inherit";
window.getSelection().empty();
setZpanelContentPosition("again"); // 重新设置位置
}
imgType = true;
}
}
// 在元素后添加元素
function insertAfter(newElement, targentElement) {
var parent = targentElement.parentNode;
if (parent.lastChild == targentElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targentElement.nextSibling)
}
}
// 拖拽
function dragFunc(id) {
var Drag = document.getElementById(id);
Drag.onmousedown = function(event) {
var ev = event || window.event;
event.stopPropagation();
event.preventDefault();
var disX = ev.clientX - Drag.offsetLeft;
var disY = ev.clientY - Drag.offsetTop;
document.onmousemove = function(event) {
var ev = event || window.event;
Drag.style.left = ev.clientX - disX + "px";
Drag.style.top = ev.clientY - disY + "px";
Drag.style.cursor = "move";
setZpanelContentPosition();
};
};
Drag.onmouseup = function() {
document.onmousemove = null;
this.style.cursor = "default";
};
}
// 取消拖拽
function removeDragFunc(id) {
var Drag = document.getElementById(id);
Drag.onmousedown = function(event) {
return false;
};
Drag.onmouseup = function() {
return false;
};
}
function createMLZPanel(contentStr)
{
let rootPanelDiv = document.getElementById("ml_z_panel_root");
if (rootPanelDiv == undefined)
{
rootPanelDiv = document.createElement("div");
rootPanelDiv.id = 'ml_z_panel_root';
rootPanelDiv.className = "ml_z_panel_root";
}
// 删除子节点
let childNodesLen = rootPanelDiv.childNodes.length;
for (let i = 0;i < childNodesLen; i++)
{
rootPanelDiv.removeChild(rootPanelDiv.childNodes[i]);
i--;
childNodesLen--;
}
// yd content
let ml_z_yd_content = document.createElement("div");
ml_z_yd_content.id = "ml_z_yd_content";
ml_z_yd_content.className = "ml_z_yd_content";
rootPanelDiv.appendChild(ml_z_yd_content);
// content
let ml_z_panel_content = document.createElement("div");
ml_z_panel_content.className = "ml_z_panel_content";
let ml_panel_text = document.createElement("div");
ml_panel_text.className = 'ml_z_panel_text';
// ml_panel_text.innerHTML = "aaaa:bbbb:cccc:" + (++i);
ml_panel_text.innerHTML = contentStr;
ml_z_panel_content.appendChild(ml_panel_text)
let ml_z_panel_content_border = document.createElement("div");
ml_z_panel_content_border.className = 'ml_z_panel_content_border';
ml_z_panel_content.appendChild(ml_z_panel_content_border)
rootPanelDiv.appendChild(ml_z_panel_content);
return rootPanelDiv;
}
/* 提示信息 */
.ml-panel-title{
color: black;
font-size: 12px;
font-weight: bold;
}
.ml-panel-tj-title,.ml-panel-bt-title {
font-size: 12px;
color: blue;
}
.ml-panel-tj{
font-size: 12px;
/* color: blueviolet; */
color: black;
}
.ml-panel-bt{
font-size: 12px;
color: red;
}
/* zpanel */
.ml_z_panel_root{
/* margin-top: 12px;
margin-bottom: 25px; */
position: absolute;
/* right: 20px;
bottom: 0px; */
/* width: 300px; */
float: right;
background-image: "../../../../../images/xiaoaoYdContent.png";
}
.ml_z_yd_content {
/* content: url("../../../../../images/xiaoaoYdContent.png"); */
width: 160px;
background: url("../../../../../images/xiaoaoYdContent.png") no-repeat;
height: 180px;
background-size: cover;
float: right;
z-index: 1999;
position: absolute;
}
.ml_z_panel_text {
max-height: 95px;
overflow-y: auto;
}
.ml_z_panel_content {
float: right;
display: inline-block;
padding: 10px;
border-radius: 4px;
border-bottom-right-radius: 0px;
z-index: 2000;
font-size: 12px;
/* border: 1px solid #303133; */
/* background-color: chartreuse; */
/* background-color: rgb(233, 230, 230); */
background-color: white;
position: relative;
top: 15px;
/* left: 12px; */
/* max-width: 75%; */
margin-top: 25px;
margin-left: 27px;
max-height: 160px;
max-width: 200px;
}
.ml_z_panel_content .ml_z_panel_content_border {
position: relative;
right: -25px;
}
.ml_z_panel_bases {
z-index: 9999;
position: absolute;
right: 20px;
bottom: 5px;
/*动画名称*/
animation: wobble;
/*动画持续时间*/
animation-duration: 1s;
/*针对webkit内核*/
-webkit-animation:wobble 1s;
}
.ml_z_panel_bases_big_width {
width: 135px;
height: 145px;
}
.ml_z_panel_bases_min_width {
width: 75px;
height: 80px;
}
.div_xiaoao {
/* 静态图片 */
/* content: url("../../../../../images/bigxiaoao.png"); */
/* 动态图片 */
/* content: url("../../../../../images/xiaoaogif.gif"); */
content: url("../../../images/bigxiaoao.png");
width: 100%;
background-image: url("../../../../../images/bigxiaoao.png");
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}
@keyframes wobble {
0% { transform: translateX(0%); }
15% { transform: translateX(-25%) rotate(-5deg); }
30% { transform: translateX(20%) rotate(3deg); }
45% { transform: translateX(-15%) rotate(-3deg); }
60% { transform: translateX(10%) rotate(2deg); }
75% { transform: translateX(-5%) rotate(-1deg); }
100% { transform: translateX(0%); }
}
@-webkit-keyframes wobble {
0% { -webkit-transform: translateX(0%); }
15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
30% { -webkit-transform: translateX(20%) rotate(3deg); }
45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
60% { -webkit-transform: translateX(10%) rotate(2deg); }
75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
100% { -webkit-transform: translateX(0%); }
}
参考文档
首页 > 学习总览 > 开发语言 > JavaScript