آموزش جی کوئری در پانزده روز : روز نهم

پنج شنبه, ۲۰ام اسفند , ۱۳۸۸ | ۴۴ دیدگاه

سلام, امیدوارم پست قبلی که ” ۲۰ افکت جی کوئری برای متن ” بود رو دیده باشید چون طبق قولی که در اون پست داده بودم قصد دارم یکی از رایج ترین افکت هایی که در صفحات وب میبینید یعنی بزرگتر و کوچکتر کردن اندازۀ فونت رو بهتون آموزش بدم. فقط خدمتتون عرض کنم که این پست بیشتر از پستهای دیگه می طلبه که جاوا اسکریپت بلد باشین. با اینکه اینجا قراره آموزش جی کوئری داده باشه من تمام تلاشم رو کردم که ساده و مختصراندکی از کدهای جاوا اسکریپت رو هم توضیح بدم. امیدوارم که لذت ببرید.

خب ابتدا متنی تهیه می کنیم و بالای آن یک لینک با آی دی Larger و یک لینک دیگر با آی دی Smaller می سازیم :

<body>
        <a href="#" id="larger">بزرگتر</a>
        <br/>
        <a href="#" id="smaller">کوچکتر</a>
        <p>متن</p>
    </body>

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

$(function() {
	$('a').click(function() {
		var os = $('p').css('font-size');
		var num = parseFloat(os);
	      var uom = os.slice(-2);

		if(this.id == 'larger') {
			$('p').css('font-size', num * 1.4 + uom);
		} else
		      $('p').css('font-size', num / 1.4 + uom);
	})
})

دیگه حتماً بعد از ۸ جلسه با کد function و click آشنا هستید… پس میریم سراغ

		var os = $('p').css('font-size');

var مخفف کلمۀ variable به معنی متغیر هست. Os هم مخفف کلمۀ orginal size هست. در این کد ما فقط قصد داریم که متغیر سایز رو برای پاراگراف یا همون p تعریف کنیم. دقت کنید که ما می تونستیم همینجا سایز پیش فرض رو تعیین کنیم روی مثلاً ۳۰ پیکسل :

var os = $('p').css('font-size' , ‘۳۰px’);

خب سراغ کد بعد میریم :

var num = parseFloat(os);

کسانی که جاوا اسکریپت بلد هستند معنی این کد رو خیلی خوب متوجه میشن. ببینید کار کد parseFloat در اینجا اینه که مقدار اولیه اندازۀ فونت رو میگیره. اینجا os یا سایز اصلی رو میگیره. نوشتن این کد ضروریه چون نیاز داریم تا در کد های بعدی به سایز اصلی کدمون اضافه بشه و باید سایز اصلی با این کد استخراج بشه.

var uom = os.slice(-2);

خب با این کدقصد داریم تا واحد اندازه گیریمون رو مشخص کنیم. Uom مخفف unit of measure هست. Slice هم یک دستور جاوا اسکریپت هست که کلمات یا استرینگ ها رو تفکیک می کنه. ببینید اینجا چون px یا em که واحد های مد نظر ما هستند ۲ حرفی هستند ما از -۲ اسفاده کردیم. یعنی فقط px یاem رو بگیر. برای کسانی که جاوا اسکریپت بلد نیستند و می خوان فعلاً این کد رو بهتر بفهمن پیشنهاد می کنم مثال های اینجا رو ببین.

پس تا حالا با num مقدار فونت و با nom واحد فونت رو مشخص کردیم. حالا میریم سراغ بزرگتر کردن فونت ! ببینید اگر قرار بود فقط قابلیت بزرگتر کردن فونت وجود داشته باشه می تونستیم از کد زیر استفاده کنیم :

$(function() {
	$('a#larger').click(function() {
		var os = $('p').css('font-size');
		var num = parseFloat(os);
	      var uom = os.slice(-2);
		$('p').css('font-size', num * 1.4 + uom);
	})
})

کد بالا به این معنی هست که اگر روی لینک با آی دی larger کلیک کردیم ( با توجه به تعریف num وnom ) ، سایز فونت p رو ضربدر ۱٫۴ کن و واحدش هم بذار کنارش !کافیه این کد رو جایگزین کد فایل های سورسی که دانلود کردید بذارید و نتیجه رو ببینید. می تونید به جای ۱٫۴ از ۲ استفاده کنید. اونوقت با هر کلیک فونت شما ۲ برابر خواهد شد.

شما می تونید دقیقاً یک کد دیگه برای کوچکتر کردن فونت مثل کد بالا بنویسید فقط باید به جای * از / استفاده کنید. یعنی با هر بار کلیک اندازۀ فونت رو تقسیم بر ۱٫۴ کند ! به صورت زیر :


$(function() {
	$('a#smaller').click(function() {
		var os = $('p').css('font-size');
		var num = parseFloat(os);
	      var uom = os.slice(-2);
		$('p').css('font-size', num / 1.4 + uom);
	})
})

ولی ما نمی خوایم ۲ تا کد مثل هم داشته باشیم . می خوایم ببینیم میشه دو تا کد بالا رو با هم تلفیق کرد یا نه. خب سراغ کد اصلی میریم. دوباره می نویسمش :

$(function() {
	$('a').click(function() {
		var os = $('p').css('font-size');
		var num = parseFloat(os);
	      var uom = os.slice(-2);

		if(this.id == 'larger') {
			$('p').css('font-size', num * 1.4 + uom);
		} else
		      $('p').css('font-size', num / 1.4 + uom);
	})
})

ببینید ما می خوایم وقتی روی a با آی دی larger کلیک کردیم فونت بزرگ بشه و در غیر این صورت کوچیک بشه. پس درستش اینه که از یک if و else استفاده کنیم. در کد بالا بعد از if از this.id استفاده کردیم که this اینجا همون a است. یعنی اگر a#larger بود فونت رو ضربدر ۱٫۴ کن و اگر اینطور نبود فونت رو تقسیم بر ۱٫۴ کن !

قسمت اضافی : حالا که فقط دو تا لینک توی صفحه داریم می تونیم باز هم کد رو کوچکتر کنیم :

$(function() {
	$('a').click(function() {
		var os = $('p').css('font-size');
		var num = parseFloat(os);
	      var uom = os.slice(-2);

		$('p').css('font-size', num / 1.4 + uom);
		if(this.id == 'larger') {
			$('p').css('font-size', num * 1.4 + uom);
		}
	})
})

یعنی هر لینکی تو صفحه بود فونت رو چیک کن ولی اگر آی دیش larger بود بزرگش کن ! و چون فقط یک لینک smaller به غیر از larger در صفحا موجود هست پس کد درست کار می کنه.

نمی دونید آموزش از طریق متن و غیر حضوری چقدر برای کسی که می خواد یاد بده و کسی که می خواد یاد بگیره دشواره … واقعاً دوست داشتم برای هر درس فقط یک پادکست تهیه می کردم که توی زمان کمتری توضیح بیشتری هم بدم ولی با سرعت اینترنتی که داریم ممکنه دیدن ویدئو یا دانلود اون برای مخاصب کمی دشوار باشه. به هر حال اگر هدف یادگیریه ممکنه با دوباره خوندن مطلب و کار با سورس فایلهای و مطرح کردن سئوال در کامنتها کارتون آسونتر بشه.

پستهای مرتبط :

آموزش جی کوئری در پانزده روز : روز هشتم

آموزش جی کوئری در پانزده روز : روز هفتم

آموزش جی کوئری در پانزده روز : روز ششم

آموزش جی کوئری در پانزده روز : روز پنجم

آموزش جی کوئری در پانزده روز : روز چهارم

آموزش جی کوئری در پانزده روز : روز سوم

آموزش جی کوئری در پانزده روز : روز دوم

آموزش جی کوئری در پانزده روز : روز اول

مقدمه ای بر آموزش jQuery در ۱۵ روز

Be Sociable, Share!


۴۴ دیدگاه


  1. satropat
    ۲۲ اسفند ۱۳۸۸

    با سلام

    سایت خوب و پر محتوای دارید کلی استفاده کردم …
    ———-
    موفق و پیروز باشید

    امید وارم … که همیشه امیدوار باشید




  2. بهروز
    ۱ فروردین ۱۳۸۹

    لطفا در پایان آموزش ها رو به صورت یک فایل پی دی اف قابل پرینت قرار دهید تا بیشتر استفاده کنیم
    با تشکر




  3. بها
    ۲ فروردین ۱۳۸۹

    مسیح عزیز با تشکر از آموزشای خوبت

    این خط فک کنم باید اصلاح بشه :

    “پس تا حالا با num مقدار فونت و با nom واحد فونت رو مشخص کردیم. ”
    به :
    “پس تا حالا با nom مقدار فونت و با num واحد فونت رو مشخص کردیم. “




  4. جبار اسدی
    ۳ فروردین ۱۳۸۹

    sسلام خسته نباشید یه سوال داشتم شاید زیاد به موضوع مرتبط نباشه . می خواستم بدونم شما این کدها رو چیکارش می کنید که با این استایل زیبا تو صفحتون نمایش داده می شه …. اصولا این کار خودکاره تو بخش نوشتن مطالبتون یا نه در هر صورت چجوری ؟




  5. مهديه
    ۱۴ فروردین ۱۳۸۹

    سلام
    اول این که تشکر می کنم به خاطر مطالب مفیدتون
    دوم این که من هر چی می گردم فریم ورک جی کوئری رو تو سایتتون پیدا نمی کنم
    ای کاش لینکشو می دادین تو سایت
    اگه بهم mail کنین که ممنون می شم.
    در ضمن هرچند الان دیگه دیره اما ای کاش توی متن ها تون از همون اصطلاحات انگلیسی رایج استفاده می کردین. چون این طوری اگه کسی کار کرده بود راحت تر بود. اگر هم کسی کار نکرده بود اشنا می شد.




  6. کامران
    ۱۴ فروردین ۱۳۸۹

    مهدیه جان اگر فایل سورس را دانلود کنی فریم ورک داخلش هست




  7. جبار اسدی
    ۱۷ فروردین ۱۳۸۹

    کامران جان خوبی ؟؟؟ چرا جواب مارو نمی دی قربونت برم ؟؟؟؟ اینجام تبعیض…… 🙂




  8. کامران
    ۱۷ فروردین ۱۳۸۹

    من نباید جواب بدم اینجا بخش مسیح و اون باید جواب بده




  9. سپیده
    ۲۴ فروردین ۱۳۸۹

    با سلام
    ————————————————————————————
    من تمام پستهاتونو خوندم و بی صبرانه منتظر پستهای بعدی تون هستم. ممنون میشم اگر زودتر پستهای جدیدتونو بزارین




  10. یکتا
    ۲۹ فروردین ۱۳۸۹

    سلام
    ممنون بابت آموزش های خوبتون
    یه سوال دارم:
    من از جی کوئری برای نمایش اطلاعات صفحات داخلیم در مستر پیج استفاده کردم، و برای نمایش عکسهای گالری هم از جی کوئری استفاده کردم؛ وقتی صفحه گالری داخل مستجر پیج نمایش داده میشه افکت هاش کار نمیکنه، باید چیکار کنم؟!
    (گالری به صورت جدا تست شده و مشکلی نداره)

    با تشکر




  11. نام (لازم)
    ۱۰ اردیبهشت ۱۳۸۹

    چرا رو جلسه نهم متوقف شدین ادامه نمیدین دیگه ؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟




  12. مسيح
    ۱۱ اردیبهشت ۱۳۸۹

    :: satropat : خیلی ممنونم.
    :: بهروز : خوشحالم که اینجا سر می زنی بهروز. حتماً این کار رو می کنم + تمام سورس فایل ها
    :: بها : خواهش می کنم. مرسی . اصلاح می کنم
    :: جبار اسدی : با عرض پوزش که دیر شد. باید پلاگین SytnaxHighLighter رو برای وردپرس نصب کنید تا کدها به این صورت نمایش داده بشه.
    :: مهدیه : منظورت رو از اصطلاحات رایج انگلیسی متوجه نمیشم ؟
    :: سپیده : یه مقدار مشکل باعث بد قولیه من شد . انشاا… از این هفته طبق روال سابق پیش خواهیم رفت.
    :: یکتا :‌ گاهی اوقات ورژن های مختلف جی کوئری با هم مشکل ایجاد میکنن. اگه می تونید برای من لینک اسلاید شویی که استفاده می کنید و پلاگینی که در صفحتون هست رو اینجا بنوییسد.




  13. محسن
    ۱۶ اردیبهشت ۱۳۸۹

    دوست عزیز خیلی خوشحالم از این که با وبسایت شما آشنا شدم .
    یه آموزش هم در مورد jquery من نوشتم که در ۹ فصل آماده شده .
    گفتم شاید بدردتون بخوره .
    اینم لینک دانلودش :
    http://blog.monavarian.ir/computer/web-design/jquery-learning-farsi/147




  14. يكتا
    ۱ خرداد ۱۳۸۹

    سلام
    ممنون از جوابتون
    خب من از پلاگین http://jquery.malsup.com/cycle برای نمایش تصاویرم استفاده کردم و برای نمایش صفحات هم از تابع load ولی همزمان نمیتونن کار کنن:(
    ممنون میشم راهنمایی کنید




  15. Arash
    ۲ خرداد ۱۳۸۹

    با سلام خدمته دوستان عزیز و مسیح عزیز -و تشکر از مطالبی که گذاشتید

    میخواستم ببینم ادامه نمیخواهید بدهید ؟

    ما منتظر مطالب پر بار شما هستیم




  16. حمید رضا
    ۵ خرداد ۱۳۸۹

    مطالب بسیار جالب و مفید هستند و واقعا دنبال کردن دارن :دی
    مرسی مسیح جان از وقتی که می زاری




  17. Alir3z4
    ۱۹ خرداد ۱۳۸۹

    سلام
    امروز من از قسمت اول تا اینجا دانلود کردم
    و میدونم کاملا با ملایمت آموزش دادی
    من خیلی به جی کویری علاقه دارم …!
    امیدوارم با قدرت به کارت ادامه بدی..
    از همین الان منتظر آموزش جی کویری درس سطح پیشرفته هستم..!
    امیدوارم در برنامه کاریت باشه!
    علی یارت




  18. نیلوفر
    ۲۱ مرداد ۱۳۸۹

    امیدوارم هیچ مشکلی براتون پیش نیاد تا آموزش سریعتر پیش بره
    براتون آرزوی موفقیت می کنم




  19. کوروش
    ۳ شهریور ۱۳۸۹

    از شما متشکرم




  20. سعیده
    ۱۴ شهریور ۱۳۸۹

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




  21. mosy
    ۵ آبان ۱۳۸۹

    مسیح جان تو که رشتت ربطی به کامبیوتر نداشت(مثل خودم) ازچه زمانی وارد این وادی شدی.




  22. مهرداد
    ۱۱ آبان ۱۳۸۹

    دوست عزیز
    ضمن تشکر از بزرگواری شما

    میخواستم ببینم اموزشتون رو ادامه نمیدید ؟




  23. جواد
    ۱۵ آذر ۱۳۸۹

    سلام
    از آموزش تان متشکرم




  24. حمیدرضا
    ۱۳ دی ۱۳۸۹

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




  25. سعید
    ۱۲ بهمن ۱۳۸۹

    یک سال گذشت نمی خوای ادامه بدی؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟




  26. ساناز
    ۲۳ بهمن ۱۳۸۹

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




  27. محمد حسام
    ۲۶ بهمن ۱۳۸۹

    سلام.ممنون از آموزش خوبتون.یه سوال دارم؟میشه با جی کوئری یه افکت درست کرد که وقتی روی یه متن مثلا “ورود به سایت” کلیک میشه یدونه div باز بشه بطوری که نصف اون به سمت بالا و نصف دیگش یه سمت پایین باز شه ؟؟
    ممنون



دیدگاه خود را بنویسید