کد شخصی سازی لینک های کلیک راست درون صفحه با استفاده از جی کوئری

این کد بسیار بسیار جالب به جای منویی که با استفاده از دکمه کلیک راست ایجاد می شود منویی که لینک ها و متون آن کاملا شخصی است می آید.

این کد با استفاده از jQuery ساخته شده و با css به شکل منوی واقعی در آمده و با html شخصی سازی می شود.

برای دیدن دمو اینجا کلیک کرده و در صفحه باز شده کلیک راست کنید.

این کد را در قسمت head صفحه خود بگذارید ( اگر در صفحه شما فایل jQuery وجود دارد خط اول را حذف کنید.)

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <style> /* menu right click */ #menu { display: none; position: absolute; z-index:999999999999999999999; padding: 5px; background-color: #f0f0f0; border: 1px solid #979797; font:11px tahoma; direction:rtl; width:150px; box-shadow:2px 2px 2px #979797; -moz-box-shadow:2px 2px 2px #979797; -ms-box-shadow:2px 2px 2px #979797; -webkit-box-shadow:2px 2px 2px #979797; -khtml-box-shadow:2px 2px 2px #979797; -o-box-shadow:2px 2px 2px #979797; } #menu a{ color:#000; font:11px tahoma; text-decoration:none; display:block; border:1px transparent solid; border-radius:3px; -moz-border-radius:3px; -ms-border-radius:3px; -webkit-border-radius:3px; -o-border-radius:3px; -khtml-border-radius:3px; padding:3px; } #menu a:hover{ border:1px #AECFF7 solid; background: -moz-linear-gradient( top center, #F2F4F6, #EEF3F9); background: -webkit-linear-gradient( top center, #F2F4F6, #EEF3F9); background: -o-linear-gradient( top center, #F2F4F6, #EEF3F9); background: -khtml-linear-gradient( top center, #F2F4F6, #EEF3F9); background: -ms-linear-gradient( top center, #F2F4F6, #EEF3F9); background: linear-gradient( top center, #F2F4F6, #EEF3F9); text-shadow:none; -moz-text-shadow:none; -ms-text-shadow:none; -webkit-text-shadow:none; -khtml-text-shadow:none; } #menu hr{ border-top:1px #ddd solid; border-bottom:1px #fff solid; border-left:none; border-right:none; margin:3px 0 3px 0; padding:0; } </style> <script> // menu right click $(document).bind("contextmenu", function(e) { return false; }); $("#myid").bind("contextmenu", function(e) { return false; }); $(document).bind("contextmenu", function(e) { $('#menu').css({ top: e.pageY+'px', left: e.pageX+'px' }).fadeIn(); return false; }); $(document).ready(function() { $(document).click(function() { $('#menu').hide(); }); }); </script>

این کد را در قسمت body صفحه خود بگذارید:

<div style="position:absolute;top:-200%;"><a href="http://moisrex.rozblog.com/" title="کدستان">کد شخصی سازی راست کلیک</a></div><div id="menu"> <a href="/">صفحه اصلی</a> <a href="/Forum">تالار گفتمان</a> <a href="/Register">ثبت نام</a> <a href="/Login">ورود به سایت</a> <hr> <a href="/Sitemap.xml">نقشه سایت</a> <a href="/Archive">آرشیو مطالب</a> <a href="/rss.xml">خوراک RSS</a> <hr> <a href="/Contact">تماس با ما</a> </div>