تبلیغات
مقالات آموزشی برنامه نویسی و شبکه - مطالب آموزش jQuery

آموزش جی کوئری به زبان ساده_درس نهم

آموزش جی کوئری درس 9: استفاده از دستور this در جی کوئری
امروز می خوایم با همدیگه یکم شیطونی کنیم و یه بازی عجیب غریب با جی کوئری انجام بدیم
در این بازی ما 4 تا تگ div داریم که با css اونارو روی همدیگه انداخته ایم. (مشابه تصویر زیر)

مقالات آموزشی دانشجویی برنامه نویسی و الکترونیک و شبکه
برای این کار ابتدا باید داخل تگ body صفحمون 4 تا تگ div اضافه کنیم و بهشون آی دی بدیم:


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

همانطور که می دانید ، برای اینکه بتونیم چند تا تگ رو روی همدیگه بندازیم باید از دستور position که یکی از دستورات پر کاربرد css است استفاده کنیم.
در صورتی که css تون ضعیفه پیشنهاد می کنم ابتدا این کتاب آموزش css رو بخونین؛ سپس مجموعه مقالات آموزش تکنیک های css بنده رو مطالعه نمایید.

کدهای استایل من اینطوریه:


استایلی که به body دادم زیاد مهم نیست و فقط برای اینه که div هام وسط صفحه نمایش داده بشن و در کل چیز خاصی نیست.
برای اینکه ترتیب قرار گرفتن تگ هام دقیقا بر اساس ترتیب نوشتن تگ های div ام باشه ، z-index همه رو یکسان مقدار دهی کرده ام، بدین ترتیب تگی که آخر باشه روی همه قرار می گیره و تگی که اول از همه نوشته شده باشه زیر همه قرار می گیره. (دقت کنین که در html ترتیب نوشتن تگ ها بسیار مهمه و بعنوان مثال در اینجا اگر تگ div2 رو آخر می نوشتم ، روی همه قرار می گرفت ... پس همیشه حین طراحی قالب پروژه هاتون این نکته مهم رو در نظر داشته باشید)

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

نکته: برای اینکه یک تگ روی بقیه قرار بگیره ، کافیه که مقدار z-index اون بیشتر از بقیه باشه.
پس داریم:


کد بالا چند نکته دارد:
  1. ابتدا برای رویداد کلیک همه تگ های div یک تابع می نویسیم. این تابع هر بار که روی یک div کلیک شود اجرا می گردد.
  2. درون تابعی که نوشتیم به کمک دستور this می توانیم به تگی که موجب اجرا شدن تابعمان شده است دست یابیم که در اینجا همان تگی است که رویش کلیک شده است.
  3. ابتدا خصوصیت z-index همه تگ هایمان را به حالت اولیه بر می گردانیم و سپس مقدار خصوصیت z-index تگی که رویش کلیک شده است را به یک عدد بیشتر (مثلا 2) تغییر می دهیم.
  4. مقدار متن داخل همه تگ ها را نیز با کمک دستور ()html خالی می کنیم.
  5. در آموزش قبلی دستور css را آموزش دادیم و برای تغییر دادن استایل تگ ها از آن بهره بردیم. اگر این دستور را با یک ورودی استفاده نماییم ، می توانیم استایل های مختلف تگ مورد نظرمان را بخوانیم (گرفتن اطلاعات استایل یک تگ)
  6. برای ساده تر شدن کدهایمان ، ابتدا یک متغیر به کمک دستور کلیدی var ساخته ایم و سپس مقدار خصوصیت background-color تگی که رویش کلیک شده است را درون متغیرمان ریخته ایم
  7. برای نمایش کد رنگ ، از دستور جی کوئری ()html کمک گرفته ایم و بعنوان ورودی متنی که می خواهیم درون تگ نمایش یابد را به آن داده ایم که در اینجا همان متغیرمان است.
امیدوارم این بازی رو بسازید و ازش لذت ببرید.
موفق باشید.
سایت نت نیک = آموزش به زبان ساده ساده ساده

نوشته شده در تاریخ سه شنبه 26 فروردین 1393    | توسط: ح.م    | طبقه بندی: آموزش jQuery،     | نظرات()


آموزش جی کوئری به زبان ساده_درس هشتم

آموزش جی کوئری درس 8: دستکاری استایل تگ ها

در جی کوئری به وسیله تابع css می توان بصورت مستقیم استایل تگ های داخل صفحه را دستکاری نمود.

بعنوان مثال من می خواهم همه لینک های داخل صفحه ام به رنگ قرمز در آیند، برای این کار کافی است در زمان لود شدن صفحه همه تگ های a داخل صفحه را انتخاب و رنگ آنها را با کمک تابع css به رنگ قرمز در بیاورم.


ملاحضه می نمایید که کار بسیار آسان است؛ کافی است پس از لود شدن کامل صفحه، کلیه تگ های a را انتخاب و رنگ آنها را عوض نماییم.

مقالات آموزشی دانشجویی برنامه نویسی و الکترونیک و شبکه

تغییر چندین استایل در جی کوئری:
تابع css این امکان را دارد که یهو چندین استایل رو یکجا باهاش تغییر بدیم :


موفق باشید.
نت نیک: آموزش به زبان ساده ساده

نوشته شده در تاریخ سه شنبه 1 بهمن 1392    | توسط: ح.م    | طبقه بندی: آموزش jQuery،     | نظرات()


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

با سلام، فرم ها بخش مهمی از سایت ها می باشند . در سایت های فروشگاهی و مالی - حسابداری که با ارقام سرو کار دارند، با گذاشتن تکست باکسی که ارقام رو سه رقم سه رقم جدا کنه می تونین لذت کار با سایت رو به مشتریاتون هدیه بدید :)

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

خوب طبق روال ابتدا باید کتابخونه جی کوئری رو به پروژتون اضافه کنین (اگر با این مورد آشنا نیستید به بخش موضوعات و گزینه "آموزش جی کوئری" مراجعه کنین)

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


به همین سادگی ...
دقت کنین که اگر به جای input دارین از کنترل TextBox خود asp.net استفاده می کنین ، باید حتما خصوصیت ClientIDMode اونو برابر با Static قرار بدین تا آی دی طرف کلاینت همون آی دی طرف سرور بشه. (وگرنه آی دی طرف کلاینتتون ممکنه به چیزی شبیه به Content_NetNic یا یه چیز عجیب تر تبدیل بشه!)

در آموزش بعدی نحوه ایجاد تکست باکس فارسی (فقط بشه توش فارسی بنویسیم) با ASP.Net Expression Validator رو یاد میدم...
موفق باشید

نوشته شده در تاریخ چهارشنبه 1 آبان 1392    | توسط: ح.م    | طبقه بندی: آموزش ASP.NET، آموزش jQuery،     | نظرات()


آموزش جی کوئری به زبان ساده_درس هفتم

آموزش جی کوئری درس 7: حرکت عناصر صفحه با جی کوئری


تابع animate یکی از جذاب ترین توابع جی کوئری است.

کار این تابع اینه که 3 تا ورودی می گیره که اولی یکی از خصوصیات css تگ مورد نظرتونه و دومی مقدار نهایی خصوصیت css است و در نهایت سرعت رسیدن به مقدار نهایی رو مشخص می کنین.

مثلا:
با فرض اینکه ارتفاع تگ من 200 پیکسل باشه :

در کد بالا من مشخص کرده ام که ارتفاع تگ مورد نظرمو کم کم به مقدار 0 برسونه ، بدین صورت کد من مثل تابع slideUp عمل می کنه


حال اگر کدمو به شکل زیر تغییر بدم :


دستور بالا عملکردی متفاوت خواهد داشت ، یعنی کم کم ارتفاع تگ منو از مقدار اصلیش (که مثلا اینجا 200 پیکسله) به مقدار 300 پیکسل می رسونه.

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

نوشته شده در تاریخ جمعه 14 تیر 1392    | توسط: ح.م    | طبقه بندی: آموزش jQuery،     | نظرات()


آموزش جی کوئری به زبان ساده_درس ششم

آموزش جی کوئری درس 6 : جمع و باز کردن یک عنصر (تگ) با جی کوئری:

* برای این کار از توابع slideUp و slideDown استفاده میشه

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



این دستور تگ مورد نظر رو جمع می کنه (ارتفاعش هی کم و کمتر میشه) تا جایی که کاملا تگ غیب بشه. (ارتفاعش 0 میشه)



این دستور تگی که غیب هست (باید یک استایل display:none بهش بدین که در حالت عادی که صفحه لود میشه غیب باشه) رو کم کم باز می کنه (ارتفاعش از 0 هی زیاد میشه) تا جایی که تگ کامل باز میشه (ارتفاعش به ارتفاع خود تگ برسه، یعنی چیزی که توی استایل تگ ست کردین)

عددی که در ورودی  به این توابع میدم (مقدار 2000) زمان به میلی ثانیه است ، بدین معنی که کل عملیات باز شدن باید 2000 میلی ثانیه طول بکشه، یعنی در اینجا کلا 2 ثانیه طول می کشه که کل تگم باز بشه.
به جای دادن عدد می تونین از عبارت هایی مثل fast و slow و normal هم استفاده کنین.

سایت آموزشی نت نیک

نت نیک : آموزش انواع تکنولوژی ها به زبانی کاملا ساده

نوشته شده در تاریخ جمعه 14 تیر 1392    | توسط: ح.م    | طبقه بندی: آموزش jQuery،     | نظرات()


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

آموزش جی کوئری درس 5: محو کردن عناصر با جی کوئری!

* محو کردن عناصر با توابع fadeOut و آشکار کردنش با تابع fadeIn :

برای اینکه تگتون کم کم کمرنگ بشه و به قول خودمونی ترش محو بشه :



=>> برای اینکه بهتر کدهای منو درک کنین ، کد کل صفحه تستم رو اینجا میزارم:


دقت کنین که من در اینجا کد استایل display:none رو به تگم اضافه کرد هام که در حالت عادی که صفحه لود میشه ، تگ من مخفی باشه .

توابع fadeIn و fadeOut ورودی هایی مانند slow و fast هم می تونن بگیرن. (تقریبا اکثر توابع جی کوئری مقادیر fast و slow و مقدار عددی به ثانیه می تونن بگیرن)

سایت نت نیک

* اجرای یک دستور پس از اتمام عملیات دستورات fadeIn و fadeOut :

این دستورات این امکان رو دارند که پس از اینکه کارشون تموم شد ، یک تابعی رو اجرا کنن.


نوشته شده در تاریخ جمعه 14 تیر 1392    | توسط: ح.م    | طبقه بندی: آموزش jQuery،     | نظرات()


آموزش جی کوئری به زبان ساده_درس چهارم

آموزش جی کوئری درس 4: غیب کردن عناصر با جی کوئری

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

تاز ه از اینجا به بعدشه که شعبده بازی رو یادتون میدم

* غیب کردن یک تگ با استفاده از تابع hide و آشکار کردنش با تابع show انجام میشه


فرض کنین که من یک تگ div رو می خوام غیب کنم.
در این حالت باید کدی بنویسم که وقتی صفحه کامل لود شد ، تگ مورد نظر رو بگیره (با سلکتور) و بعد غیبش کنه (با یکی از توابع جی کوئری)



خوب به همین راحتی توی 3 خط من این کارو انجام دادم!

سایت آموزشی نت نیک

نوشته شده در تاریخ جمعه 14 تیر 1392    | توسط: ح.م    | طبقه بندی: آموزش jQuery،     | نظرات()


آموزش جی کوئری به زبان ساده_درس سوم

آموزش جی کوئری درس 3 : ارور ! تگ مورد نظر پیدا نشد!

همانطور که می دانید ، صفحات وب از بالا به پایین لود می شوند و از اونجایی که ما همیشه طبق استاندارد w3 (سازمان استاندارد سازی وب) کد های جاوا اسکریپت (دستورات جی کوئری از جاو ااسکریپت مشتق می شوند) رو داخل تگ head می نویسیم ، کدهای جاوا اسکریپت ما قبل از لود شدن تگ های html صفحه اجرا میشن.

بنابراین اگر شما کدی نوشته باشین که یه بلایی سر یه تگ html بیاره ، با اروری مواجه خواهید شد که معنیش اینه که تگ مورد نظر رو پیدا نکرده!

خوب بنده خدا راست هم میگه ، چون رمانی که کد جی کوئری شما داره اجرا میشه ، تگ html ای در کار نیست که بخواد یه بلایی سرش بیاره!
سایت نت نیک
در جاوا اسکریپت هم همین مشکل رو داریم که در اونجا این کارو می کردیم:


در جی کوئری ما این کارو می کنیم :


نوشته شده در تاریخ جمعه 14 تیر 1392    | توسط: ح.م    | طبقه بندی: آموزش jQuery،     | نظرات()