گروه کامپیوتر دانشگاه آزاد

اساتید و دانشجویان دانشگاه آزاد اسلامی

گروه کامپیوتر دانشگاه آزاد

اساتید و دانشجویان دانشگاه آزاد اسلامی

بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِیمِ
زکات علم، نشر آن است. گروه کامپیوتر دانشگاه آزاد با هدف خدمت به دانش آموزان ، دانشجویان و آنهایی که علاقه به برنامه نویسی و طراحی و کلیه امور تخصصی کامپیوتر دارند با هدف نشر علم خدمت رسانی کند امید است کاربران در جهت تحقق این اهداف والا یار و همدم ما باشند . . .

آخرین نظرات

امروزه جی کوئری بر روی میلیون ها صفحه وب استفاده می شود .

بخشی از محبوبیت جی کوئری به دلیل سادگی آن می باشد . ما می توانیم هر کاری را با این کتابخانه قدرتمند انجام دهیم .

من برخی از قطعه کدهای جی کوئری را که استفاده زیادی از آن ها می شود برای شما قرار میدهم

کد های کاربردی در ادامه مطالب

دکمه برگشت به بالا :

// 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 در جی کوئری یک کد ساده اسکرول شدن با سمت بالا صفحه به صورت انیمیشن را ساختیم .

با تغییر مقدار scrollTop ما می توانیم مکانی که می خواهیم صفحه در آنجا متوقف شود را تغییر دهیم ، و با دادن مقدار ۰ می توانیم اسکرول را با بالاترین نقطه صفحه ببریم .

با تغییر مقدار دوم تابع animate  سرعت اسکرول شدن را کم یا زیاد کنیم .

بررسی لود شدن عکس :

$(‘img’).load(function() {
console.log(‘image load successful’);
});

خیلی وقت ها شما نیاز دارید عکس هایتان را بررسی کنید تا مطمئن شوید کامل لود شده اند یا نه .

با این سه خط کد شما به راحتی می توانید این کار را انجام دهید .

شما همچنین می توانید با جایگزین کردن تگ img همراه با class یا id ، عکس خاصی را مورد بررسی قرار دهید .

جایگزین عکس های خراب به صورت اتوماتیک :

$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});

گهگاهی ما برای تغییر عکس های خراب در سایت ، نیاز به تغییر آن ها با عکس دیگری داریم که این کار راحتی نیست .

با اضافه کردن قطعه کد بالا می توانیم به صورت اتوماتیک عکس های خرابمان را با عکسی دیگر جایگزین کنیم .

حتی اگر شما هیچ عکس خرابی در سایتتان ندارید ، این قطعه کد آسیبی به سایتتان نمیزند .

اضافه و حذف کردن class در ایونت hover :

$(‘.btn').hover(function(){
$(this).addClass(‘hover’);
}, function(){
$(this).removeClass(‘hover’);
}
);

با این قطعه کد زمانی که شما ماوس را روی عنصری با کلاس btn ببرید (hover کنید) کلاسی با نام hover به عنصر شما اضافه می شود .

و بعد از آنکه ماوس را از روی عنصر بردارید کلاس hover از آن حذف میشود .

شما می توانید با اضافه کردن این کلاس ، استایل های خود را در css نوشته و به عنصر خود مرتبط نمایید .

غیر فعال کردن فیلدهای input :

$('input[type="submit"]').attr("disabled", true);

ممکن است شما بخواهید دکمه ارسال یک فرم یا یکی از input های موجود در آن را غیر فعال کنید ، تا زمانی که کاربر یک عمل خاص انجام دهد .

به طور مثال ، پر کردن چیزی یا انتخاب “شرایط را خوانده ام” .

این قطعه کد ویژگی disable را به ورودی شما اضافه میکند و هر زمان که شما خواستید می توانید این ویژگی را حذف نمایید .

برای این کار هم شما باید تابع removeAttr را مانند قطعه کد زیر استفاده کنید :

$('input[type="submit"]').removeAttr("disabled”);

 

توقف بارگذاری لینک ها :

$(‘a.no-link').click(function(e){
e.preventDefault();
});

 

fade و slide در حالت رفت و برگشت :

// Fade
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
});
// Toggle
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");
});

توابع fade و slide در افکت هایی که به صورت انیمیشنی در میکنیم بسیار استفاده میشوند .

ما میتوانیم این توابع را به صورت تک تک ، مانند fadeIn ، fadeout ، slideDown و slideUp استفاده کنیم .

اما اگر بخواهیم از همین توابعی به صورتی استفاده کنیم که با کلیک کردن عنصری محو شود و با کلیک دوباره عنصر ظاهر شود ، می بایست مانند کد بالا عمل کنید .

آکاردئون ساده :

// 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;
});

همانطور که در کد بالا می بینید ابتدا تمام پنل ها در آکاردئون ما بسته شده اند .

سپس با ایونت کلیک محتوای ما به صورت رفت و برگشت باز و بسته می شود .

با این روش شما می توانید یک پنل آکاردئونی ساده بسازید .

دو div هم ارتفاع :

$(‘.div').css('min-height', $(‘.main-div').height());

گاهی اوغات شما می خواهید دو div بدون در نظر گرفتن محتوای داخل آن ها از نظر ارتفاع یک اندازه باشند .

این روش برای طراحی های flat بیشتر قابل استفاده خواهد بود ، چون اندازه div ها در صفحه با هم برابر خواهند بود .

ul های قالب بندی نشده گورخری :

$('li:odd').css('background', '#D5D5D5’);

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

شما می توانید به صورت پیش فرض یک رنگ را برای عنصر خود انتخاب کنید و با این کد یکی در میان رنگی که مد نظر دارید ، به رنگی که در کد خود داده ای تغییر دهید .

اگر شما قطعه کدهای بهتری سراغ دارید در قسمت نظرات بیان نمایید تا بقیه استفاده نمایند و یا اگر تعداد آن بیشتر شد در پست جدید آن ها را قرار خواهم داد .

نظرات (۲)

میشه کد این تصویر خوش آمد گویی که سمت چپ قرار دادید رو بگید .و همچنین بگید باید کجای از کد قالب قرار بدم .واقعا جالبه ا لبته من تصویرش رو در وبلاگم عوض می کنم.
ممنون می شم اگه بگید.
پاسخ:
چشم حتما دوست عزیزم اینم کدهاش

<div style="position:fixed;left:0px;bottom:0px;z-index:200;">

<img tiptitle="تولتیپ عکس" src="http://bayanbox.ir/id/5099534626665013071?view" height="250" width="150">
</div>
آموزش تغییر محل عکس کنار سایت به اینم نگاه کن کلیک کنید.
دوست عزیز و در ضمن چون محلشو قبلا آدرس دهی کردیم هر جا بذاری داخل تگ <body> تو جای مناسبش دیده میشه موفق باشی اگه نشد نویسندگی با نام sumdanger برام باز کن بیام برات هر چی می خوای حل کنم یا علی
سلام.این قطعه کدها رو میشه بفرمایید کدوم قسمت از کدهای قالبمون اضافه کنیم.
پاسخ:
سلام دوست عزیز این تکه کد ها مخصوص نمایش یا همون بدنه <body> می باشد و می توانید هر جایی داخل تگ باز و بسته <body>
<body/>قرار دهید با تشکر از حضورتان
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
تجدید کد امنیتی