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

68

0

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

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

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

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

  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 ) برای رنگ دلخواه کاربر می باشد.

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

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

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

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

اشتراک
اطلاع از
guest
0 Comments
Inline Feedbacks
View all comments
ارسال تیکت
0
Would love your thoughts, please comment.x
()
x