loading...

ابزارها قالب

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

تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
آخرین ارسال های انجمن
حمیدرضا بازدید : 1153 سه شنبه 28 ارديبهشت 1395 نظرات (0)

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

شکل کلی تابع animate

<<<code>>>

$(selector).animate( { "cssProperty":value , ... }, animationTime ); // time is in milisecond

<<</code>>>

برای دیدن مواردی استفاده ی این تابع به ادامه ی مطلب بروید.

حمیدرضا بازدید : 1912 چهارشنبه 30 دي 1394 نظرات (1)

من قبلا در مطلب توابع انیمیشنی جی کوئری درباره ی تابع های موجود در جی کوئری برای ایجاد انیمیشن های ساده توضیح داده بودم. اما به تازگی یکی از کاربران سوالی در مورد نوعی انیمیشن پرسید که مربوط به slide ها می شد. (یعنی slideUp , slideDown , slideToggle)

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


برای مشاهده ی مطلب به طور کامل به ادامه ی مطلب بروید.

 

حمیدرضا بازدید : 4869 چهارشنبه 25 شهريور 1394 نظرات (3)

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

افزونه ی wow

اگر این نمونه را ببینید منظور من را به خوبی می فهمید. خب! شروع می کنیم. اول یک کد html را می نویسیم.

آموزش در ادامه ی مطلب

حمیدرضا بازدید : 2623 پنجشنبه 24 ارديبهشت 1394 نظرات (3)

حتما شما هم تا به حال با صفحاتی که تصویر پس زمینه ی آن ها به نسبت حرکت اسکرول (scroll) ، حرکت می کند روبرو شده اید. این صفحات با یک رویداد از jquery به نام scroll کار می کنند. این رویداد هنگامی است که کاربر ، صفحه را به سمت بالا و پایین و یا چپ و راست می برد (یعنی اسکرول را حرکت می دهد). حال اگر ما با استفاده از این رویداد ، حالتی را ایجاد کنیم که همزمان با بالا و پایین رفتن صفحه ، پس زمینه ی ما نیز مقدار حرکت کند ، می تواند حالت زیبایی به صفحه ی ما بدهد. شاید درست متوجه نشده باشید: در حالتی که پس زمینه ی ما با استفاده از css در حالت fixed قرار داده شده است ، پس زمینه هیچ حرکتی نمی کند و همیشه در جالی خود ثابت است. و هنگامی هم که پس زمینه با استفاده از css در حالت scroll قرار داده شده است ، پس زمینه کاملا هم سرعت و هم زمان با حرکت اسکرول ، حرکت می کند. اما چیزی که ما می خواهیم در اصل یک حالت بین این دو حالت است. یعنی حرکتی نه به سرعت scroll و نه به ثابتی fixed. این حالت در زیبایی صفحه کمک زیادی می کند.

اول این نمونه را برای درک بهتر ببینید

حمیدرضا بازدید : 2479 شنبه 12 ارديبهشت 1394 نظرات (0)

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

آژاکس (ajax) یکی تئوری جدید در وب است که کمک می کند ، اطلاعات از صفحه ای بارگذاری شوند بدون این که صفحه دوباره بارگذاری شود. اگر دقت کرده باشید ، بعضی وقت ها ، هنگامی که می خواهید از فرم ثبت نامی در یک سایت استفاده کنید ، بعد از هر بار وارد کردن اطلاعات و زدن تایید ، صفحه یک بار رفرش می شود و پیغامی (ثبت نام موفقیت آمیز بود ، آدرس ایمیل اشتباه است و ...) به شما نمایش داده می شود. اما این وضع در سایت هایی که از آژاکس استفاده می کنند کاملا متفاوت است. شما اطلاعاتتان را وارد می کنید و دکمه ی تایید را می زنید ، اما صفحه بدون این که رفرش شود پیغام مورد نظر را نمایش می دهد. این حالت در صفحات وب بسیار ارزشمند است. چرا که شما می توانید با این کار ، بدون این که اطلاعات زیادی از صفحه را دوباره لود کنید ، پاسخ سرور را به کاربرتان نمایش دهید. در بسیاری از موارد ، پاسخ مورد نظر شما که باید به کاربر نمایش داده شود ، تنها به اندازه یک خط نوشته است. پس این موضوع می تواند در بالا بردن سرعت هاست شما و رضایت کاربرانتان تاثیر بسیاری داشته باشد.

حمیدرضا بازدید : 1282 پنجشنبه 27 فروردين 1394 نظرات (0)

در این مطلب توابع مربوط به نمایش و پنهان کردن جی کوئری با انیمیشن به همراه توضیحات قرار داده شده است.

مواردی که علامت ستاره (*) در کنار آن ها درج شده است ، توضیح بیشتری در پایین جدول دارند.

برای دیدن آموزش به ادامه ی مطلب بروید.

ابزارهای خاص
جعبه ی پیوند لینک کوتاه کن رایگان ارزیابی آنلاین سایت و وبلاگ به صورت رایگان
تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
تبلیغات متنی
درباره ما
لوگوی ابزارها قالب
سایت ابزارها قالب برای خاص بودن آفریده شده است. به امید این که خاص ترین باشیم.
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • تبلیغات
    تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده

    آمار سایت
  • کل مطالب : 215
  • کل نظرات : 269
  • افراد آنلاین : 1
  • تعداد اعضا : 3195
  • آی پی امروز : 29
  • آی پی دیروز : 94
  • بازدید امروز : 153
  • باردید دیروز : 191
  • گوگل امروز : 2
  • گوگل دیروز : 9
  • بازدید هفته : 944
  • بازدید ماه : 9,441
  • بازدید سال : 100,811
  • بازدید کلی : 1,787,246
  • کدهای اختصاصی
    یادبود 175 شهید غواص
    یادبود 175 شهید غواص