درخواست های ارتباط
جستجو
    لیست دوستان من
    صندوق پیام
    همه را دیدم
    • در حال دریافت لیست پیام ها
    صندوق پیام
    رویدادها
    همه را دیدم
    • در حال دریافت لیست رویدادها
    همه رویدادهای من
    تخفیف های وب سایت
    همه تخفیف ها

    عضویت در

    کانال تلگرام

    توسینسو

    اطلاعات مطلب
      مدرس/نویسنده
      مهدی عادلی فر
      امتیاز: 144149
      رتبه:6
      117
      196
      285
      1466
      مهدی عادلی، بنیان گذار TOSINSO. کارشناس ارشد نرم افزار کامپیوتر از دانشگاه صنعتی امیرکبیر و #C و جاوا و اندروید کار می کنم. در زمینه های موبایل و وب و ویندوز فعالیت دارم و به طراحی نرم افزار و اصول مهندسی نرم افزار علاقه مندم. پروفایل کاربر

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

      تاریخ 21 ماه قبل
      نظرات 2
      بازدیدها 257
      سلام به دوستان 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="بستن"/>
      
      حال اگر صفحه را در مرورگر باز کنیم میبینیم که پنل چگونه ظاهر می شود و با کلیک بر روی دکمه بسته می شود. و شکل زیر ظاهر خواهد شد

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

      برچسب ها
      مطالب مرتبط

      در حال دریافت اطلاعات

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

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

      برای ارسال نظر ابتدا به سایت وارد شوید