آموزش ساخت دکمه شب و روز در سایت

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

1. بخش ظاهری
2. بخش عملکردی

طراحی ظاهر دکمه شب و روز در سایت

شاید اغراق نکرده باشیم که بگوییم ظاهر هر چیز در وب تاثیر زیادی روی میزان استفاده ی کاربر از آن دارد، لذا در این مورد با وسواس خاصی باید عمل نمود. قبل از هرچیزی به سراغ کد HTML این کلید می رویم و کد زیر را درون آن قرار می دهیم :

<div class="ondisplay">
  
  <section title=".Tutsxen">
    <!-- .slideThree -->
    <div class="slideThree">  
      <input type="checkbox" value="None" id="slideThree" name="check" checked onclick="myFunction()"/>
      <label for="slideThree"></label>
    </div>
    <!-- end .slideThree -->
  </section>
  
</div>

برای شخصی سازی می توانید اتریبیوت title در تگ section را تغییر یا حذف کنید.

حال نوبت استایل های دکمه می باشد :

/* $activeColor: #c0392b; //red */
$activeColor: #27ae60; //green
$darkenColor: darken($activeColor, 20%);
/* $background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/13460/dark_wall.png'); */
$background: #3498db;


/* .slideThree */
.slideThree {
  width: 80px;
  height: 26px;
  background: #333;
  margin: 20px auto;
  position: relative;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
  &:after {
    content: 'OFF';
    color: #000;
    position: absolute;
    right: 10px;
    z-index: 0;
    font: 12px/26px Arial, sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 0px rgba(255,255,255,.15);
  }
  &:before {
    content: 'ON';
    color: $activeColor;
    position: absolute;
    left: 10px;
    z-index: 0;
    font: 12px/26px Arial, sans-serif;
    font-weight: bold;
  }
  label {
    display: block;
    width: 34px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 1;
    background: #fcfff4;
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    border-radius: 50px;
    transition: all 0.4s ease;
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label {
      left: 43px;
    }
  }    
}
/* end .slideThree */

// ** Page Styling - Nothing to do with the Radio Buttons **
*{box-sizing: border-box;}
body {
  background: $background;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  h1, h2, em {
    color: #eee;
    font-size: 30px;
    text-align: center;
    margin: 20px 0 0 0;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0px 1px #000;
  }
  em{
    font-size: 14px;
    text-align: center;
    display: block;
    margin-bottom: 50px;
  }
  .ondisplay{
    text-align:center;
    padding:20px 0;
    section{
      width:100px;
      height:100px;
      background: #555;
      display:inline-block;
      position: relative;
      text-align: center;
      margin-top:5px;
      border: 1px solid gray;
      border-radius: 5px;
      box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.3), 
        0 0 40px rgba(0, 0, 0, 0.1) inset;
      &:after{
/*         visibility: hidden; */
        content:attr(title);
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 3px;
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        -webkit-font-smoothing: antialiased;
        text-shadow: 0px 1px #000; 
      }
    }
  }
}

توجه کنید کد های فوق بصورت SCSS و مرورگر نمی تواند مستقیما این کد ها را اجرا کند، لذا اگر می خواهید این کد ها را مستقیما استفاده کنید باید یا بصورت دستی یا با ابزار های مخصوص اینکار کد های SCSS را به CSS تبدیل کنید.
ضمن اینکه اگر می خواهید از کد های بالا بعنوان دکمه ی شب و روز استفاده کنید توصیه می شود بجای کلمه on از کلمه Day یا روز و بجای کلمه ی off از کلمه dark یا شب استفاده کنید.

بخش عملکرد

راه های زیادی برای اعمال تغییرات وجود دارد اما ساده ترین راه ممکن اعمال تغییرات با کد JavaScript یا J Query است. در این آموزش از روش JavaScript استفاده می کنیم .

کد زیر را در بخش اسکریپت ها (یا فایل مجزا یا بین تگ script) کپی می کنیم :

function myFunction() {
 var checkBox = document.getElementById("slideThree");

// If the checkbox is checked, display the output text 
 if (checkBox.checked == true){ 
  var element = document.body;
  element.classList.add("light-mode");
  element.classList.remove("dark-mode");
 }
 else { 
  var element = document.body;
  element.classList.add("dark-mode");
  element.classList.remove("dark-mode");
 }
}

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

.light-mode{
 background:#fff;
 color:#000;
}
.dark-mode{
 background:#000;
 color:#fff;
}

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