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

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

با سلام

در آموزش های قبل ساخت منوی کرکره ای با css (بدون نیاز به جاوا اسکریپت!) و آموزش ساخت منوی کرکره ای با جاوا اسکریپت و آموزش ساخت منوی کرکره ای با جی کوئری رو آموزش دادم.

امروز می خوام یک منوی کرکره ای ولی با افکت fade رو آموزش بدم.

این منو بدین صورت است که وقتی کاربر موسشو روی سر منو می بره ، زیر منو ها به آرامی پر رنگ میشن و وقتی موس رو از روی سر منو کنار می بره ، زیر منو ها به آرامی محو میشن. (افکت fade)


آموزش ساخت منوی کرکرهای با افکت زیبای fade با کمک جی کوئری - netnic.ir
خوب برای این کار از توابع خیلی باحال جی کوئری کمک خواهیم گرفت.

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

نوشته شده در تاریخ دوشنبه 17 مهر 1391    | توسط: ح.م    | طبقه بندی: پروژه های کلاینت ساید، آموزش jQuery، پروژه ها و ساخته های خودم،     | نظرات()


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

با سلام
آموزش ساخت منوی کرکره ای با جاوا اسکریپت - netnic.ir
منوی یک سایت بهترین ابزار برای دسترسی سریع کاربر به بخش های مختلف سایت است.

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

  1. با CSS خالی
  2. با جاوا اسکریپت
  3. با جی کوئری
در آموزش های قبل ساخت منوی کرکره ای با css (بدون نیاز به جاوا اسکریپت!) و آموزش ساخت منوی کرکره ای با جاوا اسکریپت رو آموزش دادم.


امروز قراره  منوی کر کره ای رو با جی کوئری بسازیم.


در ادامه قدرت جی کوئری رو خواهید دید.

با دیدن مقالات قبلیم تفاوت کد نویسی ها رو خواهید دید ...

خواهید دید که جی کوئری چقدر کارها رو داینامیک تر و حرفه ای تر کرده ....

  فیلم آموزش کامل جی کوئری (ساده و روان)


نوشته شده در تاریخ سه شنبه 28 شهریور 1391    | توسط: ح.م    | طبقه بندی: پروژه های کلاینت ساید، آموزش jQuery،     | نظرات()


آموزش ساخت منوی کرکره ای با جاوا اسکریپت

با سلام
آموزش ساخت منوی کرکره ای با جاوا اسکریپت - netnic.ir

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

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

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

  1. با CSS خالی
  2. با جاوا اسکریپت
  3. با جی کوئری
در آموزش قبل ساخت منوی کرکره ای با css (بدون نیاز به جاوا اسکریپت!) رو آموزش دادم.

امروز می خوایم با هم یک منوی کرکره ای افقی ساده با CSS بسازیم

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


نوشته شده در تاریخ سه شنبه 7 شهریور 1391    | توسط: ح.م    | طبقه بندی: آموزش کم کم جاوا اسکریپت، پروژه های کلاینت ساید،     | نظرات()


آموزش ساخت منوی کرکره ای با css (بدون نیاز به جاوا اسکریپت!)

با سلام
آموزش ساخت منوی کرکره ای با css (بدون نیاز به جاوا اسکریپت!) - netnic.ir

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

منوی افقی رو به سه صورت می توان ساخت :

  1. با CSS خالی
  2. با جاوا اسکریپت
  3. با جی کوئری
که مورد سوم حرفه ای ترین و بهترین روش است که بسیار انعطاف پذیر هم هست .

امروز می خوایم با هم یک منوی کشویی افقی ساده با CSS بسازیم

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


نوشته شده در تاریخ سه شنبه 7 شهریور 1391    | توسط: ح.م    | طبقه بندی: آموزش طراحی وب و css، پروژه های کلاینت ساید،     | نظرات()


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

با سلام ،
در مقاله قبلی اعتبار سنجی فرم ها با جی کوئری رو آموزش دادم.
آموزش اعتبار سنجی فرم ها با جی کوئری - netnic.ir

در این مقاله به شما یاد میدم که چطوری پیام های خطا رو عوض کنین و پیام مورد نظر خودتون رو نمایش بدین.

به کد زیر توجه کنید :


(کد رو قفل نکردم تا بتونین کپی کنین تو یک نرم افزار متن تا بهتر بتونین بررسیشون کنین)
(کد های بخش script دقیقا مانند قبل است)
همانطور که ملاحظه می کنید ، از طریق بخش class هر یک از تگ های input می توانید ، متن پیام مورد نظر خود را نمایش دهید.

امیدوارم که از این آموزشش هم لذت برده باشید.

در آموزش بعدی ساخت اسلاید شو بوسیله پلاگین jquery.cycle_fader  رو آموزش خواهم داد.

این پلاگین یکی از بهترین و ساده ترین و حرفه ای ترین پلاگین های ساخت اسلاید شو با افکت fade می باشد.

تا درودی دگر ، بدرود
.

نوشته شده در تاریخ یکشنبه 22 مرداد 1391    | توسط: ح.م    | طبقه بندی: آموزش پلاگین های جی کوئری، پروژه های کلاینت ساید،     | نظرات()


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

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

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

در ادامه آموزش اعتبار سنجی فرم ها با جی کوئری یا form validation with jQuery رو آموزش می دهم.

نوشته شده در تاریخ یکشنبه 28 خرداد 1391    | توسط: ح.م    | طبقه بندی: آموزش پلاگین های جی کوئری، آموزش jQuery، پروژه های کلاینت ساید،     | نظرات()


افکت تایپ متن (Text Writer) با جاوا اسکریپت

سایت نت نیک
با سلام

چند باری در سایت دیدم که دوستان در مورد افکتی که در بعضی سایت های برای نمایش اخبار یا حدیث استفاده میکنند , سوال پرسیده بودند .
با بررسی ای که کردم , متوجه شدم یا از
JQuery
استفاده میکنند یا در موارد بسیار نادر , از تصاویر GIF یا Flash هم استفاده میکنند.

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

هم اکنون این آموزش را می توانید در سایت نت نیک مطالعه نمایید

شروع کار :

ببینین ، ایده کلی این افکت که اسمش Text Writer است اینه که یه جمله رو بهش میدین ، بعد میاد حروف رو مرتب می بره و نمایش میده

مثلا بنده عبارت "حمید" رو بهش میدم ، اول میاد حرف اول رو می بره و ( ح ) نشون میده . بعد میاد حرف اول و حرف دوم  رو می بره و ( حم ) رو نشون میده و  الی آخر

برای بریدن از تابع Substring استفاده میشه .

این تابع 2 تا ورودی می گیره . اولی اینکه از کجا شروع به برش کنه (ابتدا) ، و دومی اینکه تا کجا  رو ببره (انتها) ...

فقط کافیه که شما مقدار دومی رو بوسیله یک عدد حلقه (while یا for) از 1 هی یکی یکی زیادش کنین ....

همین :)

* یکی از دوستان پرسیده بود که چطوری این متن رو بصورت لینکی کنیم ؟

حال برای اینکه اینو لینکی کنین .... فقط کافیه که خروجی رو توی خاصیت inner text یک تگ a بریزین

پروژه کامل این قضیه پیوست است.

نکته : شما فقط 2 متغیر اول رو کار دارین (یکی عبارت رو می گیره و دومی زمان رو برحسب میلی ثانیه - زمان بیشتر بشه ، سرعت تایپ کند تر میشه )


دانلود پروژه افکت تایپ متن با جاوا اسکریپت

نوشته شده در تاریخ شنبه 23 اردیبهشت 1391    | توسط: ح.م    | طبقه بندی: پروژه ها و ساخته های خودم، پروژه های کلاینت ساید،     | نظرات()


آموزش ساخت منوی کشویی با جی کوئری

سلام
سایت نت نیک
چند وقت پیش توی سایت یکی از دوستانم یک منوی کشویی دیدم که خیلی نظرم رو جلب کرد

یک منوی افقی که بخش های منو روی هم قرار گرفته بودند و با کلیک روی هر بخش ، منوها کنار می رفتند و بخش مورد نظر نمایان میشد

خلاصه خیلی نظرم رو جلب کرد
همش توی ذهنم از خودم می پرسیدم که چجوری میشه همچین افکتی رو ساخت ؟!

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

امروز یهو به این فکر افتادم که بشینم و صفحه اصلی یک سایت رو کامل طراحی کنم و برای منوهای بالاش از این افکت استفاده کنم.

کلی با توابع ور رفتم تا بالاخره تونستم این منوی فوق العاده زیبا رو خلق کنم


در ادامه خواهید آموخت که چگونه بوسیله  جی کوئری می تونیم این منو رو بسازیم

پیش نیاز : تسلط خوب بر HTML و CSS و آشنایی با جی کوئری

برای تسلط و یادگیری خوب CSS  بنده این مقاله رو پیشنهاد می کنم :

بهترین کتاب فارسی : آموزش CSS _(بسیار کامل-بسیار روان)

برای یادگیری html هم می تونید به اینجا مراجعه کنید.

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

نوشته شده در تاریخ شنبه 16 اردیبهشت 1391    | توسط: ح.م    | طبقه بندی: پروژه های کلاینت ساید، آموزش jQuery، پروژه ها و ساخته های خودم،     | نظرات()