前言
最近呢接手一个很古老的项目，就是没有用任何Ui框架的那种，正好要开发一个气泡弹出窗，心里一想是不是可以开发一个组件库，然后直接使用既不是完美，于是就开始折腾，好在最终搞出来了。
先说一下用到的一个知识点就是
extend方法
$.fn.methods({})是对jquery.prototype进行扩展，用法再demo中会体现出来
直接上菜：
第一步：css
/*!
* author:郝艳峰
* description:jquery弹起气泡框组件css样式
* time:2022-01-27
*/
.hoverDiv {
position: absolute;
background: #fff;
display: none;
}
.hoverDiv:before {
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
padding: 0;
display: block;
content: '';
z-index: 12;
}
.hoverDiv:after {
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
padding: 0;
display: block;
content: '';
z-index: 10
}
.hoverDiv.top:before {
bottom: -16px;
left: 50%;
margin-left: -6px;
border-top: 8px solid #FFFFFF;
border-bottom: 8px solid transparent;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
}
.hoverDiv.top:after {
bottom: -18px;
left: 49.9%;
margin-left: -7px;
border-top: 9px solid #cccccc;
border-bottom: 9px solid transparent;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
}
.hoverDiv.bottom:before {
top: -16px;
left: 50%;
margin-left: -6px;
border-bottom: 8px solid #FFFFFF;
border-top: 8px solid transparent;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
}
.hoverDiv.bottom:after {
top: -18px;
left: 49.9%;
margin-left: -7px;
border-bottom: 9px solid #cccccc;
border-top: 9px solid transparent;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
}
.hoverDiv.left:before {
top: 50%;
right: -16px;
margin-top: -6px;
border-left: 8px solid #FFFFFF;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid transparent;
}
.hoverDiv.left:after {
top: 50%;
right: -18px;
margin-top: -7px;
border-left: 9px solid #cccccc;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid transparent;
}
.hoverDiv.right:before {
top: 50%;
left: -16px;
margin-top: -6px;
border-right: 8px solid #FFFFFF;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid transparent;
}
.hoverDiv.right:after {
top: 50%;
left: -18px;
margin-top: -7px;
border-right: 9px solid #cccccc;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid transparent;
}
第二步：js
/*!
* author:郝艳峰
* description:jquery弹起气泡框组件js
* time:2022-01-27
*/
$(function () {
$.fn.extend({
hyfHover: function (hyfParams) {
var parentContainer = $("");
this.wrap(parentContainer);
const element = this.parent();
for (let f = 0; f < element.length; f++) {
element[f].addEventListener('mouseenter', function () {
var tipsContent = element[f].firstChild.getAttribute('tooltips');
var divSelf = $("");
divSelf.html(tipsContent == undefined ? hyfParams.content : tipsContent);
divSelf.css({
"width": !!hyfParams.width ? hyfParams.width : '',
"height": !!hyfParams.height ? hyfParams.height : '',
"color": !!hyfParams.selfColor ? hyfParams.selfColor : '#000',
"backgroundColor": !!hyfParams.selfBgColor ? hyfParams.selfBgColor : '#fff',
"box-shadow": !!hyfParams.selfShadow ? hyfParams.selfShadow : '0 0 9px 3px #ccc',
})
divSelf.appendTo(element[f])
let suspensionWidth = divSelf.appendTo(element[f]).width();
let suspensionHeight = divSelf.appendTo(element[f]).height();
switch (hyfParams.position) {
case 'top':
element[f].lastChild.classList.add("top");
element[f].lastChild.style.top = `${element[f].firstChild.offsetTop - suspensionHeight - 8}px`;
element[f].lastChild.style.left = `${element[f].firstChild.offsetLeft - (suspensionWidth/2) + (element[f].firstChild.offsetWidth / 2)}px`;
break;
case 'left':
element[f].lastChild.classList.add("left");
element[f].lastChild.style.left = `${element[f].firstChild.offsetLeft - suspensionWidth - 8}px`;
let hyfHeight = 10;
if (hyfParams.height > element[f].firstChild.offsetHeight) {
hyfHeight = `${element[f].firstChild.offsetTop - (hyfParams.height/2) + (element[f].firstChild.offsetHeight / 2)}`;
} else {
hyfHeight = `${element[f].firstChild.offsetTop + (element[f].firstChild.offsetHeight / 2) - 8}`;
}
element[f].lastChild.style.top = `${hyfHeight}px`;
break;
case 'bottom':
element[f].lastChild.classList.add("bottom");
element[f].lastChild.style.top = `${element[f].firstChild.offsetTop + element[f].firstChild.offsetHeight + 8}px`;
element[f].lastChild.style.left = `${element[f].firstChild.offsetLeft - (suspensionWidth/2) + (element[f].firstChild.offsetWidth / 2)}px`;
break;
case 'right':
element[f].lastChild.classList.add("right");
element[f].lastChild.style.left = `${element[f].firstChild.offsetLeft + element[f].firstChild.offsetWidth + 8}px`;
let hyfrightHeight = 10;
if (hyfParams.height > element[f].firstChild.offsetHeight) {
hyfrightHeight = `${element[f].firstChild.offsetTop - (hyfParams.height/2) + (element[f].firstChild.offsetHeight / 2)}`;
} else {
hyfrightHeight = `${element[f].firstChild.offsetTop + (element[f].firstChild.offsetHeight / 2) - 8}`;
}
element[f].lastChild.style.top = `${hyfrightHeight}px`;
break;
}
// firstChild代表$(".mouseHover")
// lastChild代表$(".hoverDiv")
element[f].lastChild.style.display = "block"
})
element[f].addEventListener('mouseleave', function () {
$(".parentDiv").find('.hoverDiv').remove();
})
}
},
})
});
第三步：index.html
一定要引入
jquery,demo中hyfHover就是我暴露出来的方法
郝艳峰气泡框组件
好好说说拉开了将
1-四块五的妞
好好说说拉开了将
2-四块五的妞
好好说说拉开了将
3-四块五的妞
第四步：参数说明
| 参数 | 描述 | 默认值 | 是否必填 |
|---|---|---|---|
| position | 弹出窗所在位置(top,left,right,bottom) | 无 | 是 |
| width | 弹出窗宽度 | auto | 否 |
| height | 弹出窗高度 | auto | 否 |
| selfBgColor | 弹窗背景颜色 | ##ff | 否 |
| content | 在方法内定义的内容 | null | 否,如果传值则优先级小于tooltips的内容 |
| selfShadow | 弹出窗阴影 | 0 0 9px 3px #ccc | 否 |
结束语
奋战了两天终于开发完成，以后直接使用，方便了很多。