資訊專欄INFORMATION COLUMN
摘要：提示框插件插件可以滿足常用的提示顯示，支持個(gè)方向，支持邊框背景色文本顏色自定義，支持位置微調(diào)層級(jí)微調(diào)寬度間距等參數(shù)調(diào)整。
Tips提示框插件
插件可以滿足常用的提示顯示，支持12個(gè)方向，支持邊框、背景色、文本顏色自定義，支持位置微調(diào)、層級(jí)微調(diào)、寬度間距等參數(shù)調(diào)整。
tips:提示信息組件
參數(shù)：
msg:"asdf",內(nèi)容
dire:2,方向
w:250,寬度
_x:0,橫向偏移
_y:0,縱向偏移
zIndex:100000,層級(jí)
borderColor:#FFF,邊框顏色
bgColor:#FFF,背景顏色
useHover:true是否使用懸浮顯示
color:默認(rèn)提示文字顏色
padding:邊距
(function ($) {
var defaults = {
dire: 12,
w: 250,
_x: 0,
_y: 0,
borderColor: "#FFBB76",
bgColor: "#FFFCEF",
color: "#FF0000",
padding: [5, 10],
arrWidth: 10,
useHover: true,
zIndex: 100000
};
$.fn.tips = function (opt) {
var tip, opts = $.extend({}, defaults, opt);
if (this[0]) {
opts.tag = this;
if (opts.useHover) {
opts.tag.hover(function () {
tip = new Tip(opts);
tip.show();
}, function () {
tip.close();
});
} else {
tip = new Tip(opts);
tip.show();
}
return this;
}
};
function Tip(opts) {
this.dire = opts.dire;
this.width = opts.w;
this.zIndex = opts.zIndex;
this.borderColor = opts.borderColor;
this.bgColor = opts.bgColor;
this.color = opts.color;
this.padding = opts.padding;
this.arrWidth = opts.arrWidth;
this.offsetX = opts._x;
this.offsetY = opts._y;
this.tag = opts.tag;
this.msg = opts.msg;
this.wrap = $("");
this.innerArr = $("");
this.outerArr = $("");
this.init();
};
Tip.prototype = {
init: function () {
var msg = this.tag.data("tipMsg");
if (!this.msg) {
this.msg = msg;
}
this.createTemp();
},
createTemp: function () {
var t = this;
t.createWrap();
t.setPosition();
},
createWrap: function () {
var t = this;
t.wrap.html(t.msg);
var wrapCSS = {
width: t.width,
border: "1px solid " + t.borderColor,
"border-radius": "5px",
background: t.bgColor,
color: t.color,
padding: t.getPadding()
};
t.outerArr.css(t.getArrStyle(t.dire, t.arrWidth, t.borderColor));
t.innerArr.css(t.getArrStyle(t.dire, t.arrWidth, t.bgColor));
t.wrap.prepend(t.innerArr).prepend(t.outerArr).css(wrapCSS);
$("body").append(t.wrap);
},
setPosition: function () {
var t = this;
var posObj = t.getPos(t.dire, t.getPosition(t.tag), t.getPosition(t.wrap), t.arrWidth), pos = posObj.pos, innerPos = posObj.innerPos, outerPos = posObj.outerPos;
t.wrap.css({top: pos.y, left: pos.x});
t.innerArr.css({top: innerPos.y, left: innerPos.x});
t.outerArr.css({top: outerPos.y, left: outerPos.x});
},
getPadding: function () {
var t = this, pad = "0px", padArr = t.padding, len = padArr.length;
switch (len) {
case 1:
pad = padArr[0] + "px";
break;
case 2:
pad = padArr[0] + "px " + padArr[1] + "px";
break;
case 3:
pad = padArr[0] + "px " + padArr[1] + "px " + padArr[2] + "px";
break;
case 4:
pad = padArr[0] + "px " + padArr[1] + "px " + padArr[2] + "px " + padArr[3] + "px";
break;
}
return pad;
},
getPosition: function (tag) {
return {t: tag.offset().top, l: tag.offset().left, h: tag.outerHeight(), w: tag.outerWidth()};
},
getArrStyle: function (dir, width, color) {
var style;
switch (dir) {
case 11:
case 12:
case 1:
style = {
"border-bottom-style": "solid",
"border-width": "0px " + width + "px " + width + "px",
"border-bottom-color": color
};
break;
case 2:
case 3:
case 4:
style = {
"border-left-style": "solid",
"border-width": width + "px 0px " + width + "px " + width + "px",
"border-left-color": color
};
break;
case 5:
case 6:
case 7:
style = {
"border-top-style": "solid",
"border-width": width + "px " + width + "px 0px",
"border-top-color": color
};
break;
case 8:
case 9:
case 10:
style = {
"border-right-style": "solid",
"border-width": width + "px " + width + "px " + width + "px 0px",
"border-right-color": color
};
break;
}
return style || {};
},
getPos: function (d, tagPos, pos, arrWidth) {
var _pos, _innerPos, _outerPos, l = tagPos.l, t = tagPos.t, w = tagPos.w, h = tagPos.h, ww = pos.w, hh = pos.h;
switch (d) {
case 0:
case 1:
_pos = {x: l + w / 2 + arrWidth + 20 + 1 - ww, y: t + h + arrWidth};
_outerPos = {x: ww - 2 - 20 - arrWidth * 2, y: -arrWidth};
_innerPos = {x: ww - 2 - 20 - arrWidth * 2, y: -arrWidth + 1};
break;
case 2:
_pos = {x: l - ww - arrWidth, y: t + h / 2 - arrWidth - 20 - 1};
_outerPos = {x: ww - 2, y: 20};
_innerPos = {x: ww - 2 - 1, y: 20};
break;
case 3:
_pos = {x: l - ww - arrWidth, y: t + h / 2 - hh / 2};
_outerPos = {x: ww - 2, y: (hh - 2) / 2 - arrWidth};
_innerPos = {x: ww - 2 - 1, y: (hh - 2) / 2 - arrWidth};
break;
case 4:
_pos = {x: l - ww - arrWidth, y: t + h / 2 + arrWidth + 20 + 1 - hh};
_outerPos = {x: ww - 2, y: hh - 2 - 20 - arrWidth * 2};
_innerPos = {x: ww - 2 - 1, y: hh - 2 - 20 - arrWidth * 2};
break;
case 5:
_pos = {x: l + w / 2 + arrWidth + 20 + 1 - ww, y: t - arrWidth - hh};
_outerPos = {x: ww - 2 - 20 - arrWidth * 2, y: hh - 2};
_innerPos = {x: ww - 2 - 20 - arrWidth * 2, y: hh - 2 - 1};
break;
case 6:
_pos = {x: l + w / 2 - ww / 2, y: t - arrWidth - hh};
_outerPos = {x: (ww - 2) / 2 - arrWidth, y: hh - 2};
_innerPos = {x: (ww - 2) / 2 - arrWidth, y: hh - 2 - 1};
break;
case 7:
_pos = {x: l + w / 2 - 20 - arrWidth, y: t - arrWidth - hh};
_outerPos = {x: 20, y: hh - 2};
_innerPos = {x: 20, y: hh - 2 - 1};
break;
case 8:
_pos = {x: l + w + arrWidth, y: t + h / 2 + arrWidth + 20 + 1 - hh};
_outerPos = {x: -arrWidth, y: hh - 2 - 20 - arrWidth * 2};
_innerPos = {x: -arrWidth + 1, y: hh - 2 - 20 - arrWidth * 2};
break;
case 9:
_pos = {x: l + w + arrWidth, y: t + h / 2 - hh / 2};
_outerPos = {x: -arrWidth, y: (hh - 2) / 2 - arrWidth};
_innerPos = {x: -arrWidth + 1, y: (hh - 2) / 2 - arrWidth};
break;
case 10:
_pos = {x: l + w + arrWidth, y: t + h / 2 - arrWidth - 20 - 1};
_outerPos = {x: -arrWidth, y: 20};
_innerPos = {x: -arrWidth + 1, y: 20};
break;
case 11:
_pos = {x: l + w / 2 - 20 - arrWidth, y: t + h + arrWidth};
_outerPos = {x: 20, y: -arrWidth};
_innerPos = {x: 20, y: -arrWidth + 1};
break;
case 12:
_pos = {x: l + w / 2 - ww / 2, y: t + h + arrWidth};
_outerPos = {x: (ww - 2) / 2 - arrWidth, y: -arrWidth};
_innerPos = {x: (ww - 2) / 2 - arrWidth, y: -arrWidth + 1};
break;
default:
_pos = {x: 0, y: 0};
}
return {
pos: _pos,
innerPos: _innerPos,
outerPos: _outerPos
};
},
show: function () {
this.wrap.show();
},
close: function () {
this.wrap.remove();
}
};
})(jQuery);
CSS:
.tip-wrap {
position: absolute;
display: none;
}
.tip-arr-a, .tip-arr-b {
position: absolute;
width: 0;
height: 0;
line-height: 0;
border-style: dashed;
border-color: transparent;
}
page:
我是測(cè)試數(shù)據(jù)
效果：
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78469.html
摘要：概述前段時(shí)間剛剛完成公司觸屏版項(xiàng)目，我覺得很有必要寫一篇文章總結(jié)下自己的心得和踩過的坑。小結(jié)個(gè)人覺得整個(gè)開發(fā)流程就是一體的，沒有絕對(duì)的前后端分離。細(xì)數(shù)下開發(fā)過程中遇到的坑。最近在看模板，貌似很吊的樣子總結(jié)學(xué)習(xí)就是不斷踩坑的過程啊 概述 前段時(shí)間剛剛完成公司觸屏版項(xiàng)目，我覺得很有必要寫一篇文章總結(jié)下自己的心得和踩過的坑。每次回頭看看自己寫的代碼，都有不一樣的體會(huì)，不過大致感覺都是驚人的...
摘要：轉(zhuǎn)載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個(gè)整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。 轉(zhuǎn)載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...
摘要：轉(zhuǎn)載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個(gè)整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。 轉(zhuǎn)載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...
摘要：此時(shí)使用設(shè)置當(dāng)前值中的猜測(cè)值為輸入框的內(nèi)容值。接著判斷猜測(cè)之是否大于或者小于，因?yàn)檫@兩者是范圍之外不再進(jìn)行判斷，所以最開始使用進(jìn)行判斷不能小于不能大于以上代碼中表示調(diào)用微信小程序接口彈出提示，傳入的參數(shù)為提示內(nèi)容。 ...
摘要：一個(gè)專注于瀏覽器端和兼容的包管理器。一個(gè)整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識(shí)別和記錄模式。健壯的優(yōu)雅且功能豐富的模板引擎。完整的經(jīng)過充分測(cè)試和記錄數(shù)據(jù)結(jié)構(gòu)的庫。 【導(dǎo)讀】：GitHub 上有一個(gè) Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發(fā)起維護(hù)的 JS 資源列表...
閱讀 3478·2019-08-30 10:54
閱讀 3175·2019-08-29 16:38
閱讀 2215·2019-08-26 14:06
閱讀 1535·2019-08-23 15:39
閱讀 3067·2019-08-23 15:37
閱讀 2906·2019-08-23 13:50
閱讀 3216·2019-08-22 17:14
閱讀 2406·2019-08-22 15:44
