Skip to content

Commit b1df0dc

Browse files
author
杨捷
committed
Create jquery.contips.js
1 parent 0b7b440 commit b1df0dc

File tree

1 file changed

+338
-0
lines changed

1 file changed

+338
-0
lines changed

‎jquery.contips.js‎

Lines changed: 338 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,338 @@
1+
2+
/*
3+
* 提示框插件
4+
* 作者：杨捷
5+
* 主页：http://jojoin.com/user/1/
6+
* QQ：446342398
7+
* email：myworld4059@163.com
8+
*
9+
*/
10+
11+
12+
contips = (function($){
13+
14+
var A = {}
15+
16+
,$body = $('body')
17+
,$window = $(window);
18+
19+
20+
//默认选项
21+
var theDefaultOptions = {
22+
//
23+
min_w: 128,
24+
min_h: 68,
25+
26+
align: 'auto', //提示框出现的位置 auto top left right bottom
27+
mode:'hover', //显示的方式 instant hover click focus
28+
cursor: false, //显示跟随光标
29+
event: false, //事件
30+
31+
ver_sc: 0.5,
32+
ver_px: 0,
33+
elm_sc: 0.5, //偏移百分比
34+
elm_px: 0, //偏移像素
35+
36+
oft: 0, //指定内外偏移，可以为负值，
37+
38+
out_close: true, //鼠标移出提示框关闭
39+
hover: true, //鼠标移至提示框不关闭
40+
open: 360, //显示延迟
41+
close: 250, //关闭延迟
42+
ver_pos: false, //指定小三角的位置 {left:0,top:0}
43+
44+
con: '', //默认内容
45+
46+
style:{
47+
close: '', //关闭按钮样式
48+
wrap: '', //样式，宽高度自适应，可设置min-width和min-height
49+
ver: '', //小三角样式
50+
con: '', //内容样式
51+
tips: '' //总外部样式 absolute fixed 相对于body
52+
},
53+
54+
ready: function($elm,$tip){} //已经显示完成之后的回调
55+
};
56+
57+
58+
59+
60+
$.fn.contips = function(opts){
61+
62+
var that = $(this);
63+
64+
65+
//参数预处理
66+
opts.ver_w = 10; //小三角宽度
67+
68+
return that.each(function() {
69+
var op = $.extend({},theDefaultOptions,opts);
70+
op.style = $.extend({},theDefaultOptions.style,opts.style);
71+
fixEvent($(this),op);
72+
});
73+
74+
};
75+
76+
77+
//注册打开的事件
78+
function fixEvent(that,op){
79+
80+
if(op.mode=='hover'){
81+
that.on('mouseenter',function(){ showTip(that,op); });
82+
if(op.out_close){ //鼠标移出关闭
83+
that.on('mouseleave',function(){ hideTip(that,op); });
84+
}
85+
}else if(op.mode=='click'){
86+
that.on('click',function(event){
87+
var offset = false;
88+
if(op.cursor){ //显示跟随鼠标
89+
offset = mouseCoords(op.event);
90+
}
91+
showTip(that,op,offset);
92+
});
93+
}else if(op.mode=='instant'){
94+
var offset = false;
95+
if(op.cursor){ //显示跟随鼠标
96+
offset = mouseCoords(op.event);
97+
}
98+
showTip(that,op,offset);
99+
}
100+
}
101+
102+
103+
//获取鼠标坐标
104+
function mouseCoords(ev)
105+
{
106+
if(ev.pageX || ev.pageY){
107+
return {left:ev.pageX, top:ev.pageY};
108+
}
109+
return {
110+
left:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
111+
top:ev.clientY + document.body.scrollTop - document.body.clientTop
112+
};
113+
}
114+
115+
//打开提示框
116+
function showTip(that,op,offset){
117+
clearTime(that);
118+
if(!that.timeoutOpen && that.$tip==null){
119+
that.timeoutOpen = setTimeout(function(){
120+
open(that,op,offset);//打开
121+
},op.open);
122+
}
123+
}
124+
function open(that,op,offset){
125+
var backOb = calculate(that,op,offset);
126+
that.$tip = $(getHtml(that,backOb)).appendTo(document.body);
127+
op.ready(that,that.$tip);
128+
hoverNotClose(that,op);
129+
bindCloseEvent(that,op);
130+
}
131+
132+
133+
//关闭提示框
134+
function hideTip(that,op){
135+
clearTime(that);
136+
if(!that.timeoutClose){
137+
that.timeoutClose = setTimeout(function(){
138+
close(that,op)
139+
},op.close);
140+
}
141+
}
142+
function close(that,op){
143+
that.$tip.remove();
144+
that.$tip = null;
145+
}
146+
147+
148+
149+
//清除打开或关闭的延迟
150+
function clearTime(that){
151+
if(that.timeoutOpen) {
152+
clearTimeout(that.timeoutOpen);
153+
that.timeoutOpen = false;
154+
}
155+
if(that.timeoutClose) {
156+
clearTimeout(that.timeoutClose);
157+
that.timeoutClose = false;
158+
}
159+
}
160+
161+
162+
//计算位置等等
163+
function calculate(that,op,offt){
164+
var backOb = {};
165+
backOb.con = op.con; //拷贝内容
166+
var style = backOb.style = {};
167+
for(var k in op.style){
168+
style[k] = op.style[k]; //拷贝样式
169+
}
170+
171+
var offset=offt,elm_height=0,elm_width=0,align = op.align;
172+
if(!op.cursor){
173+
offset = that.offset(); //当前事件元素的相对于body的位置
174+
elm_height = that.outerHeight();
175+
elm_width = that.outerWidth();
176+
}
177+
178+
179+
//alert(op.align);
180+
if(align=='auto'){ //默认显示位置变换
181+
var client = ScollPostion();
182+
//alert(offset.top - client.top+elm_height/2);
183+
if(offset.top - client.top+elm_height/2 >= client.clientHeight*0.3){
184+
align = 'top';
185+
}else{
186+
align = 'bottom';
187+
}
188+
op.ver_sc = (offset.left - client.left+elm_width/2)/client.clientWidth;
189+
}
190+
191+
solveStyle(style,op,align,offset,elm_height,elm_width);
192+
193+
style.wrap += 'min-width:'+op.min_w+'px;min-height:'+op.min_h+'px';
194+
backOb.align = align;
195+
196+
return backOb;
197+
}
198+
199+
200+
//解析style属性
201+
function solveStyle(style,op,align,offset,elm_height,elm_width){
202+
203+
var body_height = $window.height()
204+
,body_width = $window.width();
205+
206+
op.ver_sc>1?op.ver_sc=1:0;
207+
op.ver_sc<0?op.ver_sc=0:0;
208+
209+
if(align=='top' || align=='bottom'){
210+
if(align=='top'){
211+
var bottom = body_height - offset.top + op.ver_w + op.oft;
212+
style.tips += 'bottom:'+bottom+'px;';
213+
}else{
214+
var top = elm_height + offset.top + op.ver_w + op.oft;
215+
style.tips += 'top:'+top+'px;';
216+
}
217+
if(op.ver_sc<=0.5){
218+
var ver_left = (op.min_w - (op.ver_w*2))*op.ver_sc + op.ver_px
219+
,left = offset.left + elm_width*op.elm_sc + op.elm_px - op.ver_w - ver_left;
220+
style.ver = 'left:'+ver_left+'px;';
221+
style.tips += 'left:'+left+'px;';
222+
}else{
223+
var ver_right = (op.min_w-(op.ver_w*2))*(1.0-op.ver_sc) + op.ver_px
224+
,right = body_width - offset.left - elm_width*(1.0-op.elm_sc) - op.ver_w - ver_right;
225+
style.ver = 'right:'+ver_right+'px;';
226+
style.tips += 'right:'+right+'px;';
227+
}
228+
}else{
229+
if(align=='left'){
230+
231+
}else{
232+
233+
}
234+
}
235+
}
236+
237+
238+
//获得html
239+
function getHtml(that,op){
240+
241+
242+
return tmpl(CONTIPS_TPL,op);
243+
}
244+
245+
//关闭提示框按钮，事件绑定
246+
function bindCloseEvent(that,op){
247+
that.$tip.find('.close').click(function(){
248+
close(that,op)
249+
});
250+
}
251+
252+
//鼠标移至提示框不关闭
253+
function hoverNotClose(that,op){
254+
if(op.hover){
255+
that.$tip.mouseenter(function(){
256+
clearTime(that);
257+
});
258+
}
259+
if(op.out_close){
260+
that.$tip.mouseleave(function(){
261+
hideTip(that,op);
262+
});
263+
}
264+
}
265+
266+
267+
//获取浏览器窗口大小
268+
function getView(){
269+
// 获取窗口宽度
270+
var off = {};
271+
off.width = off.width || window.innerWidth;
272+
off.width = off.width || document.body.clientWidth;
273+
// 获取窗口高度
274+
off.height = off.height || window.innerHeight;
275+
off.height = off.height || document.body.clientHeight;
276+
// 通过深入 Document 内部对 body 进行检测，获取窗口大小
277+
off.height = off.height ||document.documentElement.clientHeight;
278+
off.width = off.width|| document.documentElement.clientWidth;
279+
280+
return off;
281+
}
282+
283+
return A;
284+
})(jQuery);
285+
286+
287+
288+
289+
290+
/*
291+
提示框模板
292+
*/
293+
294+
window.CONTIPS_TPL = '<div class="contips" style="[%=style.tips%]">' +
295+
'<div class="wrap" style="[%=style.wrap%]">' +
296+
'<div class="ver [%=align%]" style="[%=style.ver%]"><div class="arr1"></div><div class="arr2"></div></div>' +
297+
'<div class="con" style="[%=style.con%]">[%=con%]</div>' +
298+
'<div class="close" title="关闭" style="[%=style.close%]">╳</div>' +
299+
'</div></div>';
300+
301+
302+
303+
304+
305+
306+
/*
307+
模板解析函数
308+
*/
309+
310+
window.tmpl = (function (cache, $) {
311+
return function (str, data) {
312+
var fn = !/\s/.test(str)
313+
? cache[str] = cache[str]
314+
|| tmpl(document.getElementById(str).innerHTML)
315+
316+
: function (data) {
317+
var i, variable = [$], value = [[]];
318+
for (i in data) {
319+
variable.push(i);
320+
value.push(data[i]);
321+
};
322+
return (new Function(variable, fn.$))
323+
.apply(data, value).join("");
324+
};
325+
326+
fn.$ = fn.$ || $ + ".push('"
327+
+ str.replace(/\\/g, "\\\\")
328+
.replace(/[\r\t\n]/g, " ")
329+
.split("[%").join("\t")
330+
.replace(/((^|%])[^\t]*)'/g, "$1\r")
331+
.replace(/\t=(.*?)%]/g, "',$1,'")
332+
.split("\t").join("');")
333+
.split("%]").join($ + ".push('")
334+
.split("\r").join("\\'")
335+
+ "');return " + $;
336+
337+
return data ? fn(data) : fn;
338+
}})({}, '$' + (+ new Date));

0 commit comments

Comments
 (0)