|
Держи.
code:
function initSubmenu(id,objName,classID)
// Конструктор выпадающего меню
{
this.ID=String(id); // ID div'а с меню
this.objName=String(objName); // Имя переменной с меню
this.classID=String(classID); // Класс div'а или пусто
/*
** Пункты меню
*/
this.count=0; // Количество пунктов меню
this.capacity=20; // Максимальное число пунктов меню
this.texts=new Array(this.capacity); // Тексты (или HTML-код) пунктов меню
this.urls=new Array(this.capacity); // URL/URI пунктов меню
this.titles=new Array(this.capacity); // Тексты подсказок пунктов меню
this.add=function(txt,url,title)
{
if(this.count>=this.capacity) return;
this.texts[this.count]=txt;
this.titles[this.count]=title;
this.urls[this.count++]=url;
} // Добавление нового пункта в конец списка
this.drawItems=function(doc)
{
var i;
for(i=0;i<this.count;i++)
doc.writeln('<A href="'
, this.urls[ i]
, '" title="'
, this.titles[ i]
, '">'
, this.texts[ i]
, '</A>');
} // Вывод пунктов меню в doc
/*
** Позициониорвание
*/
this.isVisible=function()
{
return (('visible'==String(document.all(this.ID).style.visibility
).toLowerCase())?(1):(0));
} // DIV виден
this.hide=function()
{
document.all(this.ID).style.visibility="hidden";
this.stopMouseTracking();
this.mouseInMenu=0;
if(0!=this.mouseTimeout)
{
window.clearTimeout(this.mouseTimeout);
this.mouseTimeout=0;
}
} // Удаление
this.moveTo=function(x,y)
{
document.all(this.ID).style.pixelLeft=x;
document.all(this.ID).style.pixelTop=y;
document.all(this.ID).style.visibility="visible";
} // Перевод div'а в нужную позицию и его показ
this.moveUnder=function(obj)
{
var x=0,y=0; // Координаты для позиционирования подменю
var o; // Счетчик родителей
for(o=obj;!0 && 'body'!=String(o.tagName).toLowerCase();o=o.offsetParent)
{
x+=Number(o.offsetLeft);
y+=Number(o.offsetTop);
}
y+=Number(obj.offsetHeight);
this.moveTo(x+1,y+1);
} // Установка DIV'а непосредственно под
/*
** Слежение за мышью
*/
this.mouseTracking=0; // Флаг необходимости отслеживать мышь
this.mouseTimeout=0; // Таймер для удаления подменю
this.mouseInMenu=0; // Флаг наличия мыши в меню
this.stopMouseTracking=function()
{
this.mouseTracking=0;
} // Конец слежения за мышью
this.startMouseTracking=function()
{
this.mouseTracking=1;
if(0!=this.mouseTimeout)
{
window.clearTimeout(this.mouseTimeout);
this.mouseTimeout=0;
}
this.mouseTimeout=window.setTimeout(this.objName+'.hide();',1000);
} // Конец слежения за мышью
this.onMouseOver=function()
{
this.mouseInMenu=1;
if(0!=this.mouseTimeout)
{
window.clearTimeout(this.mouseTimeout);
this.mouseTimeout=0;
}
} // Иышь внутри div-а - удаление таймера
this.onMouseOut=function()
{
this.mouseInMenu=0;
if(0!=this.mouseTimeout)
{
window.clearTimeout(this.mouseTimeout);
this.mouseTimeout=0;
}
this.mouseTimeout=window.setTimeout(this.objName+'.hide();',1000);
} // Мышь за пределами подменю - выставляем таймер на уделение подменю
/*
** Вывод div'а
*/
this.initialize=function(doc)
{
doc.write ('<DIV id="'
, this.ID
, '" ');
if(''!=this.classID)
doc.write('class="',this.classID,'" ');
doc.writeln('onMouseOver="'
, this.objName
, '.onMouseOver();" onMouseOut="'
, this.objName
, '.onMouseOut();" style="position:absolute;visibility:hidden;">');
this.drawItems(doc);
doc.writeln('</DIV>');
} // Вывод HTML-кода DIV'а в документ
}
В примере меню выпадает по клику и скрывается через секунду после вывода курсора за кнопку и само подменю. Можно делать по своему усмотрению - для этого есть все необходимое...
Варианта использования 2.
1) Вывод HTML-кода меню посредством методов подменю-объекта
code:
var submenu1=new initSumbenu('submenu1','submenu1',''); // Создание собственно подменю
submenu1.add('Текст пункта','URI пункта','Title пункта'); // Добавление пункта подменю
submenu1.initialize(document); // Вывод HTML-кода
2)
code:
<SCRIPT>
var submenu1=new initSumbenu('submenu1','submenu1',''); // Создание собственно подменю
</SCRIPT>
<DIV id=submenu1>
...
Пример работы тут
Проверялось на IE5.0.2 и Опере 7.0.
|
