سلام
* یک نکته ای بود که میخواستم بهتون بگم که دچار اشتباه نشید برای تست مثال ها نیازی به Apache یا ... ندارید و به طوری ساده میتونید در یک فایل .html آنرا آزمایش کنید .
قسمت چهارم
#1
ممکن هستش تا الان شما فقط در رابطه با افکت های خاصی که در این کتابخانه وجود داره شنیده باشید و چیز هایی که در آموزش های قبلی یاد دادم براتون کاملا آشنا نبوده و قدرت کامل این کتابخانه رو به شما نرسونده . الان میخوام براتون یک سری از افکتهایی که در Jquery وجود داره رو آموزش بدم .
[HTML] $("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});[/HTML]خب به خط اول این کد که آشنایی دارید در خط دوم یک event اضافه شده که در آموزش بخش دوم به شما گفتم و لینکی برای لیست event ها دادم . این میاد کاری که قرار انجام بشه رو خنثی میکنه یعنی لینک خنثی میشه و عملیاتی که میخوایم انجام میگیره
در خط بعد که کد :
[HTML]$(this).hide("slow");[/HTML]استفاده شده hide یک افکت در این کتابخانه میباشد و $(this) منظور این میباشد که این رویداد برروی شیء که تعریف کردیم انجام بگیرد نه جای دیگه . Slow هم سرعت hide شدن شیء مربوطه میباشد .
کد اصلی به طور کل افکت Hide رو به طور Slow به تگ های " a " قرار میده و جلوه زیبایی در صورت کاربر مناسب به سایت میبخشد .
مثال کامل :
[HTML]<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<p>Hello</p>
<a href="#">Click to hide me too</a>
<p>Here is another paragraph</p>
<script>
$("p").hide();
$("a").click(function () {
$(this).hide();
return true;
});
</script>
</body>
</html>[/HTML]افکت ها به طور کلی به این صورت نوشته میشوند :
[HTML]$('.target').effectname();[/HTML]-----
میخوام در وسط این آموزش در رابطه با Tag های که در بین آموزش ها میگم بنویسم . همیشه ممکن هستش تگ نباشه و به وسیله ID بخوایم شناسایی کنیم مثلا :
[HTML]<div id="mardak"> Salam! </div>
<script>
$('#mardak').hide('slow', function() {
alert('Halllooooo');
});
</script>[/HTML]در اینجا ما فهمیدیم که برای ارتباط به وسیله ID در قسمت target میتونیم به این صورت عمل کنیم : #target و تنها یک # قبل از نام آن اضافه میکنیم . مانند قبل بعد از مشخص کردن تنظیمات اصلی با اضافه کردن یک " , " و استفاده از function() {} کاری که پس از پایان کار مد نظر ما بود را قرار میدهیم
-----
برای مشاهده و توضیحات انواع افکت ها به صفحه زیر مراجعه کنید :
کد:
http://api.jquery.com/category/effects
+ همراه مثال برای استفاده کنندگاه Jquery
پایان قسمت چهارم
نویسنده : امیر سلیمانی :40:
