Nuosavas JavaScript meniu paspaudus dešinį pelės mygtuką.
Įžanga
Pradžia
style.css
main.js
main.js failo analizė
Priedai
Pabaigai

Nuosavas JavaScript meniu paspaudus dešinį pelės mygtuką.

Įžanga

Ar kada pagalvojote kaip kuriami menu punktai kurie pasirodo tik tuo metu kai paspaudžiamas pelės mygtukas? Šiandien išsiaiškinsime kaip veikia viskas ir po šio straipsnio galėsite ramiai kurti savo nuosavus menu punktus.
Sukurti tokį dalyką nėra sunku, tik gal nėra tiek daug informacijos žaliems paaiškinta kaip tai padaryti.

Pradžia

Pirmiausia reikia susikurti mums elementą <DIV> kuris bus rodomas tik po pelės dešinio mygtuko paspaudimo. Kokį stilių sau pritaikysite kiekvieno žmogaus reikalas. Žemiau pateiktame pavyzdyje pateiksiu jums savo norimą stilių bei <DIV> elementą su visa informacija kurią pats norėsiu matyti po paspaudimo.

Žemiau pateiktas menu punktas kurį išvesime po paspaudimo.

<div id="dlgMenuInfo" style="top:50px; left:50px;" class="dlg-window" >
	<div id="close"><strong>Katalogo valdymas</strong></div>
	<table class="maincont" cellpadding="0" cellspacing="0">
		<tr>
			<td class="uicell">
				<div id="CatList">
					<ul>
						<li>Sukurti naują katalogą</li>
						<li>Ištrinti katalogą</li>
						<li><hr /></li>
						<li>Rodyti sąrašą</li>
						<li>Rodyti išdėstytą</li>
						<li><hr /></li>
						<li>Priskirti darbastalio foną</li>
						<li><hr /></li>
						<li>Atsatyti senuosius nustatymus</li>
					</ul>
				</div>
			</td>
		</tr>
	</table>
</div>

style.css

Stilius kurį mes turime norint pagražinti visa meniu punktą.

div#CatList { 
	border: 1px solid #A0A0A0; 
	background-color: #FFFFFF; 
	overflow: auto
}
div#CatList ul {
	padding: 0; 
	margin: 0; 
	white-space: nowrap
}
div#CatList ul li {
	padding: 0 3px; 
	margin: 0; 
	line-height: 16px; 
	font-size: 11px; 
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; 
	cursor: pointer;
}
div#CatList ul li:hover {
	padding: 0 3px; 
	margin: 0; 
	line-height: 16px; 
	font-size: 11px; 
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	cursor: pointer; 
	background: transparent url(images/s_bg.png);
}
div#CatList ul li.sel {
	background: transparent url(images/s_bg.png); 
	cursor: default;
}	
.dlg-window {
	position: absolute; 
	background-color: #FAFAFA; 
	font-size: 11px; 
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; 
	color: #000000; 
	border: 1px solid #D0D0D0;  
	overflow: hidden;
	display: none;
	z-index:1;
}
div#close {
	background-image: url(images/t_bg.png);
	width:100%;
	height:22px;
}
.maincont { margin: 5px 0 0 0 }
.ie table#maincont td.uicell { vertical-align: top; padding: 0 }

Sukūrę stilius, div elementus ir viską sutvarkę gautume tokį HTML failą:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="lt" lang="lt">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		<link href="style.css" rel="stylesheet" type="text/css" />
		<script src="main.js" type="text/javascript"></script>
	</head>
<body onmousedown="Menu('id',window.event);">
<div id="dlgMenuInfo" style="top:50px; left:50px;" class="dlg-window" >
	<div id="close"><strong>Katalogo valdymas</strong></div>
	<table class="maincont" cellpadding="0" cellspacing="0">
		<tr>
			<td class="uicell">
				<div id="CatList">
					<ul>
						<li>Sukurti naują katalogą</li>
						<li>Ištrinti katalogą</li>
						<li><hr /></li>
						<li>Rodyti sąrašą</li>
						<li>Rodyti išdėstytą</li>
						<li><hr /></li>
						<li>Priskirti darbastalio foną</li>
						<li><hr /></li>
						<li>Atsatyti senuosius nustatymus</li>
					</ul>
				</div>
			</td>
		</tr>
	</table>
</div>
</body>
</html>

Kaip pastebėjote <body> esame elemente yra pridėtas OnMouseDown Javascript pamokos, funkcijos, operatoriai, karkasai įvykis. T.y. Jei paspausime bet kurioje vietoje pelės dešinį mygtuką mums sukurs mūsų sukurtą Menu punktą. Taipogi kad HTML failas užimtų mažiau vietos Javascript pamokos, funkcijos, operatoriai, karkasai ir Stilius sukėliau į jiems atitinkamas vietas kad būtų viskas aiškiau. Taigi styles.css mes jau žinoma kas yra, dabar laikas išanalizuoti main.js failą ir tai kas jame yra.

main.js

document.oncontextmenu = function(){ return false; };
 
function Menu(id,e) {
	if (id == 'catalog') {
		var d = $(id);
		d.onmousedown = function (e) {
			if (!e){ e = window.event; }
			if (e.which == 3) {
				document.getElementById('dlgMenuInfo').style.top = e.clientY - 10  + 'px';
				document.getElementById('dlgMenuInfo').style.left = e.clientX - 10 + 'px';
				document.getElementById('dlgMenuInfo').style.display = 'block';
			}
			if (e.which == 1) {
				document.getElementById('dlgMenuInfo').style.display = 'none';
			}
		}
	}
}

main.js failo analizė

document.oncontextmenu = function(){ return false; }; - Ši vieta skirta kad nerodytų Naršyklės Menu. T.y. Tokių menu punktų kaip:

Copy
Paste
View Source

ir t.t.

function Menu(id,e) {
Sukuriama funkcija į kurią perduodamas nurodytas ID ir e.
ID - jį galėsite panaudoti jei norėsite priskirti norimą meniu punktą nurodytam <DIV> ID su nustatytu Menu punktu.
E – Javascript pamokos, funkcijos, operatoriai, karkasai įvykis. Jis perduoda naršyklėje atliktą kažkokį įvykį.

if (id == 'catalog') {
Patikriname koks perduotas ID. Kaip minėjau kiekvienam ID galėsite sukurti atskirus Menu punktus.

var d = $(id);
Nustatomas perduotas ID.

d.onmousedown = function (e) {
Perduoto ID tikrinimas. T.y. Jei pelės mygtukas tikrai paspaustas perduoto ID, tuomet sukuriama funkcija kuri ir sukurs mūsų menu punktą.

if (!e){ e = window.event; }
Jei nepavyko perduoti Javascript pamokos, funkcijos, operatoriai, karkasai įvykio tuomet gauname jį iš naujo. Taigi, jei įvyko OnMouseDown jūs window.event gausite tikrai.

if (e.which == 3) {
Kuris mygtukas yra paspaustas. Primenu kad IE6+ pelės dešinysis mygtukas turi kitą skaičių. Šis skaičius priklauso FireFox naršyklei.

document.getElementById('dlgMenuInfo').style.top = e.clientY - 10 + 'px'; document.getElementById('dlgMenuInfo').style.left = e.clientX - 10 + 'px'; document.getElementById('dlgMenuInfo').style.display = 'block';
Nurodyto <DIV> ID nustatome naujus parametrus. Pirmiausia nustatome menu punkto atsiradimo vietą. Mūsų atveju jis atsiras beveik toje pačioje vietoje kaip ir pelė, bet bus truputi pasisilinkęs per 10px į viršų ir per 10 px į kairią pusę. Trečioje eilutėje mes “įjungiame” meniu punktą. Kitaip sakant nustatome kad būtų rodomas Meniu stilius.

if (e.which == 1) {
Kaip minėjau ankščiau šis scriptas bandytas su FireFox ir skirtas tik šiai naršyklei. Skaičius 1 parodo kad paspaustas kairysis pelės mygtukas.

document.getElementById('dlgMenuInfo').style.display = 'none';
Jeigu tikrai paspaustas kairysis pelės mygtukas, tenka “uždaryti” Meniu punktą taip jam nustatydami vėl nerodomą sitlių.

Priedai

Kaip matėte nustatant nurodytą ID buvo panaudota
var d = $(id);
Atsiminkite kad tokių dalykų kaip $ Javascript pamokos, funkcijos, operatoriai, karkasai neturi kintamiesiems nustatyti, tad tikėkit netikėkit bet čia funkcija. Žemiau pateikiu šios funkcijos pilną išeities kodą. Kaip ši funkcija veikia ir ką ji daro manau bus galima aprašyti kitame straipsnyje su Netradiciniai JavaScript išmanymais.

function $(id){
	if(document.all){
		return document.all[id];
	}
	else{
		if(document.getElementById){
			return document.getElementById(id);
		}
		else{
			for(var ilgis=1;le<document.layers.length;ilgis++){
				if(document.layers[ilgis].id==id){
					return document.layers[ilgis];
				}
			}
		}
	}
	return false;
}

Pabaigai

Manau dabar supratote kaip lengva ir koks naudingas dalykas yra Menu su Pelės mygtukų pagalba. Truputį pastudijavus, perdarius pateiktą scriptą galima lengvai ištobulinti jį iki viso puslapio su vienu pelės mygtuko paspaudimu.

Sėkmės bandymuose.

Indeksas