گروه مقاله : جاوا اسكريپت Java Script
تاريخ انتشار : 1395/07/28 - 10:19
كد :7235
اگر از الگوی قفل گوشی های هوشمند خوشتان می آید . می توانید همی الگو را برای سایت خود داشته باشید مثلا کاربران بتوانند برای ورود از این الگو بجای رمز عبود استفاده کنند فراموش نکنید . که هیچ نرم افزار key logier نمی تواند این قفل را تشخیص یا بدزدد . پس علاوه بر زیبایی امنیت هم دارد.
ایجاد قفل الگویی شبیه آنچه در گوشی های اندروید می بینید به کمک Jquery
قفل الگویی گونه ای جدیدی از قفل های امنیتی است که کاربر باید الگوی خاصی را بکشد تا برای باز کردن چیزی اجازه ی دسترسی داشته باشد. این گونه قفل ها در گو شی های اندرویدی بسیار رایج هستند. ما اینجا قصد داریم از قفل الگویی در وبسایت استفاده کنیم و از jquery و html و css کمک خواهیم گرفت شما برای انجام این آموزش باید پلاگین PatternLock را دانلود کنید.
آدرس لینک دانلود https://github.com/s-yadav/patternLock
برای داشتن قفل الگویی اندرویدی روی وبگاه خود تنها به انجام سه گام زیر نیاز دارید:
1. یک فایل html بسازید و کد های وب مورد نیاز برای ایجاد قفل الگویی را اضافه کنید.
2. یک فایلjs بسازید و اسکریپت های مورد نیاز برای ایجاد قفل الگویی را اضافه کنید.
3. یک فایل css بسازید و استایل های لازم را اضافه کنید.
گام 1. ایجاد یک فایل html
ما این فایل را به نام pattern_lock.html ایجاد و ذخیره کرده ایم.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="patternlock/patternLock.js"></script>
<link href="patternlock/patternLock.css" rel="stylesheet" type="text/css" />
<link href="lock.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="lock.js"></script>
</head>
<body>
<div id="wrapper">
<div id="pattern1_container" class="pattern_container">
<p>Set Pattern Lock</p>
<div id="pattern1">
</div>
<input type="button" value="Save Pattern Lock" onclick="hide_show_pattern();">
</div>
<div id="pattern2_container" class="pattern_container">
<p>Check Pattern Lock</p>
<div id="pattern2">
</div>
</div>
<input type="hidden" value="" id="pattern_val">
</div>
</body>
</html>
در این گام ما اول تمام فایل های مورد نیاز برای ساختن قفل الگویی را درج کرده ایم . سپس دو تگ ِdiv برای نگهداری از تو قفل الگویی ایجاد کرده ایم . یکی برای ذخیره الگوی قفل و دیگری برای کنترل الگوی قفل همچنین ما از تگ های hidden برای نگهداری مقدار اولین الگوی قفل استفاده می کنیم این مقدار برای کنترل درستی و یا نادرستی الگوی وارد شده به کار می رود.
گام 2 . ایجاد یک فایل جاوا اسکریپت
ما این فایل را به نام lock.js با کد های زیر ایجاد و ذخیره کرده ایم.
document.addEventListener("DOMContentLoaded", function() { display_pattern();});
function display_pattern()
{
var lock= new PatternLock('#pattern1',{
onDraw:function(pattern){
document.getElementById("pattern_val").value=lock.getPattern();
display_pattern2();
}
});
}
function hide_show_pattern()
{
if(document.getElementById("pattern_val").value!="")
{
document.getElementById("pattern1_container").style.display="none";
document.getElementById("pattern2_container").style.display="block";
}
else
{
alert("Please Set Pattern Lock");
}
}
function display_pattern2()
{
var pattern_value=document.getElementById("pattern_val").value;
var lock= new PatternLock('#pattern2',{
onDraw:function(pattern)
{
lock.checkForPattern(pattern_value,function()
{
alert("Pattern Lock is Right");
},
function()
{
alert("Pattern Lock Is Wrong");
});
}
});
}
در این گام ما از تابع ()addEventListener برای فراخوانی تابع ()display_pattern برای نمایش قفل الگویی بعد از لود شدن صفحه استفاده کرده ایم. تابع ()display_pattern ما قفل الگویی را در div 'pattern1' ساخته ایم و تابع callback آن را روی onDraw تنظیم کرده ایم تا بتوانیم مقدار قفل الگویی را در فیلد مخفی خود ذخیره و بعدا هنگام فراخوانی تابع display_pattern2 استفاده کنیم.
در تابع ()hide_show_pattern ما به سادگی مقدار فیلد مخفی را چک می کنید اگر مقداری وجود داشت پس کاربر الگوی خود را ذخیره کرده است و به سراغ پردازش الگویی بعدی می رویم تا صحت آن را بررسی کنیم.
در تابع ()display_pattern2 ما ابتدا مقدار الگو را که در فیلد مخفی ذخیره شده است می گیریم و یک الگوی قفل دیگر در تگ div با عنوان 'pattern2' برای چک کردن ایجاد می کنیم و سپس از تابع
()checkForPattern برای کنترل مقدار الگو استفاده می کنیم اگز مقدار یکی بود یعنی الگو صحیح است و در غیر اینصورت الگو اشتباه است.
گام 3 : ایجاد یک css
ما یک فایل css ایجاد و با نام lock.css ذخیره کرده ایم .
body
{
text-align:center;
width:100%;
margin:0 auto;
padding:0px;
font-family:helvetica;
background-color:#A9BCF5;
}
#wrapper
{
text-align:center;
margin:0 auto;
padding:0px;
width:995px;
}
.pattern_container
{
margin-top:20px;
}
.pattern_container p
{
margin:0px;
color:#0B2161;
font-size:25px;
font-weight:bold;
}
#pattern1,#pattern2
{
margin-left:340px;
}
#pattern1_container input[type="button"]
{
background:none;
border:none;
margin-top:10px;
border:1px solid #0B2161;
color:#0B2161;
width:310px;
margin-left:-5px;
height:45px;
font-size:17px;
}
#pattern2_container
{
display:none;
}
پایان در اینجا کار به پایان رسیده است مثل همیشه اگر دنبال نتایج متفاوت تر هستید دست به کار ایجاد تغییرات دلخواه خود شود.