تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده
تبلیغات
تبلیغات تبلیغات

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

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

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

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

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

اولین کد جی کوری را با کد معروف اسکرول به بالا یا برو به بالا شروع میکنیم ، ابتدا باید هدف را مشخص کنیم به یکی از عناصر صفحه تان که در بالای صفحه هست یک 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
کلمات کلیدی پست :
مطالب مرتبط
8,195افزونه وردپرس افزودن دکمه برگشت به بالا Smart Scroll Top تاریخ : 2017/02/13
9,481افزونه ایجاد کدهای کوتاه در وردپرس تاریخ : 2016/06/19
14,935پلاگین نمایش آخرین خبر ها به صورت زنده در سایت تاریخ : 2014/02/17
7,397افزونه ساخت آواتار سفارشی به صورت SVG برای وردپرس تاریخ : 2016/09/20
45,185کد php انتقال فایل به هاست تاریخ : 2016/12/8
6,811درست کردن غرفه عکس با PHP, jQuery و CSS3 تاریخ : 2013/10/26
58,786آموزش ارسال اطلاعات یک فرم به ایمیل تاریخ : 2013/10/26
8,171دانلود قالب نمونه کار Prism برای وردپرس تاریخ : 2014/12/14
9,342دانلود افزونه ساخت فرم تماس در وردپرس Contact Form Builder تاریخ : 2016/03/5
7,063نشانه گذاری خودکار دیدگاه های حاوی لینک های طولانی به عنوان جفنگ تاریخ : 2016/04/13
11,416تبدیل تصاویر به صورت یک نقشه با MobilyMap تاریخ : 2019/11/8
7,937شمارش صفحات وردپرس بدون نیاز به نصب افزونه تاریخ : 2014/04/23
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
indiegogo
sourceforge
profile webmaster
profile webmaster
profile
profile check
آرشیو
checker list
سئو سایت
تبلیغات