|
|||||||
Всплывающие подсказки tooltip на javascript, работа с кукисами, кодимОбсуждение темы Всплывающие подсказки tooltip на javascript, работа с кукисами, кодим в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Всплывающие подсказки tooltip на javascript : Все началось с того что я решил найти готовый движок всплывающих подсказок tooltip. Не найдя того что ... |
 |
|
|
Опции темы |
30.07.2011, 02:32
|
#1 | |
|
|
Всплывающие подсказки tooltip на javascript:
Все началось с того что я решил найти готовый движок всплывающих подсказок tooltip. Не найдя того что мне нужно, я был вынужден написать свой движок. Тщательно протестировал его на старых браузерах, так что можете быть уверенными что код работает во всех браузерах, а в браузере IE аж начиная с версии 5,5 Теперь разберем как работает код! Подробное описание: В чем вообще преимущество данного движка? В том что не нужно ничего программировать и разбираться в коде Давайте сразу разберем пример: Допустим у вас есть html код в котором есть теги у которых есть id Код:
<br /><br /><br /><br /><br /> <div id="lololo">наведи сюда мышь 1</div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <div id="lololox">наведи сюда мышь 2</div> <br /><br /><br /><br /><br /> Для начала подключите код движка желательно перед тегом </head> Можете поместить этот движок в отдельный файл, например tooltip.js без тегов и подключать его к своему сайту: Код:
var tooltip = {
create:function (args) {
args = args || {};
var default_args = {
'img':true,
'border':'1px solid #000000',
'bg_img_1':'imgtool/tooltip-1.png',
'bg_img_2':'imgtool/tooltip-2.png',
'bg_img_3':'imgtool/tooltip-3.png',
'bg_img_4':'imgtool/tooltip-4.png',
'bg_img_5':'imgtool/tooltip-5.png',
'bg_img_6':'imgtool/tooltip-6.png',
'bg_img_7':'imgtool/tooltip-7.png',
'bg_img_8':'imgtool/tooltip-8.png',
'bg_color':'#ffffff',
'width':19,
'height':15,
'font':12,
'font_color':'#000000',
'id_el':[],
'id_txt':[],
'pos':'bottomright',
't':10,
'l':15,
'timer_on':30,
'speed_on':5,
'timer_off':30,
'speed_off':5,
'alpha_end':100
}
for(var index in default_args) {
if(typeof args[index] == "undefined") args[index] = default_args[index];
}
var ie = window.navigator.appName=='Microsoft Internet Explorer' ? true : false;
var el;
el= document.createElement('div');
el.setAttribute('id', 'tooltip_panel');
el.style.position='absolute';
el.style.zIndex=30;
el.style.top='0px';
el.style.left='0px';
el.style.visibility='hidden';
el.style.display='none';
document.body.appendChild(el);
var el_m=[];
for(var i=0;i<8;i++) {
if(args['img']) {
if(ie && args['bg_img_'+(i+1)].toLowerCase().indexOf('.png')!= -1) {
switch(i) {
case 0:
el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_1']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
break;
case 1:
el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_2']+'\',sizingMethod=\'scale\'); height:'+args['height']+'px; font-size:1px;';
break;
case 2:
el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_3']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
break;
case 3:
el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_4']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; font-size:1px;';
break;
case 4:
el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_5']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; font-size:1px;';
break;
case 5:
el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_6']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
break;
case 6:
el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_7']+'\',sizingMethod=\'scale\'); height:'+args['height']+'px; font-size:1px;';
break;
case 7:
el_m[i]='background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+args['bg_img_8']+'\',sizingMethod=\'scale\'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
break;
}
}
else {
switch(i) {
case 0:
el_m[i]='background-image:url('+args['bg_img_1']+'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
break;
case 1:
el_m[i]='background-image:url('+args['bg_img_2']+'); height:'+args['height']+'px; font-size:1px;';
break;
case 2:
el_m[i]='background-image:url('+args['bg_img_3']+'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
break;
case 3:
el_m[i]='background-image:url('+args['bg_img_4']+'); width:'+args['width']+'px; font-size:1px;';
break;
case 4:
el_m[i]='background-image:url('+args['bg_img_5']+'); width:'+args['width']+'px; font-size:1px;';
break;
case 5:
el_m[i]='background-image:url('+args['bg_img_6']+'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
break;
case 6:
el_m[i]='background-image:url('+args['bg_img_7']+'); height:'+args['height']+'px; font-size:1px;';
break;
case 7:
el_m[i]='background-image:url('+args['bg_img_8']+'); width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px;';
break;
}
}
}
else {
switch(i) {
case 0:
el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px; overflow:hidden;';
break;
case 1:
el_m[i]='background-color:'+args['bg_color']+'; height:'+args['height']+'px; font-size:1px; overflow:hidden;';
break;
case 2:
el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px; overflow:hidden;';
break;
case 3:
el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; font-size:1px; overflow:hidden;';
break;
case 4:
el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; font-size:1px; overflow:hidden;';
break;
case 5:
el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px; overflow:hidden;';
break;
case 6:
el_m[i]='background-color:'+args['bg_color']+'; height:'+args['height']+'px; font-size:1px; overflow:hidden;';
break;
case 7:
el_m[i]='background-color:'+args['bg_color']+'; width:'+args['width']+'px; height:'+args['height']+'px; font-size:1px; overflow:hidden;';
break;
}
el.style.border=args['border'];
}
}
el.innerHTML=''+
'<table border="0" cellpadding="0" cellspacing="0">'+
'<tr>'+
'<td><div style="'+el_m[0]+'"></div></td>'+
'<td><div style="'+el_m[1]+'"></div></td>'+
'<td><div style="'+el_m[2]+'"></div></td>'+
'</tr>'+
'<tr>'+
'<td style="'+el_m[3]+'"></td>'+
'<td style="font-family:Tahoma,Verdana,Arial,Times New Roman,Helvetica,sans-serif; font-size:'+args['font']+'px; color:'+args['font_color']+'; background-color:'+args['bg_color']+'; white-space:nowrap;" id="td_tooltip_txt"></td>'+
'<td style="'+el_m[4]+'"></td>'+
'</tr>'+
'<tr>'+
'<td><div style="'+el_m[5]+'"></div></td>'+
'<td><div style="'+el_m[6]+'"></div></td>'+
'<td><div style="'+el_m[7]+'"></div></td>'+
'</tr>'+
'</table>';
this.param.pos=args['pos'];
this.param.l=args['l'];
this.param.t=args['t'];
this.param.timer_on=args['timer_on'];
this.param.speed_on=args['speed_on'];
this.param.timer_off=args['timer_off'];
this.param.speed_off=args['speed_off'];
this.param.alpha_end=args['alpha_end'];
this.param.id_el=args['id_el'];
this.param.id_txt=args['id_txt'];
this.param.start();
},
get_elm:function (n) {
switch(n) {
case 1:
return document.getElementById('tooltip_panel');
break;
case 2:
return document.getElementById('td_tooltip_txt');
break;
}
},
param: {
pos:'auto',
t:0,
l:0,
timer_on:0,
speed_on:0,
timer_off:0,
speed_off:0,
alpha:0,
alpha_end:0,
id_el:[],
id_txt:[],
get_tiou:0,
start: function () {
var tooltip_el;
window.onload = function() {
for(var i=0;i<tooltip.param.id_el.length;i++) {
tooltip_el=document.getElementById(tooltip.param.id_el[i]);
tooltip_el.onmousemove=function (e) {
tooltip.onmmo(e);
}
tooltip_el.onmouseover=function (e) {
tooltip.onmov(e,this.id);
//tooltip.onmov(e,this.getAttribute('id'));
}
tooltip_el.onmouseout=function () {
tooltip.onmou();
}
}
}
}
},
onmmo: function (e) {
var xy = this.getp(e);
var p = this.param.pos;
var cxy = this.getc();
//this.get_elm(1).clientWidth
if(p=='auto') {
if(xy.x>cxy.x && xy.y<cxy.y) {//topright ---> bottomleft
this.get_elm(1).style.left=xy.x-this.param.l-this.get_elm(1).offsetWidth+'px';
this.get_elm(1).style.top=xy.y+this.param.t+'px';
}
else if(xy.x>cxy.x && xy.y>cxy.y) {//bottomright ---> topleft
this.get_elm(1).style.left=xy.x-this.param.l-this.get_elm(1).offsetWidth+'px';
this.get_elm(1).style.top=xy.y-this.param.t-this.get_elm(1).offsetHeight+'px';
}
else if(xy.x<cxy.x && xy.y>cxy.y) {//bottomleft ---> topright
this.get_elm(1).style.left=xy.x+this.param.l+'px';
this.get_elm(1).style.top=xy.y-this.param.t-this.get_elm(1).offsetHeight+'px';
}
else if(xy.x<=cxy.x && xy.y<=cxy.y) {//topleft ---> bottomright
this.get_elm(1).style.left=xy.x+this.param.l+'px';
this.get_elm(1).style.top=xy.y+this.param.t+'px';
}
}
else if(p=='topleft' || p=='lefttop') {
this.get_elm(1).style.left=xy.x-this.param.l-this.get_elm(1).offsetWidth+'px';
this.get_elm(1).style.top=xy.y-this.param.t-this.get_elm(1).offsetHeight+'px';
}
else if(p=='topright' || p=='righttop') {
this.get_elm(1).style.left=xy.x+this.param.l+'px';
this.get_elm(1).style.top=xy.y-this.param.t-this.get_elm(1).offsetHeight+'px';
}
else if(p=='bottomleft' || p=='leftbottom') {
this.get_elm(1).style.left=xy.x-this.param.l-this.get_elm(1).offsetWidth+'px';
this.get_elm(1).style.top=xy.y+this.param.t+'px';
}
else if(p=='bottomright' || p=='rightbottom') {
this.get_elm(1).style.left=xy.x+this.param.l+'px';
this.get_elm(1).style.top=xy.y+this.param.t+'px';
}
},
onmov: function (e,atr) {
this.noerr();
this.get_elm(1).style.visibility='visible';
this.get_elm(1).style.display='block';
this.settxt(atr);
this.param.alpha=0;
tooltip.show();
this.onmmo(e);
},
onmou: function () {
this.noerr();
tooltip.hide();
},
settxt: function (atr) {
for(var x in tooltip.param.id_el) {
if(tooltip.param.id_el[x]===atr) {
this.get_elm(2).innerHTML=tooltip.param.id_txt[x];
}
}
},
show: function () {
this.get_elm(1).style.opacity=this.param.alpha*.01;
this.get_elm(1).style.filter='alpha(opacity='+this.param.alpha+')';
this.param.alpha=this.param.alpha+this.param.speed_on;
if(this.param.alpha<this.param.alpha_end) {
this.param.get_tiou=setTimeout('tooltip.show();',this.param.timer_on);
}
else {
this.get_elm(1).style.opacity=this.param.alpha_end*.01;
this.get_elm(1).style.filter='alpha(opacity='+this.param.alpha_end+')';
this.param.alpha=this.param.alpha_end;
}
},
hide: function () {
this.get_elm(1).style.opacity=this.param.alpha*.01;
this.get_elm(1).style.filter='alpha(opacity='+this.param.alpha+')';
this.param.alpha=this.param.alpha-this.param.speed_off;
if(this.param.alpha>0) {
this.param.get_tiou=setTimeout('tooltip.hide();',this.param.timer_off);
}
else {
this.get_elm(1).style.opacity=this.param.alpha_end*.01;
this.get_elm(1).style.filter='alpha(opacity='+this.param.alpha_end+')';
this.param.alpha=0;
this.get_elm(1).style.visibility='hidden';
this.get_elm(1).style.display='none';
}
},
noerr: function () {
clearTimeout(this.param.get_tiou);
},
getp: function (e) {
var x=0, y=0;
if(!e) {e = window.event;}
if(e.pageX || e.pageY) {
x=e.pageX;
y=e.pageY;
}
else if(e.clientX || e.clientY) {
x=e.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft)-document.documentElement.clientLeft;
y=e.clientY+(document.documentElement.scrollTop || document.body.scrollTop)-document.documentElement.clientTop;
}
return {"x":x, "y":y};
},
getc: function () {
function getClientWidth() {
return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
}
function getClientHeight() {
return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}
function getBodyScrollTop() {
return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
}
function getBodyScrollLeft() {
return self.pageXOffset || (document.documentElement && document.documentElement.scrollLeft) || (document.body && document.body.scrollLeft);
}
function getClientCenterX() {
return parseInt(getClientWidth()/2)+getBodyScrollLeft();
}
function getClientCenterY() {
return parseInt(getClientHeight()/2)+getBodyScrollTop();
}
var x=0, y=0;
x=getClientCenterX();
y=getClientCenterY();
return {"x":x, "y":y};
}
};
Код:
<script type="text/javascript">
tooltip.create({
'img':true,
'border':'1px solid #000000',
'bg_img_1':'imgtool/tooltip-1.png',
'bg_img_2':'imgtool/tooltip-2.png',
'bg_img_3':'imgtool/tooltip-3.png',
'bg_img_4':'imgtool/tooltip-4.png',
'bg_img_5':'imgtool/tooltip-5.png',
'bg_img_6':'imgtool/tooltip-6.png',
'bg_img_7':'imgtool/tooltip-7.png',
'bg_img_8':'imgtool/tooltip-8.png',
'bg_color':'#ffffff',
'width':19,
'height':15,
'font':12,
'font_color':'#000000',
'id_el':[
'lololo',
'lololox'
],
'id_txt':[
'Это всплывающая подсказка<br />новая строка в ней',
'Еще одна подсказка!!!!!!!'
]
'pos':'bottomright',
't':10,
'l':15,
'timer_on':30,
'speed_on':5,
'timer_off':30,
'speed_off':5,
'alpha_end':100
});
</script>
Код:
'img' - может принимать значение как true так и false при установке true рамка подсказок формируется из изображений, при false из обычного бордюра 'border' - если img установлен false то здесь пишутся параметры толщина цвет бордюра рамки всплывающей подсказки аналогично как в css Если параметр img установлен true, то для формирования рамки всплывающих подсказок будут использованы следующие изображение 'bg_img_1' - изображение левого верхнего угла рамки 'bg_img_2' - изображение верхнего центр рамки 'bg_img_3' - изображение правого верхнего угла рамки 'bg_img_4' - изображение левого центра рамки 'bg_img_5' - изображение правого центра рамки 'bg_img_6' - изображение левого нижнего угла рамки 'bg_img_7' - изображение нижнего центра рамки 'bg_img_8' - изображение правого нижнего угла рамки 'bg_color' - цвет фона рамки Если параметр img установлен true, то размеры угловых картинок рамки будут устанавливаться в свойстве width и height, если параметр img установлен false то параметры width и height будут отступом между текстом и рамкой, соответственно width слева и справа, height сверху и снизу рамки. 'width' - ширина угловых изображений рамки, либо отступ слева и справа от рамки, в зависимости от установок параметра img 'height' - высота угловых изображений рамки, либо отступ сверху и снизу от рамки, в зависимости от установок параметра img 'font' - размер шрифта подсказки в пикселях 'font_color' - цвет текста подсказки 'id_el' - массив идентификаторов id для которых устанавливается подсказка 'id_txt' - массив текста подсказок, для каждого id из параметра id_el своя подсказка в той же последовательности. Подсказка может всплывать слева внизу от курсора, справа внизу, слева сверху, справа сверху, либо автоматически будет вычисляться оптимальное положение подсказки. 'pos' - Подсказка позиционируется автоматически - 'auto', всплывает слева вверху от курсора - 'topleft' либо 'lefttop', всплывает справа сверху от курсора - 'topright' либо 'righttop', всплывает слева внизу от курсора - 'bottomleft' либо 'leftbottom', всплывает справа внизу от курсора - 'bottomright' либо 'rightbottom' 't' - отступ рамки подсказки от курсора в пикселях слева либо справа в зависимости от установок параметра pos 'l' - отступ рамки подсказки от курсора в пикселях сверху либо снизу в зависимости от установок параметра pos 'timer_on' - скорость появления подсказки в миллисекундах 'speed_on' - скорость появления подсказки от 1 - до значения параметра alpha_end 'timer_off' - скорость исчезновения подсказки в миллисекундах 'speed_off' - скорость исчезновения подсказки от значения параметра alpha_end - до 1 'alpha_end' - прозрачность отображаемой подсказки от 0 до 100, где 0 полная прозрачность Код:
<script type="text/javascript">
tooltip.create({
'id_el':[
'lololo',
'lololox'
],
'id_txt':[
'Это всплывающая подсказка<br />новая строка в ней',
'Еще одна подсказка!!!!!!!'
]
'pos':'auto'
});
</script>
Код:
<script type="text/javascript">
tooltip.create({
'img':false,
'border':'1px solid #000000',
'id_el':[
'lololo',
'lololox'
],
'id_txt':[
'<img src="http://nagon.net/uploads/images/26/26-bfig739m1.jpg" border="0" />',
'Еще одна подсказка!!!!!!!'
]
'pos':'bottomright',
});
</script>
Работа с cookie: Скрипт работает во всех браузерах включая IE начиная с версии 5.5 Для начала подключите код движка желательно перед тегом </head> Можете поместить этот движок в отдельный файл, например cooker.js без тегов и подключать его к своему сайту: Код:
var cooker = {
set: function(cookie_name, cookie_value, cookie_expires, cookie_path, cookie_domain, cookie_secure) {
if(cookie_name!==undefined) {
cookie_expires=cookie_expires || 0;
var expire_date = new Date;
expire_date.setTime(expire_date.getTime() + (cookie_expires*1000));
document.cookie = cookie_name + "=" + escape(cookie_value)+'; ' +
((cookie_expires === undefined) ? '' : 'expires=' + expire_date.toGMTString()+'; ') +
((cookie_path === undefined) ? 'path=/;' : 'path='+cookie_path+'; ') +
((cookie_domain === undefined) ? '' : 'domain='+cookie_domain+'; ') +
((cookie_secure === true) ? 'secure; ' : '');
}
},
get: function(cookie_name) {
var cookie = document.cookie, length = cookie.length;
if(length) {
var cookie_start = cookie.indexOf(cookie_name + '=');
if(cookie_start != -1) {
var cookie_end = cookie.indexOf(';', cookie_start);
if(cookie_end == -1) {
cookie_end = length;
}
cookie_start += cookie_name.length + 1;
return unescape(cookie.substring(cookie_start, cookie_end));
}
}
},
erase: function(cookie_name) {
cooker.set(cookie_name, '', -1);
},
test: function() {
cooker.set('test_cookie', 'test', 10);
var work = (cooker.get('test_cookie') === 'test') ? true : false;
cooker.erase('test_cookie');
return work;
}
};
Код:
cooker.set('name', 'value', 60); //устанавливаю кукисы с именем name, значением value на 60 секунд
Код:
cooker.set('name', 'value', 60, '/', 'nagon.net');
Код:
cooker.set('name', 'value', 60, '/', 'nagon.net', true);
Код:
var cookie_value;
cookie_value = cooker.get('name');
alert(cookie_value);
Код:
alert(cooker.get('name'));
Код:
cooker.erase('name');
Код:
var cookie_test;
cookie_test = cooker.test();
if(cookie_test) {
alert('Все нормально, в вашем браузере кукисы работают');
}
else {
alert('Плохо, в вашем браузоре кукисы отключены');
}
Код:
if(cooker.test()) {
alert('Все нормально, в вашем браузере кукисы работают');
}
else {
alert('Плохо, в вашем браузоре кукисы отключены');
}
Цитата:
- эффект снега (снег на сайт) - эффект дождя на javascript (дождь на сайт) - эффект пузырей на javascript (пузыри на сайт) - эффект сквозь вселенную на javascript - эффект печатающегося текста как в матрице на javascript - эффект матрицы на javascript - предварительная загрузка сайта на javascript - раздвижная панель на javascript - выезжающая панель на javascript - панель вверху на javascript - панели аккордеон на javascript - прогресс бар на javascript - показ картинок на javascript - работа с кукиесами на javascript - свой чат на javascript - звук на сайт на javascript - готовые функции на javascript и т.д. Все описанные выше скрипты с примерами собраны в архив: |
|
|
|
|
30.07.2011, 02:32
|
|
|
Ссылки
|
|
30.07.2011, 10:36
|
#2 |
|
|
нахх сюда ваще это вылил? сполошной копипаст.
|
|
|
|
30.07.2011, 10:36
|
|
|
|
| Похожие темы | ||||
| Тема | Автор | Раздел | Ответов | Последнее сообщение |
| Всплывающие подсказки | Matigor | HTML, CSS, JavaScript | 10 | 25.03.2008 14:00 |
| JavaScript и работа с файлами | Flukky | HTML, CSS, JavaScript | 8 | 25.10.2006 21:25 |
| JavaScript: Работа с окнами | Qizimka | ASP, Perl, PHP и MySQL | 0 | 02.08.2006 14:47 |
| JavaScript работа с файлами | firsoves | ASP, Perl, PHP и MySQL | 1 | 27.10.2005 12:55 |
| Можно ли сделать всплывающие подсказки у текста..? | Данил | HTML, CSS, JavaScript | 8 | 01.08.2004 22:09 |
Текущее время: 06:22. Часовой пояс GMT +4.
|
Реклама на форуме
Условия размещения рекламы
Биржа ссылок
Заработай на сайте!
|
|
Powered by vBulletin Version 3.8.4
Copyright © 2000-2020 Jelsoft Enterprises Ltd. SEO by vBSEO 3.3.2 ©2009, Crawlability, Inc. |
|
