Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Всплывающие подсказки tooltip на javascript, работ, Лучшие движки 
:(
    Опции темы
xzxz
  Дата 29.7.2011, 23:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 5
Регистрация: 24.5.2011

Репутация: нет
Всего: нет



Всплывающие подсказки 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 />


Как сделать так чтобы при навидении на div-ы с id равными lololo и lololox всплывали подсказки причем для каждого id своя подсказка?

Для начала подключите код движка желательно перед тегом </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>




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





Это сообщение отредактировал(а) xzxz - 29.7.2011, 23:32

Присоединённый файл ( Кол-во скачиваний: 5 )
Присоединённый файл  vertas_tools.zip 50,92 Kb
PM MAIL   Вверх
xzxz
  Дата 29.7.2011, 23:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 5
Регистрация: 24.5.2011

Репутация: нет
Всего: нет



Давайте теперь посмотрим для чего нужен какой параметр:

Код

'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;
    }
};


Создание cookie:

Код

cooker.set('name', 'value', 60); //устанавливаю кукисы с именем name, значением value на 60 секунд


Устанавливать cookie можно с большем числом параметров, например так:

Код

cooker.set('name', 'value', 60, '/', 'nagon.net');


Или так:

Код

cooker.set('name', 'value', 60, '/', 'nagon.net', true);


Получение параметра из cookie:

Код

var cookie_value;
cookie_value = cooker.get('name');
alert(cookie_value);


Можно и так:

Код

alert(cooker.get('name'));


Удаление cookie:

Код

cooker.erase('name');


Проверяем включены ли в браузере cookie:

Код

var cookie_test;
cookie_test = cooker.test();
if(cookie_test) {
alert('Все нормально, в вашем браузере кукисы работают');
}
else {
alert('Плохо, в вашем браузоре кукисы отключены');
}


Или и так:

Код

if(cooker.test()) {
alert('Все нормально, в вашем браузере кукисы работают');
}
else {
alert('Плохо, в вашем браузоре кукисы отключены');
}


Описание параметров при создании cookie:

Цитата

Имя
Произвольное имя параметра, определенного в 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
и т.д.


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

Присоединённый файл ( Кол-во скачиваний: 5 )
Присоединённый файл  vertas_tools.zip 50,92 Kb
PM MAIL   Вверх
Sardar
Дата 30.7.2011, 03:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317



Ох е... По стилю скрипт писался лет 7 назад... Практическая ценность не высокая, особенно из-за тяги все до последней мелочи накодить самому. В учебных целях было бы полезно, но стиль... может быть придираюсь. В целом похоже на "копипасту", оставлю здесь до первой жалобы.

На практике лучше строить на базовой библиотеке, к примеру jQuery, код станет во много раз короче.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
IDVsbruck
Дата 30.7.2011, 09:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: нет
Всего: 22



Sardar,

согласен однозначно.

А в учебных целях - НИ В КОЕМ СЛУЧАЕ!
Новичкам нельзя прививать многие приемы, реализованные в этой "библиотеке".
Например, чего стоит парсинг положения каждого элемента в цикле (!) с последующим назначением. Или целая простыня с однотипным "document.getElementById('panel_p_el_m').style." - это нужно, что подряд в каждой строке искать в доме один и тот же элемент по айди? Странные совершенно повторяющиеся функции, единственным отличием которых является айди элемента - нельзя это серьезно оптимизировать? Таких оговорок - воз и маленькая тележка.

Целесообразность создания такой библы и вовсе под вопросом. На кой в одном файле в 75 Кб (!) и работа с элементами, и непонятные эффекты, и звук, и куки? - Кто может быть потребителем такого? - Здравомыслящий человек ЭТИМ не будет пользоваться. ЭТО сложно применить. Да и зачем? - Новичку оно не нужно, а если человек уже разбирается, то пользуется фреймворками или сам пишет и использовать то, где буквально в каждой строчке getElementById с мильоном буквочек и дикими массивами, не будет. Многим на странице нужен "дождь" из нуликов? - На дворе, поди, не 95-тый год ...

Оффтоп! Это почти не касается приведенной тут библиотеки, просто навеяло - давно хотел высказаться.
Еще одна вещь, которую я пропагандирую и которой, как мне кажется, нужно приучать новичков. Она была бы моим ИМХО, если бы не рекомендации Sun, которые я нашел относительно недавно.
Любители пописАть делают так:

if (anything)
    {
    something
    }
else
    {
    more
    }

Убивал бы! Допустим, вопрос местонахождения фигурной скобки остается на совести программиста. Но необходимости использования фигурных скобок для единичных выражений, по мнению того же Сан, нет.
Неужели места не жаль? (у меня огромный монитор и мне видно ОЧЕНЬ много текста, но разве все используют 30-тидюймовые мониторы?)
Насколько лаконичней, оптимальней и симпатичней (ИМХО) код:

if (anything) something
else more

Повторюсь - это не хак и не использование недокуметированных возможностей, не глюк и не обход. Это - нормальная практика. И если у себя можно что угодно и как удобно, то при выкладывании на форум листингов необходимо руководствоваться а) этикой; б) экономить место - чем больше текста, тем меньше вероятность, что помогут с вопросами.
PM MAIL   Вверх
fish9370
Дата 4.9.2011, 17:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 663
Регистрация: 15.4.2007
Где: Москва

Репутация: нет
Всего: 1



Цитата(IDVsbruck @  30.7.2011,  09:26 Найти цитируемый пост)
Насколько лаконичней, оптимальней и симпатичней (ИМХО) код:
if (anything) something
else more


сколько программистов столько и стилей оформления кода..
я предпочетаю правило - каждая команда на новой строке..

Код

if (expression)
            do(somthing);
else
            do(else);





--------------------
undefined
PM MAIL WWW ICQ   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Здесь публикуют скрипты, которые уже проверены в обсуждениях других тем (при этом полезно поставить ссылки на все смежные обсуждения) или переносятся кем-либо из модераторов по просьбе участников, если видно, что в результате обсуждения темы был написан полезный или интересный скрипт. Третий возможный вариант - участник форума публикует скрипт, заведомо известный как полезный и эффективный, для, возможно, небольшой доработки и обсуждения.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Наши скрипты | Следующая тема »


 




[ Время генерации скрипта: 0.1578 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.