آموزش طراحی checkbox با استایل سوییچ های IOS7
در این آموزش با استفاده کامپوننت جاوا اسکریپت switchery سوییچ های بسیار زیبایی با قالب IOS7 برای check box ها را آماده کرده ایم. در این آموزش نحوه استفاده از این پلاگین جهت ایجاد دکمه هایی با انیمیشن زیبا را به شما نمایش خواهیم داد.
ابتدا باید CDN های زیر را به پروژه خود اضافه کنید
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js" type="text/javascript"></script>حالا یک چک باکس با کلاس "js-switch" تعریف می کنیم.
<input type="checkbox" class="js-switch" checked />خب حالا نوبت به اضافه کردن جاوا اسکریپت می رسد
<script type="text/javascript">
var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);
</script>در ادامه می توانید کد کامل این مثال را مشاهده نمایید.
<!DOCTYPE html>
<html>
<head>
<title>چسبون- آموزشگاه آنلاین برنامه نویسی</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js" type="text/javascript"></script>
</head>
<body>
<h1>برنامه نویسی را با چسبون یاد بگیرید</h1>
<hr>
<p>لطفا روی گزینه زیر کلیک نمایید</p>
<span>وضعیت</span><input type="checkbox" class="js-switch" checked />
<script type="text/javascript">
var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);
</script>
</body>
</html>امیدوارم این آموزش مورد توجه شما قرار گرفته باشد.
