منبع مقالات تخصصی طراحی سایت اختصاصی

در صورتی از الگوی قفل تلفن همراه های هوشمند خوشتان می‌آید . می‌توانید همی سرمشق را برای تارنما خویش داشته باشید طراحی سایت اختصاصی برای مثال یوزرها بتوانند برای ورود از این سرمشق بجای راز عبود استعمال نمایند فراموش نکنید . که هیچ اپلیکیشن key logier نمی تواند این قفل را تشخیص یا این که بدزدد . پس علاوه بر زیبایی امنیت هم دارااست.
ساخت‌و‌ساز قفل الگویی مشابه آنچه در تلفن همراه های اندروید می‌بینید به امداد Jquery

قفل الگویی سیرتکامل ای جدیدی از قفل های امنیتی میباشد که مخاطب بایستی الگوی خاصی را بکشد تا برای مفتوح کردن چیزی اذن ی دسترسی داشته باشد. این سیرتکامل قفل ها در گو شی های اندرویدی بسیار رایج می‌باشند. ما اینجا قصد داریم از قفل الگویی در تارنما استعمال کنیم و از jquery و html و css امداد خوا هیم گرفت شما برای انجام این یادگرفتن بایستی افزونه PatternLock را دانلود نمائید.
نشانی پیوند دانلود https://github.com/s-yadav/patternLock

برای داشتن قفل الگویی اندرویدی روی وبگاه خویش صرفا به انجام سه قدم ذیل نیاز دارید:
1. یک پوشه html بسازید و کد های اینترنت مایحتاج برای ساخت‌و‌ساز قفل الگویی را اضافه نمائید.
2. یک فایلjs بسازید و اسکریپت های مایحتاج برای ساخت قفل الگویی را اضافه نمائید.
3. یک پوشه css بسازید و استایل های موردنیاز را اضافه فرمایید.
قدم 1. تولید یک پوشه html
ما این پوشه را به اسم pattern_lock.html ساخت و ساز و ذخیره کرده ایم.

Set Pattern Lock

"Save

Check Pattern Lock

""

در‌این قدم ما اولیه مجموع فولدر های لازم برای ساختن قفل الگویی را درج کرده ایم . آن گاه دو تگ ِ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;
}

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

در صورتی از الگوی قفل تلفن همراه های هوشمند خوشتان می‌آید . می‌توانید همی سرمشق را برای تارنما خویش داشته باشید طراحی سایت اختصاصی برای مثال یوزرها بتوانند برای ورود از این سرمشق بجای راز عبود استعمال نمایند فراموش نکنید . که هیچ اپلیکیشن key logier نمی تواند این قفل را تشخیص یا این که بدزدد . پس علاوه بر زیبایی امنیت هم دارااست.
ساخت‌و‌ساز قفل الگویی مشابه آنچه در تلفن همراه های اندروید می‌بینید به امداد Jquery

قفل الگویی سیرتکامل ای جدیدی از قفل های امنیتی میباشد که مخاطب بایستی الگوی خاصی را بکشد تا برای مفتوح کردن چیزی اذن ی دسترسی داشته باشد. این سیرتکامل قفل ها در گو شی های اندرویدی بسیار رایج می‌باشند. ما اینجا قصد داریم از قفل الگویی در تارنما استعمال کنیم و از jquery و html و css امداد خوا هیم گرفت شما برای انجام این یادگرفتن بایستی افزونه PatternLock را دانلود نمائید.
نشانی پیوند دانلود https://github.com/s-yadav/patternLock

برای داشتن قفل الگویی اندرویدی روی وبگاه خویش صرفا به انجام سه قدم ذیل نیاز دارید:
1. یک پوشه html بسازید و کد های اینترنت مایحتاج برای ساخت‌و‌ساز قفل الگویی را اضافه نمائید.
2. یک فایلjs بسازید و اسکریپت های مایحتاج برای ساخت قفل الگویی را اضافه نمائید.
3. یک پوشه css بسازید و استایل های موردنیاز را اضافه فرمایید.
قدم 1. تولید یک پوشه html
ما این پوشه را به اسم pattern_lock.html ساخت و ساز و ذخیره کرده ایم.

Set Pattern Lock

"Save

Check Pattern Lock

""

در‌این قدم ما اولیه مجموع فولدر های لازم برای ساختن قفل الگویی را درج کرده ایم . آن گاه دو تگ ِ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;
}

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