آموزش ساخت دکمه تغییر رنگ پس زمینه بصورت لایو !

1417

0

دکمه تغییر رنگ پس زمینه سایت

این پست بخشی از مسیر متخصص CSS است. اگر به این مسیر علاقه مندید اینجا کلیک کنید.

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

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

نحوه ی ساخت دکمه تغییر رنگ بصورت لایو :

مطابق تمام آموزش ها در این آموزش هم کد های خود را به سه قسمت تقسیم می کنیم:

  1. ایجاد یک سند html به نام دلخواه.
  2. برای انجام این پروژه به دو کتابخانه ی جی کوئری و مدرنایزر نیاز داریم. پس آنها را دانلود و یا از طریق cdn به پروژه اضافه کنید. ( مانند شکل زیر)
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

     

  3. قرار دادن کد های زیر در فایل مربوط به html جهت ایجاد المان ها
    در واقع ما سعی داریم 5 دکمه ایجاد کنیم که چهار دکمه ی اول رنگ های سفید، نوک مدادی، مرجانی و آبی باشند و دکمه ی آخر رنگ دلخواه کاربر؛ لذا کد زیر را می نویسیم :

    <body>
        <h1>Tutsxen Color Changer</h1>
    <div id="bg-selector">یکی از رنگ های زیر را انتخاب کنید: 
        <div class="color white" data-value="#fff"></div>
        <div class="color marjani" data-value="#ff5858"></div>
        <div class="color nokmedadi" data-value="#212121"></div>
        <div class="color blue" data-value="#00529c"></div>
      	<p>
      		و یا روی کادر زیر کلیک کنید
      	</p>
      	<div class="color picker"><input id="colorpicker" type="color"></div>
    </div>
    </body>

    4. حال به سراغ استایل دهی می رویم تا ظاهر مناسبی برای دکمه های خود بسازیم: (کد های زیر را در بخش کد های css یا بین تگ style قرار دهید)

    body { 
        direction: rtl;
        margin: 2em;
      	color: #181818;
    }
    
    p {
      margin: 0.5em 0;
    }
    
    form {
      margin: 0;
    }
    /* end base styles */
    
    #bg-selector {
        font-size: 1em;
        font-weight: bold;
    }
    .color {
        width: 42px;
        height: 30px;
        border: 1px solid #555;
        margin: 0 0 0.5em 0.2em;
        cursor: pointer;
    }
    .marjani{
        background-color: #ff5858;
    }
    .nokmedadi {
        background-color: #212121;
    }
    .gray{
        background-color: #eaeaea;
    }
    .white {
        background-color: #fff;
    }
    .blue {
        background-color: #00529c;
    }
    #colorpicker { 
        width: 42px;
        height: 30px;
        border: 0px solid #555;
        margin: 0 0 1em 0.2em;
        cursor: pointer;
      	padding: 0px;
    
     }

    دقت کنید ویژگی background-color هر دکمه با مقدار data-value آن تناسب داشته باشد چرا که کاربران ممکن است گمراه شوند. شما می توانید به منظور زیبایی بیشتر این کد ها را تغییر داده و شخصی سازی نمایید.

    5. مرحله ی آخر: کد های جاوا اسکریپت (جی کوئری و مدرنایزر) : بدیهی است این کد ها باید در بین تگ <script> قرار داده شوند.

    $( document ).ready(function() {
    
            $(function() {
            //bg color selector
          $(".color").click(function(){
                var color = $(this).attr("data-value");
            $("body").css("background-color", color);
            });
          
          //add color picker if supported
          if (Modernizr.inputtypes.color) {
            $(".picker").css("display", 'inline-block');
            var c = document.getElementById('colorpicker');
            c.addEventListener('change', function(e) {
              //d.innerHTML = c.value;
              var color = c.value;
              $("body").css("background-color", color);
                }, false);
          }
        });
    
      });

     

    این کد از یک تابع و یک دستور شرطی if تشکیل شده است. بخش اول به منظور اعمال تغییرات دکمه های رنگی ( چهار دکمه ی اول) و بخش دوم ( یعینی بخش دستور شرطی if ) برای رنگ دلخواه کاربر می باشد.

تصویر نهایی پروژه طراحی دکمه تغییر رنگ پس زمینه سایت بصورت لایو شکلی همانند شکل زیر خواهد بود :

خب به پایان آموزش “ساخت دکمه تغییر رنگ پس زمینه بصورت لایو” رسیدیم. چنانچه ابهام یا اشکالی داشتید، می توانید در بخش کامنت ها مطرح نمایید.

مهندس محسن حسن پور

برنامه نویس | طراح سایت | متخصص سئو

2سال در کنار تاتژن

guest
0 Comments
Inline Feedbacks
View all comments