PDA

View Full Version : آموزش: jQuery به زبان ساده - قسمت دوم



raziee
جمعه 22 آبان 1388, 18:27 عصر
منبع (http://mytoolbox.ir/blog/post/2009/06/28/jQuery-in-Plain-Persian-Part-2.aspx)
در قسمت اول (http://barnamenevis.org/forum/showthread.php?t=189210) دیدیم که چجوری میشه مقدمات کار با jQuery رو فراهم کرد. حالا یه کم میریم جلوتر و میبینیم که چجوری میشه با اجزای صفحه ارتباط برقرار کرد.
در jQuery از علامت $ برای بیان کردن قسمتی از صفحه که میخواهیم کد در موردش بنویسیم، استفاده میکنیم. اجزا یا قسمتهای صفحه یعنی چی؟ به زبون خیلی ساده یعنی نام و ID مربوط به هر تگ اچ تی ام ال و همچنین کلاس های CSS استفاده شده در این تگ ها.
در مثال زیر:

<a href="default.aspx" class="linktype1">
<img id="img1" src="pic.jpg" alt="img 1" />
</a>
برای ارتباط با تگ لینک میتونیم از $("a") و همچنین از $(".linktype1") استفاده کنیم. در حالت دوم دقت کنید که یه نقطه قرار دادیم قبل از کلمه linktype1 که یعنی داریم به یک کلاس CSS اشاره میکنیم.
از اونجاییکه در یک صفحه میتونه چندین تگ a قرار داشته باشه پس دقت کنید که $("a") به تمام لینک های موجود در صفحه اشاره خواهد کرد، همین نکته در مورد کلاس linktype1 هم صادق هست یعنی $(".linktype1") میاد تو صفحه میگرده و هر چی تگ که از این کلاس استفاده کرده باشند رو در نظر میگیره و کد نوشته شده رو، روی اونها اجرا میکنه.
حالا اگه بخواهیم یک تگ خاص در صفحه رو پیدا کنیم چه باید کرد؟ راه های مختلفی وجود داره. یکی از اونها استفاده از قابلیت ID هست گه تقریبا تمامی تگ های html میتونن این صفت رو داشته باشند. در HTML استاندارد، تمامی ID های موجود در سورس صفحه باید یونیک باشند و تکراری نباشه. البته میدونیم که اگر عمدی یا سهوی ID تکراری بنویسیم کسی نیست از ما خطا بگیره، ولی خوب چه کاریه؟ خودمون که سر خودمون رو کلاه نمیذاریم که! :دی
برای اشاره به یک ID توسط jQuery از این مدل استفاده میکنیم: $("#img1")
به قطعه کد html که چند خط بالاتر نوشته شد دقت کنید و همچنین به علامت # که برای رسیدن به ID استفاده میشه. تقریبا میشه گفت ارتباط با اجزای صفحه به همون مدلی هست که در CSS استفاده میکنیم، فقط یه $ اضافه شده.
البته در اکثر موارد به صورتی عمل میشه که در ادامه به صورت یک مثال خواهم گفت.
خوب، حالا بریم سروقت یک مثال ساده که البته خیلی نکات جدید رو توش خواهیم دید.
فرض کنیم در قسمتی از صفحه میخواهیم سوال و جوب داشته باشیم اما به صورتی که سوال ها زیر هم باشند و بیننده روی هر سوال که خواست، کلیک کنه و جواب اون سوال در زیر اون یهو(!) به حالت کشویی پیدا شه.
سورس html رو به صورت زیر من نوشتم: (البته پیشنهاد میشه از لیست استفاده شه برای این کار! ولی من از p استفاده کردم

<h1>Welcome to FAQ</h1>

<div id="faq">
<p class="question">Question 1</p>
<p class="answer">Answer 1</p>

<p class="question">Question 2</p>
<p class="answer">Answer 2</p>

<p class="question">Question 3</p>
<p class="answer">Answer 3</p>
</div>
<h2>Have a nice day</h2>
کل سوال و جواب ها در یک div با ID=faq قرار گرفته و برای تگ های سوال و جواب، کلاسهای question و answer به صورت زیر تعریف میکنیم:

<style type="text/css">
.question
{
font-weight:bold;
color:Black;
cursor:pointer;
}
.answer
{
padding-bottom:15px;
color:Blue;
}
</style>
هدف در اینجا طراحی نیست، فقط یه مثال ساده دم دستی هست تا مطلب بهتر مفهوم شه :دی
و اما نکاتی که میشه اشاره کرد: ما با قسمت سوال و جوابها کار داریم و برای همین بهتر هست که کل این بخش رو داخل یک div قرار بدیم تا دسترسی به اون ساده تر باشه و البته برای استایل دادن به مجموعه هم کار ساده تر هست. به این صورت که برای رسیدن به بخش جوابها به این صورت آدرس دهی میکنیم: $("#faq .answer") که کاملا واضح هست که به صورت سلسله مراتبی از faq میرسیم به answer. و اگر احیانا در قسمت دیگری از صفحه خارج از div که با ID=faq مشخص شده، از کلاس answer استفاده کردیم، کد ما برای اون اعمال نمیشه و به زبون ساده تر یعنی بیا هر چی کلاس answer هست رو، توی تگی که ID اون برابر faq هست رو پیدا کن و کد رو روش پیاده کن. البته حواسمون هست که دیگه ID=faq رو جایی دیگه به کار نبرده باشیم.
یه نکته دیگه اینکه $("#faq") و $("div#faq") در مثال ما به هم برابر هستند چون faq فقط مقدار ID تگ DIV هست پس نیازی به عنوان کردن div در آدرس دهی نداریم.

حالا میریم سراغ jQuery؛ بعد از لینک دادن صفحه به کتابخونه jQuery ، شروع به نوشتن کد میکنیم. ابتدا باید جوابها رو پنهان کنیم:

<head>
<script src="scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {

$("#faq .answer").hide();
})
</script>
.
.
.
با استفاده از $("#faq .answer") به تمام جوابها دسترسی پیدا میکنیم و با استفاده از دستور hide اونها رو مخفی میکنیم. این کار دقیقا زمانی که صفحه لود شود، انجام میشود.
حالا میخواهیم با کلیک شدن روی question ، جواب اون هم ظاهر بشه. برای این کار باید به سمت سوال آدرس دهی کنیم و در حالت click اون، کد رو بنویسیم. به این صورت:

<script type="text/javascript">
$(document).ready(function() {
$("#faq .answer").hide();


$(".question").click(function() {
$(".answer").slideToggle();
});


})
</script>
این کد هم بسیار ساده هست. در رخداد ( چه کلمه عجیبیه این رخداد! ما میگیم همون event کلیک شدن، میایم میگیم تابعی که در ادامه نوشته میشه رو اجرا کن! فکر نکنید سخته، باور کنید دو بار این مدل کد ها رو بنویسید دستتون عادت میکنه و البته حواستون باشه تو پرانتزها و آکولادها قاطی نکنین.
حالا این تابعی که در ادامه نوشته شده چی کار میکنه؟ میاد تمام اجزایی که کلاس answer دارند رو پیدا میکنه و عمل slideToggle رو انجام میده. slideToggle یعنی اینکه به صورت کشویی یا تاشویی یا هر اسم دیگه ای! اون خطوط رو حرکت میده. حتما این کد رو امتحان کنید تا ببینید چجوریه.
خوب حالا اگه کد رو اجرا کرده باشید و یا اگرم اجرا نکردید و یه کم دقت کنید میبینید این کد مشکل داره. مشکلش اینجاست که شما رو هر سوالی کلیک کنید، تمام جوابها باز یا بسته میشند. برای اینکه ما گفتیم هر چی کلاس answer بود رو تغییر بده، اما ما دقیقا اون جوابی رو میخواهیم که زیر سوالی هست که کلیک کردیم روش. خوب برا این کار از همون سیستم ترتیبی در jQuery استفاده میکنیم.

استفاده از ترتیب کد ها در jQuery رابطه مستقیمی با ساختار اجزا کد HTML شما داره. در همین مثال ببینید ما از $("#faq .answer") استفاده کردیم برای اینکه تگی که با ID=faq مشخص شده، در بر گیرنده تگ کلاس .answer هست و اصطلاحا میگیم براش نقش parent رو داره. اما تو همین مثال دقت کنید سوال ها و جواب ها در برگیرنده هم نیستند. در واقع تگ p با کلاس question بسته شده و بعد از اون تگ p با کلاس answer اومده، پس اینجا نمیشه گفت که سوال، برای جواب parent هست. بنا براین استفاده از $(".question .answer") به هیچ قسمتی از صفحه، اشاره نمیکنه.
در این جور مواقع میتونیم از قابلیت next در jQuery استفاده کنیم که به ما اجازه میده که تگ بعدی تگ مورد نظر رو انتخاب کنیم که در واقع همون چیزی هست که ما اینجا میخواهیم.
نکته بعد اینکه چجوری به jQuery بفهمونیم کدوم سوال هست که کلیک شده؟ این کار هم با استفاده از کلمه this امکان پذیر هست. استفاده از this به jQuery کمک میکنه تا بفهمه click event از طرف کی اومده. به کد زیر که کد کامل شده هست دقت کنید:

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

$("#faq .answer").hide();


$(".question").click(function() {

$(this).next($(".answer")).slideToggle();

});
})
</script>
خط آخر رو میشه خیلی ساده اینجوری خوند:
تگی که با کلاس question روش کلیک شده رو حواست باشه کدومه ( این میشه مفهوم $(this) که بعد از تابع کلیک شدن question. اومده ) یه تگ ازش بیا جلوتر، اگه اون تگ کلاسش answer بود، بگیرش و slideToggle رو، روش اجرا کن.
به همین سادگی میشه یه سیستم سوال جواب با ظاهر قشنگ درست کرد. دقت کنید که این کد jQuery فقط یک بار نوشته میشه، حالا شما 132 تا سوال هم داشته باشید به شرط اینکه ساختار html رو رعایت کرده باشید، همه اونها در برابر این کد سر تعظیم فرود میارند.(به خاطر خاصیت $(this) )
حتما هم لازم نیست صفحه شما استاتیک باشه، حتی اگه این سوال ها رو با استفاده از یک زبان برنامه نویسی میخونین، فقط کافیه در حلقه خوندن اطلاعات، همچنان ساختار تگ های html که کد jQuery رو براشون نوشتیم رعایت شه.
به همین سادگی

raziee
جمعه 22 آبان 1388, 21:55 عصر
نمونه رو هم میتونید دانلود کنید.