مهدی عادلی فر
بنیانگذار توسینسو و برنامه نویس

آموزش ساخت منوی سفارشی راست کلیک با بوت استرپ (Bootstrap)

چگونه با بوت استرپ منوی سفارشی راست کلیک بسازیم؟ منویی که در هنگام کلیک راست کردن روی یک آیتم یا یک قسمت از صفحه نمایش داده می شود می تواند بسیار کاربردی باشد. در این مطلب می خواهیم ببینیم که در بعضی سایت ها که کلیک راست به شکل دیگری است و منوی دیگری نمایش می دهند به چه شکلی است. ما در این مطلب از Bootstrap, Jquery استفاده می کنیم. پس قبل از این که شروع به نوشتن کد بکنیم باید این پکیج ها را دانلود کرده و به پروژه وب اضافه کنیم. کسانی که با ویژوال استودیو کار می کنند می توانند از nuget استفاده کنند و بقیه نیز می توانند از سایت خود این پکیج ها فایل ها را دانلود کرده و آن را داخل برنامه قرار دهند.

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران

شروع نوشتن برنامه

بعد از این که پکیج های Jquery, Bootrap را دانلود کردیم آن را به شکل زیر به فایل html که در حال کار بر روی آن هستیم اضافه می کنیم.

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</head>
<body>

</body>
</html>

حال باید یک div بسازیم که کنترل ما باشد و وقتی روی آن کلیک راست کردیم منوی کلیک راست سفارشی ما ظاهر شود برای این کار از کد زیر استفاده می کنیم

<div class="col-md-5 bg-success" id="rightClickDiv" style="height: 100px" >
    در این قسمت کلیک راست کنید.
</div>

همانطور که می بینید یک تگ div ساخته ایم که id آن rightClickDiv می باشد.حال باید کاری کنیم که کلیک راست پیش فرض مرورگر از کار بیفتد. برای این کار یک تگ script می سازیم و کد زیر را داخل آن قرار می دهیم.

<script>
    $(document)
        .ready(function() {
            $("#rightClickDiv")
                .bind('contextmenu',
                    function(e) {
                        e.preventDefault();
                    });
        });
</script>

حال اگر صفحه خود را در مرورگر باز کنید و در قسمت مورد نظر کلیک راست کنید هیچ عملی انجام نمی شود و منوی معمولی مرورگر نشان داده نمی شود.

طراحی منوی سفارشی

برای منویی که می خواهیم هنگام کلیک راست نشان داده شود کد زیر را داخل تگ body و کنار div قبلی در صفحه می نویسیم

<div id="popup" style="display: none" class="panel panel-primary">
    <div class="panel-heading">
        منوی کلیک راست
    </div>
    <div class="panel-body">
        <div class="form-group">
            <label class="control-label col-md-2">رنگ</label>
            <input type="color" class="form-control" id="colorId"/>
        </div>
    </div>
    <div class="panel-footer">
        <input type="button" class="btn btn-danger" value="بستن"/>
    </div>
</div>

این کد یک پنل تولید می کند ولی چون می خواهیم هنگامی که کلیک راست کردیم نمایش داده شود display آن را none قرار داده ایم. برای این که وقتی که کلیک راست کردیم پنل بالا نمایش داده شود کد اسکریپتی که نوشتیم را به شکل زیر تغییر می دهیم.

<script>
    $(document)
        .ready(function() {
            $("#rightClickDiv")
                .bind('contextmenu',
                    function(e) {
                        e.preventDefault();
                        $('#popup').css({ position: "absolute", top: e.pageY, left: e.pageX, display: "block" });
                    });
        });
</script>

این خط کد که اضافه کرده ایم باعث می شود که هنگام کلیک راست کردن پنل ما در محلی که موس قرار دارد نمایش داده شود. اگر صفحه را در داخل مرورگر خود باز کنیم می بینید که وقتی کلیک راست می کنید چه اتفاقی می افتد ولی پنلی که ظاهر می شود بسته نمی شود و اگر در جای دیگری دوباره کلیک راست شود دوباره همان جا نمایش داده می شود. برای حل مشکل بسته شدن باید داخل دکمه بستن کدی بنویسیم که پنل را ببندد. برای این کار کد input مربوط به دکمه بستن را به شکل زیر تغییر می دهیم.

<input type="button" class="btn btn-danger" onclick="$('#popup').css({display:'none'})" value="بستن"/>

حال اگر صفحه را در مرورگر باز کنیم میبینیم که پنل چگونه ظاهر می شود و با کلیک بر روی دکمه بسته می شود. و شکل زیر ظاهر خواهد شد

وب سایت توسینسو

مهدی عادلی فر
مهدی عادلی فر

بنیانگذار توسینسو و برنامه نویس

مهدی عادلی، بنیان گذار TOSINSO. کارشناس ارشد نرم افزار کامپیوتر از دانشگاه صنعتی امیرکبیر و #C و جاوا و اندروید کار می کنم. در زمینه های موبایل و وب و ویندوز فعالیت دارم و به طراحی نرم افزار و اصول مهندسی نرم افزار علاقه مندم.

نظرات