در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

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

سلام به دوستان ITPRO. منویی که در هنگام کلیک راست کردن روی یک آیتم یا یک قسمت از صفحه نمایش داده می شود می تواند بسیار کاربردی باشد. در این مطلب می خواهیم ببینیم که در بعضی سایت ها که کلیک راست به شکل دیگری است و منوی دیگری نمایش می دهند به چه شکلی است. ما در این مطلب از 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="بستن"/>

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

وب سایت توسینسو
2 نظر
rasooul

سلام چجوری می تونم با بوت استرپ طرحی مثل این سایت در بیارم

دیجی وردپرس

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

ممنون میشم راهنمایی کنید . اگر با بوت استرپ نمونه هست لینک بدید

مهدی عادلی فر

سلام این کار رو باید با استفاده از JQuery انجام بدید با بوت استرپ تنها و بدون کد جاوا اسکریپت سخته.

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....