Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Делаю контекстное меню


Автор: Гость_chis 13.10.2004, 10:59
Написал скрипт контекстного меню, но возникла проблемма. Контекстное меню должно исчезать после того как с него "съехала мышь", а оно исчезает после того как мышь "съехала" с первого пункта. Подскажите где ошибка?
Код

</STYLE>
<script>
 function contextFun(){return false;}
 document.oncontextmenu = contextFun;
</SCRIPT>  
<script>
 function fMn(obj){
   if (event.button==2){
     pm.style.display = "block";
     pm.style.posLeft = document.body.scrollLeft + event.clientX - 10;
     pm.style.posTop = document.body.scrollTop + event.clientY - 10;
   }
 }  
 function fMnItemOver(obj){obj.className = "mnItemSelect"}
 function fMnItemOut(obj){obj.className = "mnItem"}
 function fMnOut(obj){
   obj.style.display="none"
 }
</SCRIPT>

<DIV id="pm" onmouseout=fMnOut(this) style="position:absolute;display:none">
 <TABLE class="mn" cellPadding=0 cellSpacing=1>
   <TR><TD class="mnItem" onmouseover=fMnItemOver(this) onmouseout=fMnItemOut(this)>&Auml;&icirc;&aacute;&agrave;&acirc;&egrave;&ograve;&uuml;</TD></TR>
   <TR><TD class="mnItem" onmouseover=fMnItemOver(this) onmouseout=fMnItemOut(this)>&Egrave;&ccedil;&igrave;&aring;&iacute;&egrave;&ograve;&uuml;</TD></TR>
   <TR><TD class="mnItem" onmouseover=fMnItemOver(this) onmouseout=fMnItemOut(this)>&Oacute;&auml;&agrave;&euml;&egrave;&ograve;&uuml;</TD></TR>
 </TABLE>  
</DIV>

<TABLE>
 <TR onmouseup=fMn(this)><TD>ssss</TD></TR>
 <TR onmouseup=fMn(this)><TD>dddd</TD></TR>
 <TR onmouseup=fMn(this)><TD>ffff</TD></TR>
 <TR onmouseup=fMn(this)><TD>gggg</TD></TR>
</TABLE>

Автор: chis 13.10.2004, 11:05
Извиняюсь, скрипт неполностью закачал - вот полная версия
Код

<STYLE>
 TABLE.mn {background:#c0c0c0}
 TD.mnItem {font-size:14;align:left;background:#f0f0f0;padding-left=3pt;padding-right=3pt;}
 TD.mnItemSelect {font-size:14;align:left;background:#eeeebb;padding-left=3pt;padding-right=3pt;}
</STYLE>
<script>
 function contextFun(){return false;}
 document.oncontextmenu = contextFun;
</SCRIPT>  
<script>
 function fMn(obj){
   if (event.button==2){
     pm.style.display = "block";
     pm.style.posLeft = document.body.scrollLeft + event.clientX - 10;
     pm.style.posTop = document.body.scrollTop + event.clientY - 10;
   }
 }  
 function fMnItemOver(obj){obj.className = "mnItemSelect"}
 function fMnItemOut(obj){obj.className = "mnItem"}
 function fMnOut(obj){
   obj.style.display="none"
 }
</SCRIPT>

<DIV id="pm" onmouseout=fMnOut(this) style="position:absolute;display:none">
 <TABLE class="mn" cellPadding=0 cellSpacing=1>
   <TR><TD class="mnItem" onmouseover=fMnItemOver(this) onmouseout=fMnItemOut(this)>Добавить</TD></TR>
   <TR><TD class="mnItem" onmouseover=fMnItemOver(this) onmouseout=fMnItemOut(this)>Изменть</TD></TR>
   <TR><TD class="mnItem" onmouseover=fMnItemOver(this) onmouseout=fMnItemOut(this)>Удалить</TD></TR>
 </TABLE>  
</DIV>

<TABLE>
 <TR onmouseup=fMn(this)><TD>ssss</TD></TR>
 <TR onmouseup=fMn(this)><TD>dddd</TD></TR>
 <TR onmouseup=fMn(this)><TD>ffff</TD></TR>
 <TR onmouseup=fMn(this)><TD>gggg</TD></TR>
</TABLE>

Автор: Alx 13.10.2004, 11:59
Код
<STYLE>
TABLE.mn {background:#c0c0c0}
TD.mnItem {font-size:14;align:left;background:#f0f0f0;padding-left=3pt;padding-right=3pt;}
TD.mnItemSelect {font-size:14;align:left;background:#eeeebb;padding-left=3pt;padding-right=3pt;}
</STYLE>
<script>
function contextFun(){return false;}
document.oncontextmenu = contextFun;
</SCRIPT>
<script>
function fMn(obj){
if (event.button==2){
 pm.style.display = "block";
 pm.style.posLeft = document.body.scrollLeft + event.clientX - 10;
 pm.style.posTop = document.body.scrollTop + event.clientY - 10;
}
}
function fMnItemOver(obj){obj.className = "mnItemSelect"}
function fMnItemOut(obj){obj.className = "mnItem"}
function fMnOut(obj){
obj.style.display="none";
}
function fMnOver(obj){
obj.style.display="block";
}
</SCRIPT>

<DIV id="pm" onmouseout="fMnOut(this)" onmouseover="fMnOver(this)" style="position:absolute;display:none">
<TABLE class="mn" cellPadding=0 cellSpacing=1>
<TR><TD class="mnItem" onmouseover=fMnItemOver(this) onmouseout=fMnItemOut(this)>Добавить</TD></TR>
<TR><TD class="mnItem" onmouseover=fMnItemOver(this) onmouseout=fMnItemOut(this)>Изменть</TD></TR>
<TR><TD class="mnItem" onmouseover=fMnItemOver(this) onmouseout=fMnItemOut(this)>Удалить</TD></TR>
</TABLE>
</DIV>

<TABLE>
<TR onmouseup=fMn(this)><TD>ssss</TD></TR>
<TR onmouseup=fMn(this)><TD>dddd</TD></TR>
<TR onmouseup=fMn(this)><TD>ffff</TD></TR>
<TR onmouseup=fMn(this)><TD>gggg</TD></TR>
</TABLE>

Автор: chis 13.10.2004, 12:52
Тогда еще вопрос в догонку, как сделать так, чтобы на пунктах меню курсор мышки был стрелкой, а не курсором для текста, и как запретить выделение текста меню.

Автор: Gold Dragon 13.10.2004, 13:53
Можно так
Цитата
<TR><TD class="mnItem" onmouseover="this.style.cursor='pointer'; fMnItemOver(this)" onmouseout=fMnItemOut(this)>Добавить</TD></TR>

или так
Цитата
<TR><TD class="mnItem" onmouseover="this.style.cursor='default'; fMnItemOver(this)" onmouseout=fMnItemOut(this)>Изменть</TD></TR>


Автор: HappyMan 18.10.2004, 21:17
И еще такой вопрос :)) :
Например щелкаю я на ссылке (а хреф) правой кнопкой, появляется это меню. Как мне добыть значение ссылки (на которую щелкнули), т.е в данном случае ТЕСТ, чтоб потом я этим значением мог оперировать??
<a href="хахаха.htm"> ТЕСТ </a>

Автор: Sardar 18.10.2004, 22:32
HappyMan один топик, один вопрос ;-)
Достань ссылку по ID:
Код

<a id="lnk" href="хахаха.htm"> ТЕСТ </a>
....
document.getElementById("lnk").innerHTML="<b>Что то другое</b>";

Автор: HappyMan 18.10.2004, 23:22
Sardar
Это будет именно ИД(и значение) ссылки на которой щелкнули правой кнопкой мыши????

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)