بررسی قابلیتهای جدید جیکوئری در ورژن 1.4
نسخه جدید jQuery که در حال حاضر یکی از پرطرفدارترین کتابخونههای جاوا اسکریپت هست، معرفی شدهاست. نسخه جدید یعنی ورژن 1.4 نسبت به ورژنهای قبلی خودش، تغییرات بسیار چشمگیری داشته که اکثر اونها در جهت بهبود jQuery هستند و چندین قابلیت جدید هم به اون اضافه شده. این نسخه در CDN ها هم اکنون موجود میباشد و میتوانید از آن استفاده کنید. (در مورد CDN بیشتر بخوانید)
معرفی برخی ویژگیها و امکانات جدید در jQuery 1.4
اضافه کردن چندین Event Handler در یک زمان
در نسخههای قبلی، اگر نیاز به نسبت دادن چندین event handler در یک خط دستور داشتیم باید اصطلاحا آنها را به صورت زنجیروار پشت سر هم مینوشتیم. مثلا:
$("p").click(fucntion() {
//do something on click event
}).mouserover(function(){
//do something on mouse over event
}).dblclick(function() {
//do something on double click event
});
});
اما در ورژن 1.4 میتوان به صورت زیر عمل کرد:
$("p").bind({
click: function() {
// do something on click
},
mouserover: function() {
//do something on mouse over event
},
dblclick: function() {
//do something on double click event
}
});
میبینید که کدنویسی به این صورت بسیار خواناتر و مدیریت آن در آینده بسیار راحتتر شده است و دیگر نیازی به قطار کردن توابع پشت سر هم نیست.
انتخاب نوع انیمیشن در چندین حالت مختلف
در نسخه های قبلی هنگام استفاده از تابع animate امکان مقداردهی نوع انیمیشن فقط در حالت کلی امکان داشت. مثلا اگر میخواستیم یک عکس را توسط jQuery حرکت دهیم، باید در تابع animate، مقادیر top و left آن را به طور مثال، تغییر میدادیم و نوع این حرکت یا همون easing رو به طور کلی به کل این انیمیشن اضافه میکردیم. اما در نسخه 1.4، برای هر جهت و یا هر تغییر مشخصهای که برای انیمیشن معرفی کردیم، میتوانیم یک مدل انیمیشن انتخاب کنبم.
این مساله را برای مثال در اینجا ببینید.
سورس این مثال به صورت زیر است:
<input type="button" id="jq" value="before 1.4" />
<input type="button" id="jq14" value="version 1.4" />
<div id="box" style="width:200px;height:200px;background-color:red;">
</div>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script type="text/javascript" src="easing.js"></script>
<script type="text/javascript">
$(function(){
$('#jq').click(function() {
$('#box').animate({
width: 'toggle',
height: 'toggle'
}, 500,'easeOutBounce'
);
});
$('#jq14').click(function() {
$('#box').animate({
width: ['toggle','easeInCirc'],
height: ['toggle', 'easeOutBounce']
}, 500 );
});
});
</script>
در این مثال از پلاگین easing استفاده شده که شما هم برای درست کار کردن این مثال باید این پلاگین رو از این آدرس دانلود کنید. خود کتابخونه jQuery فقط 2 مدل انیمیشن دارد که مقادیر آنها "swing" و "linear" هستند. با پلاگین easing که دانلود میکنید، میتونید بیشتر از 20 مدل انیمیشن داشته باشید. مثل همین 2 تایی که در مثال استفاده شده است.
دقت کنید که در ورژن های قبلی 1.4 چگونه انیمیشن فقط یک نوع دارد، اما در ورژن 1.4، در دو جهتی که مربع قرمز کوچک و بزرگ میشود، در هر جهت با یک مدل انیمیشن easing متفاوت که برای آن تعیین کردهایم، عمل میکند.
همچنین در این مثال میبینید که از CDN گوگل برای استفاده از jQuery 1.4 استفاده شدهاست. (در مورد CDN بیشتر بخوانید)
منتظر پستهای بعدی در مورد قابلیتهای جدید jQuery باشید.
*این مطالب از خودم میباشد! اگر در اون مورد اشتباهی میبینید، ممنون میشم که اعلام کنید و استفاده از این مطلب آزاد هست و اگر دوست دارید با انصاف باشید، منبع رو هم ذکر کنید.