دوره مجازی طراحی وب (جلسه 17): آشنایی با جی کوئری، کار با پلاگین های jquery و CSS

- visibility ۶۷ mode_comment

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

عموم مطلب مطرح شده در این جلسه :

  • معرفی یک سایت و ابزار برای بررسی قابلیت های پشتیبانی شده در مرورگرهای مختلف
  • توضیح کلی در مورد نحوه کدنویسی جاوااسکریپت
  • ذکر یک مثال جاوااسکریپت برای مخفی سازی پاراگراف با کلیک روی دکمه
  • آشنایی با جی کوئری و قواعد نوشتاری آن
  • ذکر مثال معادل جی کوئری برای مخفی سازی پاراگراف با کلیک روی دکمه و نمایش تفاوت دو مثال
  • ذکر مزیت های jquery نسبت به جاوااسکریپت خالص
  • ایا برای کار با جی کوئری حتما یادگیری جاوااسکریپت ضروریست ؟
  • آموزش روش کار و استفاده از پلاگین ها و کتابخانه های جی کوئری و  CSS
  • استفاده از پلاگین ها در بطن پروژه جلسه 15 برای کاربردی بودن آموزش ها
  • آموزش نحوه جستجوی برای یافتن پلاگین های مفید جی کوئری و  CSS
  • نکات مهمی در مورد استفاده از پلاگین ها
  • چه زمانی از پلاگین ها استفاده کنیم و چه زمانی خودمان کدنویسی کنیم؟
  • آموزش کامل استفاده از 6 پلاگین کاربری (دانلود، مطالعه اسناد کمکی، نصب و استفاده)
  • پلاگین prefixfree : رهایی از بند ویژگی های پیشوندی مرورگرهای مختلف
  • پلاگین buttons.css : ایجاد دکمه های زیبا و متنوع به راحتی هر چه تمامتر
  • پلاگین hint.css : ایجاد تولتیپ های متنوع و قابل تنظیم
  • پلاگین fontAwesome : پلاگین و مجموعه عظیمی از آیکن های مورد استفاده در صفحات وب
  • پلاگین PrettyPhoto : پلاگینی جذاب و زیبا برای نمایش lightbox با ظاهری شیک
  • پلاگین ResponsiveSlides : پلاگینی کم حجم و کارا برای ایجاد اسلایدرهای واکنشگرا
  • آموزش نحوه استفاده از تنظیمات پلاگین ها
  • آموزش شخصی سازی دکمه های اسلایدر برای سازگاری با قالب و ایجاد ظاهر بهتر و شکیل تر
info توجه

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

ثبت نام در دوره آموزش طراحی وب

comment دیدگاه کاربران
abbas

سلام خسته نباسید…من بعضی از پلاگین ها مخصوصا responsiveslides.js نمیشناسه….در واقع

این دو کد پیش نیازهای این پلاگین است با دقت بسیار زیادی هم ادرس دهی هم میکنم …حالا نمیدونم چرا این پلاگین ها رو نمیشناسه…..
کلا نه پلاگینresponsiveslides و نه پلاگین prefixfree نمیشه ازش استفاده کنم…ممنون میشم اگه کمک کنید

لقمان آوند

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

esmipour68

سلام خسته نباشید:
هنگام کار با پلاگین prettyphoto و کلیک بر روی عکس مورد نظر اصلا پلاگین اجرا نمیشه و وقتی روی عکس کلیک میکنم به آدرس صفحه عکس میره و از اونجا عکس لود و در صفحه نمایش داده میشه، برای حل مشکل باید چیکار کرد؟؟

لقمان آوند

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

esmipour68

مشکل حل شد، از خود فایل jQuery بود چون از وب سایتشون دانلود کرده بودم!!!!!

abbas

سلام استاد..از فایل های کتابخانه ای که شما قرار دادین هم مشکلم حل نشد… حتی دوباره فایل ها رو خودم هم دانلود کردم فایده ای نداشت ….اصلا هیچ فایل جی کوئری رو نمیشناسه حتی phpstorm رو حذف و دوباره نصب کردم و تیک js. رو هم فعال کردم اما اصلا فایل های js رو نمیشناسه..کد jquery.min.js رو هم وارد کردم …
.ممنون میشم اگه راهنمایی کنید

لقمان آوند

کدهایی که ما نوشتیم هم همین مشکلو دارن یا نه؟
همه فایلاتون رو زیپ کنید برام ایمیل کنید بررسی می کنم

abbas

استاد میشه تاریخ انقضا نرم افزار phpstorm تموم شده باشه چون من 30 روزه ازش استفاده کردم نمیدونستم چجوری واسه همیشه فعالش کنم..در واقع این ربطی داره؟ چون با htmlpad پلاگین ها جی کوئری رو میشناسه…..اگه ربط داره….چجوری میشه تاریخ انقضا ی phpstorm رو همیشگی کرد…ممنونم

لقمان آوند

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

itone

سلامی دیگر 😛
استاد اوند توی این جلسه به پلاگین responsive slider اشاره کردید
استاد موقعی که pager رو توی پلاگین فعال میکنیم نمیشه خود اون عکس رو بهجای اون بگذاریم
میشه راهنماییم کنین که چی کار باید بکنم ؟؟
و میخام موقعی که
class
li.rslides_here
فعال شد همون عکس کثلا opacyty 0.5 باشه
مرحله دوم رو که به لطف شما میدونم چیکار کنم فقط میخام ببینم pager که توی ئلاگین فعال شد من نمیخام عدد باشه میخام همون عکسی که لینک شده بیاد

مثل این اسلایدر ….
http://dl.hamyarwp.com/2016/06/fitclub-kufi-hamyarwp-v1.0.jpeg

یه سوال دیگه هم هست ببخشید … 😛 😛 😛 😆
خیلی کوتاه مفید و مختصر (لایو ایکون ها بهتره یا font awsome ) 😛 🙂 😀 😯 😉
ممنون بابت راهنمایی خوبتون ببخشید طولانی شد

لقمان آوند

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

مهدی جی اج

سلام استاد

ممنون بابت آموزش خوب و مفهمومیتون

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

فرمودید که nav:true بگذاریم و استایل دهی کنیم

کاری که من میخام بکنم اینه که با استاده از اون پلاگین fontawesome بیام بجای کمه های previus و next شکلک بجاشون بزارم

با استفاده از inspect element میتونم این کارو انجام بدم و مشکلی ندارم
اما اگه بخام واقعا اینکارو بکنم چیکار باید بکنم ؟
میدونم باید کلاسهای شکلکها رو به المنتم اضافه کنم اما چجوری؟

المنت من با استفاده از جی کویری در سورسم نوشته میشه و بصورت معمول هیچ المنتی در رابطه با اون ندارم

ممنون میشم راهنمایی کنید

مرسی

لقمان آوند

سلام
کاری نداره که …
با جی کوئری یه تگ اضافه کنید که کلاس های مربوط به دکمه های fontAwesome رو داشته باشه!

آسیه جعفری

سلام خسته نباشید ببخشید خواستم ببینم میشه یه نرم افزاری که بتونیم اسلایدرمون رو داخلش ایجاد کنیم و بعد سورس کدش رو بگیریم که فقط با html و css ایجاد شود مثل wow sliderو در همه مروگرها هم ساپرت بشه معرفی کنید

لقمان آوند

بله پلاگین های جی کوئری زیادی وجود داره. این موارد رو ببینید.

آسیه جعفری

نمیخوام از پلاگین استفاده کنم در واقع میخوام ازش یاد بگیرم که چطور میتونم فقط با html و css یک اسلایدر ریسپانسیو و بهینه داشته باشم البته همراه با دکمه های کنترلی

وحید صالحی

برای ایم مورد باید به css ,html و جاوااسکریپت مسلط باشید در ضمن وقتی این همه چلاگین رایگان هست نیازی به کدنویسی از ابتدا نیست

آسیه جعفری

من یه نرم افزاری دانلود کردم از این سایت ولی نمیدونم چطور کدش رو بگیرم این هم آدرس سایت http://cssslider.com/non-jquery-slider-1.html

آسیه جعفری

ازم registeration key میخواد که نمیدونم باید از کجا بیارمش میشه خواهش کنم راهنماییم کنید؟

لقمان آوند

سلام
گویا رایگان نیست و برای همین key می خواد

آسیه جعفری

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2 3