Форум dkLab и Denwer
Здесь общаются Web-разработчики.
Генеральный спонсор:
Хостинг «Джино»

Всплывающие подсказки tooltip на javascript, работа с кукисами, библиотека эффектов (prototype)
Author Message
prototype
Заглянувший



Joined: 29 Jul 2011
Posts: 1
Карма: 0
   поощрить/наказать


PostPosted: Fri Jul 29, 2011 11:47 pm (написано за 3 минуты 49 секунд)
   Post subject: Всплывающие подсказки tooltip на javascript, работа с кукисами, библиотека эффектов
Reply with quote

Всплывающие подсказки tooltip на javascript:

Все началось с того что я решил найти готовый движок всплывающих подсказок tooltip.
Не найдя того что мне нужно, я был вынужден написать свой движок.
Тщательно протестировал его на старых браузерах, так что можете быть уверенными что код работает во всех браузерах, а в браузере IE аж начиная с версии 5,5
Теперь разберем как работает код!

Подробное описание:


В чем вообще преимущество данного движка?
В том что не нужно ничего программировать и разбираться в коде
Давайте сразу разберем пример:
Допустим у вас есть html код в котором есть теги у которых есть id
Code (html): скопировать код в буфер обмена
<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)
<div (december.com/html/4/element/div.html) id="lololo"> (december.com/html/4/element/.html)наведи сюда мышь 1</div>
<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)
<div (december.com/html/4/element/div.html) id="lololox"> (december.com/html/4/element/.html)наведи сюда мышь 2</div>
<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)
Как сделать так чтобы при навидении на div-ы с id равными lololo и lololox всплывали подсказки причем для каждого id своя подсказка?

Для начала подключите код движка желательно перед тегом </head>
Можете поместить этот движок в отдельный файл, например tooltip.js без тегов и подключать его к своему сайту:
Code (JavaScript): скопировать код в буфер обмена
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};
        }
};
Дальше после подключенного движка можно его запускать с помощью следующего кода:
Code (JavaScript): скопировать код в буфер обмена
<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>
Давайте теперь посмотрим для чего нужен какой параметр:
Code (any language): скопировать код в буфер обмена
Большинство параметров не требуют установки, поэтому можно упростить наш скрипт и написать его так:
Code (JavaScript): скопировать код в буфер обмена
<script type="text/javascript">
                tooltip.create({
                        'id_el':[
                                        'lololo',
                                        'lololox'
                                ],
                        'id_txt':[
                                        '  <br />   ',
                                        '  !!!!!!!'
                                ]
                        'pos':'auto'
                                        });
</script>
можно написать и так, обратите внимание что подсказка представляет собой изображение!
Code (JavaScript): скопировать код в буфер обмена
<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 без тегов и подключать его к своему сайту:
Code (JavaScript): скопировать код в буфер обмена
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;
        }
};
Создание cookie:
Code (JavaScript): скопировать код в буфер обмена
cooker.set('name', 'value', 60); //устанавливаю кукисы с именем name, значением value на 60 секунд
 
Устанавливать cookie можно с большем числом параметров, например так:
Code (JavaScript): скопировать код в буфер обмена
cooker.set('name', 'value', 60, '/', 'nagon.net');
Или так:
Code (JavaScript): скопировать код в буфер обмена
cooker.set('name', 'value', 60, '/', 'nagon.net', true);
Получение параметра из cookie:
Code (JavaScript): скопировать код в буфер обмена
var cookie_value;
cookie_value = cooker.get('name');
alert(cookie_value);
Можно и так:
Code (JavaScript): скопировать код в буфер обмена
alert(cooker.get('name'));
Удаление cookie:
Code (JavaScript): скопировать код в буфер обмена
cooker.erase('name');
Проверяем включены ли в браузере cookie:
Code (JavaScript): скопировать код в буфер обмена
var cookie_test;
cookie_test = cooker.test();
if(cookie_test) {
alert('Все нормально, в вашем браузере кукисы работают');
}
else {
alert('Плохо, в вашем браузоре кукисы отключены');
}
Или и так:
Code (JavaScript): скопировать код в буфер обмена
if(cooker.test()) {
alert('Все нормально, в вашем браузере кукисы работают');
}
else {
alert('Плохо, в вашем браузоре кукисы отключены');
}
Описание параметров при создании cookie:
Quote:
Имя
Произвольное имя параметра, определенного в cookie. Здесь вы можете использовать любую строку, лишь бы в ней не было пробелов, запятых и двоеточий. В том случае, когда имя должно содержать перечисленные выше символы, используйте кодировку URL
Значение
Текстовая строка значений параметров. В этой строке не должно быть пробелов, запятых и двоеточий, поэтому вы должны использовать для нее кодировку URL
expires
Дата автоматического удаления cookie по Гринвичу. Если эта дата не указана, а параметр expires отсутствует, cookie будет удалено сразу после того, как браузер закончит сеанс связи с сервером Web
path
Часть адреса URL, задающая путь к документу HTML, для которой действует данный cookie. Если этот параметр не указан, то по умолчанию используется адрес URL документа HTML, где был установлен cookie
domain
Доменная часть адреса URL, для которой действует данный cookie. Если этот параметр не указан, то по умолчанию используется доменный адрес URL документа HTML, где был установлен cookie
secure
Если указано это поле, данные cookie необходимо предавать только с использованием защищенного протокола SSL. Такой протокол используется серверами HTTPS
NRMSLib - библиотека скриптовых эффектов


- эффект снега (снег на сайт)
- эффект дождя на javascript (дождь на сайт)
- эффект пузырей на javascript (пузыри на сайт)
- эффект сквозь вселенную на javascript
- эффект печатающегося текста как в матрице на javascript
- эффект матрицы на javascript
- предварительная загрузка сайта на javascript
- раздвижная панель на javascript
- выезжающая панель на javascript
- панель вверху на javascript
- панели аккордеон на javascript
- прогресс бар на javascript
- показ картинок на javascript
- работа с кукиесами на javascript
- свой чат на javascript
- звук на сайт на javascript
- готовые функции на javascript
и т.д.


Все описанные выше скрипты с примерами собраны в архив:


vertas_tools.zip
 Description:

Download
 Filename:  vertas_tools.zip
 Filesize:  50.92 KB
 Downloaded:  481 Time(s)

Back to top
View user's profile Send private message
Rumata
Профессионал



Joined: 17 Aug 2003
Posts: 1850
Карма: 185
   поощрить/наказать


PostPosted: Sat Jul 30, 2011 9:23 am (спустя 9 часов 36 минут; написано за 6 минут 10 секунд)
   Post subject:
Reply with quote

prototype wrote:
Всплывающие подсказки tooltip на javascript
Слишком много кода для такой простой задачи. Проблема не в том, что много кода в самой библиотеке. Проблема в том, что для подключения эффекта требуется (кроме включения библиотеки) написать достаточно кода.

Большой недостаток - подсказки формируются в коде, а не в одном потоке разметки. Подсказка - часть текста, а не интерфейса, поэтому она должна быть частью разметки, а не кода.

На просторах интернета мне встречалось решение, которое работает на практически чистом CSS. Как выглядит реальное решение я не помню, но суть его примерно такова:
Code (html): скопировать код в буфер обмена
<html> (december.com/html/4/element/html.html)

<head> (december.com/html/4/element/head.html)
<style (december.com/html/4/element/style.html) type="text/css"> (december.com/html/4/element/.html)

a.tooltip        {
        text-decoration: none;
}

a.tooltip span.tooltip        {
        display: none;
}

a.tooltip:hover span.tooltip        {
        background-color: #ffff00;
        border: 1px solid #000;
        color: #000;
        display: block;
        position: absolute;
        width: 100px;
}

</style>
</head>

<body> (december.com/html/4/element/body.html)

JavaScript is <a (december.com/html/4/element/a.html) href="#" class="tooltip"> (december.com/html/4/element/.html)dynamically typed<span (december.com/html/4/element/span.html) class="tooltip"> (december.com/html/4/element/.html)Show a definition of dynamically typed languages</span></a>.
JavaScript is <a (december.com/html/4/element/a.html) href="#" class="tooltip"> (december.com/html/4/element/.html)prototype-oriented language<span (december.com/html/4/element/span.html) class="tooltip"> (december.com/html/4/element/.html)Show a definition of prototype-oriented languages</span></a>.

</body>
</html>
Остальное рассматривать не стал.
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic All times are GMT + 3 Hours
Page 1 of 1    Email to a Friend.
You cannot post new topics in this forum. You cannot reply to topics in this forum. You cannot edit your posts in this forum. You cannot delete your posts in this forum. You cannot vote in polls in this forum. You cannot attach files in this forum. You can download files in this forum.
XML