Имя пользователя:
Пароль:
 

Название темы: Мощь DHTML
Показать сообщение отдельно

Ночной странник


Contributor


Сообщения: 4050
Благодарности: 84

Профиль | Сайт | Отправить PM | Цитировать


контекстное меню по правому клику:

PHP код: Выделить весь код

<html>

<
head>
<!-- 
HEAD START HERE -->
<
style>
<!--
.
skin0{
position:absolute;
width:165px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
font-size:14px;
z-index:100;
visibility:hidden;
}

.
menuitems{
padding-left:10px;
padding-right:10px;
}
-->
</
style>
<!-- 
HEAD END HERE -->
</
head>
<
body text="#000000" link="#000099" topmargin="0" leftmargin="0">
<!-- 
BODY START HERE -->
<
div id="ie5menu" class="skin0" onMouseover="highlightie5(event)" onMouseout="lowlightie5(event)" onClick="jumptoie5(event)" display:none>
<
div class="menuitems" url="http://www.omen.ru">Omen</div>
<
div class="menuitems" url="http://www.rambler.ru" target="newwin">Rambler</div>
<
div class="menuitems" url="http://yandex.ru">Yandex</div>
<
div class="menuitems" url="http://yahoo.com">Yahoo</div>
<
div class="menuitems" url="http://microsoft.com">Microsoft</div>
<
div class="menuitems" url="http://www.web-script.narod.ru">WEB-SCRIPT</div>
<
hr>
<
div class="menuitems" url="mailto:webscript@pisem.net">E-mail</div>
</
div>
<
script language="JavaScript">
//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar
var display_url=0

var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
if (ie5||ns6)
var 
menuobj=document.getElementById("ie5menu")

function 
showmenuie5(e){
//Find out how close the mouse is to the corner of the window
var rightedge=ie5document.body.clientWidth-event.clientX window.innerWidth-e.clientX
var bottomedge=ie5document.body.clientHeight-event.clientY window.innerHeight-e.clientY

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5document.body.scrollLeft+event.clientX-menuobj.offsetWidth window.pageXOffset+e.clientX-menuobj.offsetWidth
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5document.body.scrollLeft+event.clientX window.pageXOffset+e.clientX

//same concept with the vertical position
if (bottomedge<menuobj.offsetHeight)
menuobj.style.top=ie5document.body.scrollTop+event.clientY-menuobj.offsetHeight window.pageYOffset+e.clientY-menuobj.offsetHeight
else
menuobj.style.top=ie5document.body.scrollTop+event.clientY window.pageYOffset+e.clientY

menuobj
.style.visibility="visible"
return false
}

function 
hidemenuie5(e){
menuobj.style.visibility="hidden"
}

function 
highlightie5(e){
var 
firingobj=ie5event.srcElement e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (
ns6&&firingobj.parentNode.className=="menuitems"firingobj=firingobj.parentNode //up one node
firingobj.style.backgroundColor="highlight"
firingobj.style.color="white"
if (display_url==1)
window.status=event.srcElement.url
}
}

function 
lowlightie5(e){
var 
firingobj=ie5event.srcElement e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (
ns6&&firingobj.parentNode.className=="menuitems"firingobj=firingobj.parentNode //up one node
firingobj.style.backgroundColor=""
firingobj.style.color="black"
window.status=''
}
}

function 
jumptoie5(e){
var 
firingobj=ie5event.srcElement e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (
ns6&&firingobj.parentNode.className=="menuitems"firingobj=firingobj.parentNode
if (firingobj.getAttribute("target"))
window.open(firingobj.getAttribute("url"),firingobj.getAttribute("target"))
else
window.location=firingobj.getAttribute("url")
}
}

if (
ie5||ns6){
menuobj.style.display=''
document.oncontextmenu=showmenuie5
document
.onclick=hidemenuie5
}
</script>
<!-- BODY END HERE -->
<br>
<center>
<br>
<p align="center">Äëÿ ïðèìåðà íàæìèòå ïðàâîé
êíîïêîé ìûøêè. Çàìåíèòå ññûëêè íà ñâîè - è ó Âàñ áóäåò îòëè÷íîå ìåíþ!</p>
</body>
</html> 

-------
можно практически все, но просто мы это еще не знаем.
главный враг програмиста это копипастинг
За хорошее сообщение не забываем нажимать ссылочку "Полезное сообщение"!


Отправлено: 23:46, 18-12-2005 | #15

Название темы: Мощь DHTML