Carli – ilraC

jQuery menu – desni miškin klik

No lahko rečem, da teh pluginov pa takih in drugačnih menijev obstaja na miljone in od tu vprašanje, zakaj ne bi naredu še enega, pa le tega objavil tukaj. No kot vedno je največ težav pri kompatibilnosti med brskalniki, ampak no ta meni začuda deluje v FireFox3, IE7, IE6 in chrome. No v teh brskalnikih sem sam testiral meni. Če ima kdo naloženo opero, lahko testira in pove, kako se stvar obnese.

No problem desnega klika je, da se po kliku na desni miškin gumb, ponavadi odpre contextmenu, ki ga tokrat pač ne želimo. Torej je postopek tak, da ob kliku na stran (klik delimo na dva dela, prvi del je pritisk na gumb, drugi del pa ko gumb izpustimo), se pravi prvi del, prikažemo meni, ob postopku drugega dela pa onemogočimo odpiranje contextmenuja. No sam postopek odpiranja je povsem enostaven in ima pomanjkljivost, ko pridemo do roba brskalnika in ni neke omejitve, glede pozicije menija, ampak tudi to ne bi smel biti večji problem. Meni se odpre glede na koordinate miške, ki jih pridobimo s pomočjo jQuerya, ker je le ta že kompatibilen z brskalniki. Glede na dobljene koordinate, nastavimo css pozicijo menija, torej odmik od zgoraj in odmik iz leve strani (top: XXpx left: XXpx). Trenutno se meni odpre od zgoraj, kar izvedemo s slide efektom in nastavimo timeout za zapiranje menija po določenem času, trenutno je nastavljeno 5s. Tukaj velja omeniti še kakšno loop zanko, ki bi poskrbela za to, da se meni ne bi zaprl, če bi bili z miško nekje na menuju. No po kliku se menu zapre oz. se zapre po preteku prej omenjenega časa.

Evo še koda:

<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$(this).mousedown(function(e) {
var $button = e.button;
if($button == '2') {
$xcord = e.clientX;
$ycord = e.clientY;
$(".rclickmenu").css("top", $ycord);
$(".rclickmenu").css("left", $xcord);
$(".rclickmenu").slideDown(function() {
var $timerhide = setTimeout("$('.rclickmenu').slideUp()", 5000);
$(this).click(function() {
$(this).hide();
clearTimeout($timerhide);
});
});
}
});
$(this).mouseup(function(e) {
if (e.button == 2) {
document.oncontextmenu = function(){return false}
}
});
});
</script>

Verjetno koga bode nastavitev pozicije s css(), ki je deljena na vsako posebaj, to pa je zato, ker ima IE včasih probleme pri nastavljanju takih vrednosti, ki so nanizane kar v arrayu (css({”top”: “XXpx”, “left”:”XXpx”})). CSS samega menija je lahko poljuben le v tem primeru mora class rclickmenu imeti absolutno pozicijo in z index dovolj velik, da se prikazuje nad drugimi elementi.

Primer desnega klika si lahko ogledate tukaj: http://blog.ilrac.net/testi/klik/

Tagi: Chrome, desni klik, FireFox, JavaScript, jQuery, menu

3 x komentiran jQuery menu – desni miškin klik

Komentiraj ...