خرید هاست ارزان ایران / آلمان

متنوع ترین سرویس های هاستینگ با CPANEL افزودن دامنه - ایمیل - mysql نامحدود پرداخت بصورت ماهانه / سه ماهه / شش ماهه / سالانه SSL رایگان حتی برای دامنه های IR راه اندازی آنی پشتیبانی 24 ساعته ، یکماه ضمانت بازگشت وجه امکان استفاده از شتابدهنده و پکیج تضمین امنیت وردپرس مشاوره آنلاین روی سایت | 02154109999 | talashnet.com

کد جی کوری : تکه کدهای جی کوری مفیدی که باید یاد بگیرید!

مقالات,آموزش,ترفند

امروز قصد دارم یه سری کدهای هر چند کوچک ولی کاربردی جی کوری رو به شما آموزش بدم که توی طرح هاتون خیلی میتونه مفید باشه و میتونید ازشون استفاده کنید.

اسکرول افکت دار به بالا

اولین کد جی کوری را با کد معروف اسکرول به بالا یا برو به بالا شروع میکنیم ، ابتدا باید هدف را مشخص کنیم به یکی از عناصر صفحه تان که در بالای صفحه هست یک id با مقدار top بدهید، در اینجا من برای اینکه چیزی بالاتر از body وجود ندارد آی دی را به body میدم.

<body id="top">

حالا باید کد زیر را به پایین صفحه قبل از </body> اضافه کنید دلیل اینکه میگم کد رو به پایین صفحه اضافه کنید برای لود سریع تر صفحه هست هر چند این کد سریع لود میشه اما همیشه سعی کنید کد های جاوااسکریپتی که اشکال نداره آخر از بقیه عنصر ها لود بشن رو آخر صفحه بذارید

<script type="text/javascript">
$(document).ready(function() {

    $("a.topLink").click(function() {
        $("html, body").animate({
            scrollTop: $($(this).attr("href")).offset().top + "px"
        }, {
            duration: 500,
            easing: "swing"
        });
        return false;
    });

});
</script>

حالا تنها کاری که مونده ایجاد لینک برو به بالا ست، کد زیر رو بذارید جایی که دوست دارید لینک نشان داده بشه

<a href="#top" class="topLink">برو به بالا</a>

چک کردن قدرت پسورد

با این تکه کد جی کوری فوق العاده ساده میتونید به کاربراتون این امکان رو بدید که بدونند پسوردی که وارد میکنند چقدر قوی هست

بخش HTML

<input type="password" id="pass" value="">
<span id="passstrength"></span>

بخش جاوا اسکریپت

<script>
$('#pass').keyup(function(e) {
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
     var enoughRegex = new RegExp("(?=.{6,}).*", "g");
     if (false == enoughRegex.test($(this).val())) {
             $('#passstrength').html('More Characters');
     } else if (strongRegex.test($(this).val())) {
             $('#passstrength').className = 'ok';
             $('#passstrength').html('Strong!');
     } else if (mediumRegex.test($(this).val())) {
             $('#passstrength').className = 'alert';
             $('#passstrength').html('Medium!');
     } else {
             $('#passstrength').className = 'error';
             $('#passstrength').html('Weak!');
     }
     return true;
});

</script>

مساوی کردن ارتفاع height عناصر

در سی اس اس در حالت عادی این امکان وجود ندارد که height یا ارتفاع div ها را با هم برابر کنید و باید از هک استفاده کنید در حالی که با کد جی کوری زیر به راحتی میتونید این کار رو انجام بدید

<script>
var maxHeight = 0;

$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("div").height(maxHeight);

</script>

تغییر استایل عناصر به صورت یکی در میان

تاحالا پیش اومده که بخواید مثلا یک جدول درست کنید که پس زمینه سطر هاش یکی در میان فرق کنه ، یا بخواید به چند div یکی در میان استایل بدید ؟؟ راه حل اینجاست!!! این کد جی کوری دقیقا چیزی که میخواهید را به شما میدهد

<div>Row 1</div>
<div>Row 2</div>
<div>Row 3</div>
<div>Row 4</div>

<script>
$('div:odd').css("background-color", "#F4F4F8");
  $('div:even').css("background-color", "#EFF1F1");
</script>

تمام div را قابل کلیک کردن کنید

شاید درون یک div یک لینک داشته باشید اما دوست دارید کاربر هر جای لینک کلیک کرد به آدرس اون لینک بره

<div class="myBox">
     blah blah blah.
    <a href="http://google.com">link</a>
</div>

<script>
$(".myBox").click(function(){
     window.location=$(this).find("a").attr("href");
     return false;
});
</script>

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

اگر آموزش خاصی مد نظرتون هست در قسمت نظرات اعلام کنید

این محتوا چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

مشکلی دارید؟ جواب خود را در پست فروم بگیرید
منبع : بیست اسکریپت لطفا رعایت کنید

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

مطلب مفیدی بود ؟

نویسنده : تیم محتوای 20اسکریپت 4 مقالات,آموزش,ترفند

لینک کوتاه مطلب : https://www.20script.ir/?p=158

کلمات کلیدی پست :

jquery, آموزش, آموزش جی کوری, اسنیپت جی کوری, اسکرول به بالا, تغییر استایل یکی در میان, تغییر پس زمینه یکی در میان, تکه کدهای جی کوری مفیدی که باید یاد بگیرید, جی کوری, قدرت پسورد, قدرت کلمه عبور, چک کردن قدرت پسورد, کد اسکرول به بالا, کد برو به بالا, کد جی کوری, کد جی کوری : تکه کدهای جی کوری مفیدی که باید یاد بگیرید!, کدهای jquery, کدهای جی کوری

مطالب مرتبط

9,662چندین ترفند کاربردی برای وردپرس 1 تاریخ : 2014/01/11

7,064آموزش اتصال به SSH لینوکس در سیستم‌عامل‌های مختلف تاریخ : 2019/07/4

9,345امکان انتخاب دسته بندی در فرم جستجو وردپرس تاریخ : 2015/08/6

10,787افزونه اسلایدر حرفه ای و واکنش گرا Everslider برای وردپرس 2 تاریخ : 2015/07/22

15,204اسکریپت اسلایدر حرفه ای jQuery Banner Rotator 5 تاریخ : 2015/03/11

15,473افزونه وردپرس نمایشگر وضعیت آب و هوا Better Weather تاریخ : 2016/09/23

18,089صفحه اختصاصی برای خطای پایگاه داده 1 تاریخ : 2013/10/27

15,249پخش کننده فایل های صوتی با jQuery و HTML5 تاریخ : 2016/02/20

17,190دانلود نسخه نهایی قالب فارسی صحیفه Sahifa نسخه 5.5.3 2 تاریخ : 2016/03/31

9,192پلاگین سنجاق کردت تصاویر با جی کوئری تاریخ : 2016/02/20

14,055اسکریپت نمایشگر وضعیت آب و هوا Better Weather 1 تاریخ : 2015/08/12

8,803نحوه تغییر رنگ نوار آدرس مرورگرهای موبایل برای هماهنگی با رنگ وردپرس 4 تاریخ : 2016/03/30

برخی از قالب های وبلاگ - بیست اسکریپت

قالب عشق بین انگشت ها

قالب دخترونه و آرایش

قالب زیبای ماشین

قالب فانتزی و طنز چِشم

قالب دختر رویایی

قالب وبلاگ دکوراسیون

قالب وبلاگ کلبه و درخت

قالب دختر زیبا

قالب پسرونه غمگین

قالب عاشقانه قلب

خرید هاست ارزان ایران / آلمان

کد جی کوری : تکه کدهای جی کوری مفیدی که باید یاد بگیرید!

اسکرول افکت دار به بالا

چک کردن قدرت پسورد

مساوی کردن ارتفاع height عناصر

تغییر استایل عناصر به صورت یکی در میان

تمام div را قابل کلیک کردن کنید

دسته بندی ها

تبلیغات

محبوب ترین مطالب

گجت وبلاگ

تبلیغات متنی

خبرنامه

خرید هاست ارزان ایران / آلمان

کد جی کوری : تکه کدهای جی کوری مفیدی که باید یاد بگیرید!

اسکرول افکت دار به بالا

چک کردن قدرت پسورد

مساوی کردن ارتفاع height عناصر

تغییر استایل عناصر به صورت یکی در میان

تمام div را قابل کلیک کردن کنید

دسته بندی ها

تبلیغات

محبوب ترین مطالب

گجت وبلاگ

تبلیغات متنی