جهش به فیلد بعدی فرم به محض رسیدن به حداکثر ظرفیت
زمانی در فرم لازم است که پس از درج فیلد و رسیدن فیلد به حداکثر ظرفیت (maxlength) تعریف شده آن نشانه گر به صورت اتوماتیک به فیلد بعدی انتقال یابد تا کاربر بتواند به راحتی فرم را تکمیل نماید. به عنوان مثال فرمی را در نظر بگیرید که در آن فیلدهایی برای گرفتن شماره تلفن و موبایل موجود است و به صورتی تعبیه گردیده که در آن کاربر در هر فیلد یک شماره را وارد می نماید. بهتر است برای کاربر پسند بودن فرم به گونه ای طراحی گردد که پس از درج یک شماره از یک فیلد نشانه گر به صورت اتوماتیک به شماره بعدی انتقال پیدا نماید تا لازم نباشد کاربر به صورت دستی این کار را انجام دهد. در این مقاله به شما نحوه جهش به فیلد فرم بعدی به محض رسیدن به حداکثر ظرفیت را با استفاده از JQuery آموزش خواهم داد.
در ابتدا می بایست کتابخانه Jquery را به لیست کتابخانه های صفحه وب سایت خود اضافه نمایید البته در صورتی که قبلا این کار را انجام نداده اید. می توانید این کتابخانه را از آدرس https://jquery.com دانلود نمایید:
سپس می بایست پلاگین مخصوص این را را در آدرس Jquery auto tab دانلود نموده و این پلاگین را نیز به کتابخانه های جاوا اسکریپت صفحه وب سایت خود اضافه نمایید.
سپس کافی است از کد زیر برای جهش از یک فیلد به فیلد بعدی استفاده نمایید:
$(document).ready(function() {
$('#first').autotab({ target: '#second', format: 'numeric' });
$('#second').autotab({ target: '#third', format: 'numeric', previous: '#first' });
$('#third').autotab({ previous: '#second', format: 'numeric' });
});
</script>
که در مثال بالا می بایست مشخصه فیلد اول را در بخش اول هر سطر و مشخصه فیلدی که قصد دارید جهش به آن انجام گردد را در بخش دوم وارد نمایید. این کد زمانی که هر فیلد به حداکثر ظرفیتی که در هر کدام از فیلدها با تک maxlength مشخص نموده اید می رسد نشانه گر را به صورت اتوماتیک به فیلد بعدی انتقال می دهد.
ساخت اسکرول بینهایت توسط jquery و تابع load
نوشتن فقط فارسی در فیلدهای فرم
در صورتی که قصد دارید تا کاربر فقط دسترسی برای درج کاراکترهای فارسی را در فیلدها فرم داشته باشد این کار را می توانید توسط jquery انجام دهید. برای انجام این کار کافی است تا کد زیر را در هدر صفحات خود اضافه نمایید.
<script type="text/javascript" src="jkblayout.min.js"></script>
خط اول کتابخانه jquery را به صفحه شما اضافه می نماید و خط دوم کتابخانه مخصوص محدود کردن کاربر برای درج فقط کاراکترهای فارسی در فیلدهای فرم می باشد. فایل jquery را می توانید از این آدرس و فایل دوم را می توانید از بخش ضمیمه مقاله دانلود نمایید. فایل ها می بایست در همان دایرکتوری قرار داده شود که فایل html اصلی قرار دارد در غیر این صورت بخش src کدهای بالا را می بایست مطابق با آدرس قرارگیری فایل ها خود تغییر دهید.
سپس تنها کاری که لازم است انجام دهید آن است که صفت lang=fa به هر کدام از فیلدهای فرم خود که می خواهید قابلیت فقط فارسی نوشتن داشته باشد را اضافه نمایید. به نمونه زیر توجه نمایید.
منبع اصلی مقاله http://hasheminezhad.com/kblayout می باشد.
10 دستور jQuery که طراحان وب می بایست بدانند
jQuery در صفحان وب سایت بسیاری مورد استفاده قرار می گیرد. و یکی از متداول ترین کتابخانه هایی است که در صفحات وب سایت استفاده می شود, که عمکرد آن با آبجکت DOM است.
البته, دلیل اصلی استفاده از jQuery سادگی آن است. و شما می توانید هر کاری توسط این کتابخانه انجام دهید.
چندین دستور و کد از آن وجود دارد که به صورت مرتب مود استفاده طراحان و برنامه نویسان وب قرار می گیرد. در این بخش به شما 10 دستور را که به صورت متداول مورد استفاده قرار می گیرد را می آورم.
1) دکمه بازگشت به بالا
// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});
//Create an anchor tag
<a class=”top” href=”#”>Back to top</a>
به طوری که در بالا مشاهده می نمایید تابع animate و scrollTop در jQuery برای اسکرول به بالا به صورت انیمیشنی نیازی به پلاگین jQuery وجود ندارد.
با تغییر مقدار scrollTop می توانیم اسکرول را به جایی که می خواهیم هدایت نماییم, در برخی از زمان ها این مقدار 0px است ولی می توانید به آن سایر مقدارها را نیز بدهید.
عدد 800ms مدت زمان انجام این کار می باشد کخ به صورت انیمیشن این کار انجام می شود.
2) بررسی آنکه تصاویر لود شده باشند
$(‘img’).load(function() {
console.log(‘image load successful’);
});
برخی از زمان ها احتیاج دارید بدانید که آیا تصاویر لود شده اند و یا خیر تا ادامه اسکریپت را انجام دهید, در این سه خط jQuery ما این کار را به سادگی انجام داده ایم.
همچنین شما با رد کردن نام کلاس و مشخصه تصویر می توانید تصویر خاصی را بررسی نمایید.
3) تعمیر تصاویر مشکل دار به صورت اتوماتیک
$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});
در برخی از زمان ها زمان کافی برای جایگزین نمودن تمام تصاویر مشکل دار را نداریم و می توانیم این کار را با تابع مورد نظر انجام دهیم
در صورتی که حتی تصویر مشکل داری ندارید اضافه کردن این کد ضرری برای سایت شما ندارد.
4) Toggle class on hover
$(‘.btn').hover(function(){
$(this).addClass(‘hover’);
}, function(){
$(this).removeClass(‘hover’);
}
);
معمولا قصد داریم زمانی که موس بر روی منطقه خاصی حرکت می نماید کلاس آن بخش را تغییر دهیم, این دستور زمانی که کاربر بر روی آیتمی موس خود را نگاه داشته کلاس هاور را به آن اضافه می نماید و زمانی که کاربر از روی آیتم حرکت می نماید کلاس را حذف می نماید, بنابراین تنها موردی که نیاز دارید آن است که به کلاس مورد نظر CSS های لازم را ارجاع دهید.
5) غیر فعال کردن فیلدهای فرم
$('input[type="submit"]').attr("disabled", true);
در برخی از زمان ها احتیاج دارید که فیلدی از فرم خود را غیر فعال نمایید تا کاربر نتواند بر روی فیلد مورد نظر کلیک نماید و یا مطلبی درج نماید این کار را با دستور بالا انجام می دهید.
برای فعال سازی دوباره فیلد می توانید از دستور زیر استفاده نمایید:
$('input[type="submit"]').removeAttr("disabled”);
6) جلوگیری از لود کردن لینک ها
$(‘a.no-link').click(function(e){
e.preventDefault();
});
در برخی از زمان ها لازم است که لینکی به کاربر نمایش داده نشود از طریق کد بالا این کار انجام می شود
7) Toggle فید/اسلاید
// Fade
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
});
// Toggle
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");
});
در برخی از مناطق لازم است افکت های فید و اسلاید jQuery انجام شود, برخی زمان ها لازم است برای نمایش آیتمی خاص از روش فید و اسلاید استفاده شود که با کلیک بر روی آیتمی خاص اتفاق می افتد, زمانی مع لازم است با یک کلیک کاربر آیتم نمایش داده شود و با کلیک بعدی آیتم حذف شود از دستور بالا استفاده می گردد.
8) ساده accordion
// Close all Panels
$('#accordion').find(‘.content').hide();
// Accordion
$('#accordion').find(‘.accordion-header').click(function(){
var next = $(this).next();
next.slideToggle('fast’);
$(‘.content’).not(next).slideUp('fast’);
return false;
});
با استفاده از دستور بالا می توانید مطالب خود را به صورت accordion نمایش دهید.
همانطور که در مثال بالا می بینید در حالت اول تمام پنجره ها بسته شده اند و با کلیک کاربر بر روی هدر accordion متن مربوط به آن هدر نمایش داده می شود، و سایر اسلاید ها بسته می شوند. این روش برای ساخت accordion ساده بسیار مناسب است.
9) دو دایو با یک ارتفاع
$(‘.div').css('min-height', $(‘.main-div').height());
برخی زمان ها لازم دارید دو دایو هم ارتفاع باشند, این کد این امکان را برای شما فراهم می نماید; در این مثال مقدار min-height را تعیین نمایید که به معنای حداقل سایز دایو ها می باشد. این کد برای سایت های masonry بسیار مورد استفاده دارد.
10) رنگ های پس زمینه یکی در میان
$('li:odd').css('background', '#E8E8E8’);
توسط این کد می توانید رنگ های پس زمینه یک لیست را به صورت یک در میان یکسان سازی نمایید و در اصطلاح گورخری نمایید, در این کد برای ردیف های فرد می توانید رنگ چس زمینه مشخص نمایید پس برای سایر ردیف ها از طریق پس زمینه اصلی می توانید رنگی مشخص نمایید. این کد را به هر المانی از سایت خود می توانید اضافه نمایید.
ایجاد تقویم فارسی در فرم توسط jquery
جهت ایجاد انتخاب کننده تاریخ فارسی از تقویم در فرم می توانید از این پلاگین jquery استفاده نمایید. استفاده از این پلاگیت بسیار ساده است و کافی است کدهای زیرا را در بالای فرم خود کپی نموده و فایل های مورد نظر را بر روی سرور خود بارگذاری نمایید:
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc.js"></script>
<script type="text/javascript" src="scripts/calendar.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc-ar.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc-fa.js"></script>
فایل های مورد نظر را می توانید از سورس این مقاله در انتهای مقاله دانلود نمایید:
http://hasheminezhad.com/datepicker
پس از انجام این کار کافی است کد زیر را در بالای فرم خود کپی نمایید.
<script type="text/javascript">
$(function() {
$('#datepicker0').datepicker();
});
</script>
در کد بالا #datepicker0 نام مشخصه فیلد فرمی است که قصد دارید به حالت انتخاب تاریخ از تقویم نمایش داده شود.
برای توضیحات بیشتر به آدرس سورس این مقاله "انتخاب تاریخ شمسی توسط DatePicker در jQuery" مراجعه نمایید.
اسکرول به بالا jquery
با توجه به درخواست های مکرر اسکریپت اسکرول به بالای انیمیشنی را برای شما گذاشتم. پیاده سازی این افکت از طریق jquery بسیار آسان می باشد. این اسکریپت چک می نماید زمانی که اسکرول پایین آمد لینک اسکرول به بالا نمایش داده می شود, زمانی که بر روی کلید اسکرول به بالا کلیک شود صفحه سایت به بالای صفحه اسکرول می شود. می توانید دمو را بررسی نمایید تا ببینید به چه صورت کار می کند.
طراحی css
المان #back-top با position:fixed تعریف نموده تا در صفحه به صورت ثابت باقی بماند. تگ span اضافی است. تگ span را به این دلیل اضافه نموده ام که بتوانم به آن گرافیک تصویری اضافه نمایم. همچنین خصوصیت transition:1s (1s = 1 second) برای ایجاد افکت موس اور فید اضافه نمودم.
به این بخش نگاهی بیندازید دمو (یادداشت: هنوز بخش jquery اضافه نگردیده).
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}
بخش jQuery (دمو)
کد زیر کد Javascript می باشد. به صورت پیش فرض, تگ #back-top مخفی خواهد شد (آن <p id="back-top"> تگ در دمو می باشد) . سپس اسکرول بار صفحه را چک می نماید (اسکرول به بالا) زمانی که بزرگتر از 100 بود, سپس بر روی المان #back-top فید می نماید, در غیر این صورت فید اوت می نماید. بخش بعدی کل کلیدهای فانکشنی هستند. هنگامی که #back-top کلیک شد, صفحه را به موقعیت 0 اسکرول می دهد.
در صورتی که می خواهید کد نویسی jquery یاد بگیرید, بخش مقالات jquery را مطالعه نمایید.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
بدون Fallback جاوا اسکریپت
یادداشت آنکه لینک به بالای صفحه به تگ #top داده شده که مشخصه <body> می باشد. نیازی به اضافه کردن مکان نیست زیرا این مورد را خود jquery متوجه می شود. هر چند, بهتر است که این موارد را مشخص نمایید.
ابزارهای جدید برای طراحان وب در 2013
در سال 2013 ابزارهای جدیدی برای طراحان و توسعه دهندگان وب معرفی شدند که شامل برنامه های جدید وب، منابع jquery، ابزارهای توسعه وب، ابزارهای طراحی سایت موبایل، ابزارهای کد زنی و ابزارهای ساخت فونت های جدید می باشد.
بسیاری از ابزارهای زیر رایگان هستند و بسیاری دیگر را می توانید به مبلغ اندکی خریداری نمایید.
به مانند همیشه در صورتی که موردی از قلم افتاده در بخش نظرات پایین صفحه آن را اعلام نمایید.
Typewolf
قصد ابداع در فونت ها را دارید؟ Typewolf برای شما بهترین سایت می باشد. فقط به شما قابلیت ایجاد فونت مورد نظر را نمی دهد بلکه فونت مناسب شما را می یابد.
Bootstrap 3
Bootstrap, فریم ورک موبایل اول از توئیتر, اما Bootstrap 3 RC1 به وجود آمد. این نسخه تغییرات بسیاری نسبت به نسخه های قبلی نموده است.
iOS 7 Wireframe Kit
iOS7 Wireframe Kit به شما امکان ایجاد وایر فریم را در Illustrator می دهد.
Tiff
Tiff به شما تفاوت بین دو نوع فونت را نمایش می دهد. این سیستم با فونت های گوگل به مانند فونت های سیستم شما کار می کند.
Bytesize
Bytesize پادکست در مورد طراحی، توسعه وب و تکنولوژی می باشد. شما همچنین می توانید خلاصه مقاله را با لینک به مقاله مطالعه نمایید.
Skeuocard
Skeuocard یک فرم پیشرفته کارت اعتباری می باشد و اعتبارسنجی ها و نوع فیلدهای مخصوص به خود را دارد.
WakaTi.me
WakaTi.me قابلیت حساب کردن زمان را به محیط ویرایشگر شما می آورد.
Responsive Web CSS
Responsive Web CSS ساخت وب سایت موبایل را برای انواع مختلف موبایل ها برای شما آسان می سازد.
Colorgorize
Colorgorize گالری وب تقسم بندی شده توسط رنگ می باشد. شما می توانید سایت را با رنگ مورد نظر خود مرور و یا جستجو نمایید.
Spectacle
Spectacle برای سیستم مک طراحی شده برای کنترل صفحه با کلیدهای میانبر. این یک سیستم کد باز می باشد و استفاده از آن بسیار آسان می باشد.
Snapnote.io
Snapnote.io به اشتراک گذاری و استفاده از تصاویر را در صفحه به وسیله دراگ و دراپ آسان می سازد.
Pico
Pico سیستم مدیریت محتوای ساده و آسان می باشد که از دیتابیس استفاده نمی نماید. این سیستم کد باز می باشد.
CSS3 Animation Cheat Sheet
CSS3 Animation Cheat Sheet به شما قابلیت ایجاد انیمیشن های مختلف را توسط css3 نمایش می دهد.
Precomposed Touch Gestures
Precomposed Touch Gestures ابزار مناسبی برای ساخت دموی محصول و پرزنتیشن می باشد.
Mailparser.io
Mailparser یک راه آسان برای اتوماتیک سازی روتین ایمیل شما می باشد.
Progression.js
Progression.js یک پلاگین jquery برای نمایش عملکرد واقعی فرم می باشد.
CSS Zen Garden
CSS Zen Garden به شما امکان های ساخت ابزارهای مختلف توسط css را نمایش می دهد که با html5 هماهنگ شده.
NearlyFreeSpeech.NET
NearlyFreeSpeech.NET سرویس هاستینگی است که شما برای آن مقدار که استفاده می نمایید پرداخت می کنید. همچنین یک ابزار محاسبه و پیشبینی قیمت هاست دارید.
Webflow
Webflow ابزاری برای ساخت وب سایت موبایل به صورت تصویری می باشد. که شامل ابزارهای گرید، فونت های وب و فرم ها و .. می باشد.
Emmet LiveStyle
Emmet LiveStyle یلاگین برای ویرایش فایل CSS شما می باشد. این ابزار با گوگل کروم و سافاری سازگاری دارد.
TypeWonder
TypeWonder به شما امکان بررسی و تست فونت های وب را می دهد. فقط کافی است آدرس سایت مورد نظر را وارد نموده و فونت مورد نظر خود را انتخاب نمایید.
Cloud Cannon
Cloud Cannon به شما امکان ایجاد سیستم مدیریت محتوا از css و html را می دهد.
SVGeneration
SVGeneration به شما امکان ایجاد گرافیک های SVG را در سایت می دهد.
9 پلاگین jQuery ناوبری وب سایت
سیستم ناوبری سایت یکی از مهمترین بخش های وب سایت می باشد. بدون آن کاربران سایت نمی توانند سایت شما را مرور نمایند و صفحات مختلف سایت را ببینند. فکر کردن در مورد نحوه نمایش درست سیستم ناوبری سایت مورد بسیار مهمی در طراحی سایت می باشد. استفاده از jquery ایجاد سیستم ناوبری و منوبندی را برای طراحان سایت آسان می نماید. امروز برای شما انواع پلاگین های jquery را برای ساخت انوع سیستم ناوبری و منوبندی سایت را معرفی می نمایم.
MeanMenu
پلاگین رایگان jquery برای ایجاد منوها با قابلیت نمایش در موبایل و سایر مرورگرهای وب, این پلاگین قابلیت های فراوانی برای ایجاد سیستم منوبندی با قابلیت انعطاف نمایش بسیار در سایزهای مختلف صفحه را دارد.
Sidr
بهترین پلاگین jquery برای ایجاد منوهای کناری که با مرورگرهای موبایل سازگاری کامل دارد.
Toolbar.Js
Toolbar به شما قابلیت ایجاد تولبار با افکت تولتیپ را می دهد. toolbar به شما امکانات بسیاری برای ایجاد سیستم منو را به صورت سفارشی و مطابق با نیاز شما می دهد.
jPanelMenu
jPanelMenu پلاگین jquery می باشد که به شما امکان ایجاد منوهای پنلی را می دهد (مانند همان چیزی که در نسخه موبایل فیس بوک و گوگل وجود دارد, و همچنین مانند برنامه های آیفون). برای رویت طرز کار منو بر روی آیکون منو کلیک نمایید.
Intro.js
دستورالعمل بهتر برای ایجاد بلاک معرفی و آیتم های مهم وب سایت.
jPaginator
jPaginator پلاگین jquery برای ایجاد سیستم صفحه بندی می باشد. این پلاگین بسیار کاربر پسند میباشد و دارای قابلیت اسلایدر می باشد بنابراین شما می توانید تعداد نامحدود صفحه داشته باشید.
Smart Menus
منوی وب سایت که بر روی همه سیستم ها کار می کند.
slimMenu
slimMenu پلاگین بسیار سبک jquery می باشد که به شما امکان ایجاد سیستم منوبندی چند سطحه با قابلیت سازگاری مرورگرهای موبایل را می دهد.
با استفاده از این پلاگین دیگر نیازی به استفاده از کتابخانه های بزرگ برای ایجاد سیستم منو سازگار با مرورگرهای موبایل و همچنین ایجاد منوهای چند سطح را ندارید.
Navgoco
Navgoco یک پلاگین ساده می باشد که لیست را تبدیل به منوهای عمودی می نماید, که قابلیت ثبت منوی باز شده را با استفاده از کوکی ها و همچنین ایجاد منوی آکوردیون دارد.
6 پلاگین افکت اسکرولی نامحدود jQuery
افکت اسکرول نامحدود را دیده اید. در سایت هایی مثل فیس بوک و گوگل پلاس. این افکت به این صورت می باشد که زمانی که اسکرول کاربر به انتهای صفحه می رسد سایر مطالب لود می شود. در حقیقت اسکرول نامحدود جایگزین صفحه بندی شده. اسکرول نامحدود بسیار کاربر پسند تر از سیستم صفحه بندی می باشد زیرا برای رویت مطالب بیشتر لازم نیست کاربر صفحه دیگری را لود نماید. برای ایجاد اسکرول نامحدود در صفحه می توانید از jquery استفاده نمایید. jquery پلاگین های بسیار و دستورات بسیاری برای انجام این کار دارد. در زیر 6 پلاگین برتر انجام این کار را برای شما لیست نموده ام. برای رویت سایر مقالات به بخش مقالات jquery مراجعه نمایید.
jQuery Scroll Path
jQuery Scroll Path برای ایجاد سیستم های اسکرولی سفارشی ایجاد گردیده. با استفاده از این پلاگین می توانید هر نوع سیستم اسکرولی می خواهید ایجاد نمایید.
Superscrollorama
برای ایجاد اسکرول های انیمیشنی.
stellar.js
windows
Cool Kitten
Sticky
این پلاگین به شما این امکان را می دهد که هر موردی را که بخواهید در صفحه به صورت ثابت نمایش داشته باشد.
طراحی آیتم های بیشتر برای لیست های بلند توسط jquery
برای ایجاد لینک آیتم های بیشتر برای لیست های بلند می توانید از کد jquery زیر استفاده نمایید.
<html>
<head><title>Test</title></head>
<body>
<ul class="more">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
</ul>
<script type="text/javascript" src="/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
$("ul.more").each(function() {
$("li:gt(4)", this).hide(); /* :gt() is zero-indexed */
$("li:nth-child(5)", this).after("<li class='more'><a href='#'>More...</a></li>"); /* :nth-child() is one-indexed */
});
$("li.more a").live("click", function() {
var li = $(this).parents("li:first");
li.parent().children().show();
li.remove();
return false;
});
});
</script>
</script
</body>
</html>