campaign-edianeh-98

دوره مجازی طراحی وب (جلسه 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 دیدگاه کاربران
علی یوسفی replyپاسخ

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

لقمان آوند

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

مازیار

با سلام مجدد
اشکال نداره استاد کیفیت خیلی مهمه …..
از شما تشکر میکنم که اینقدر به کیفیت کار اهمیت میدین…… ❓ ❓ ❓

لقمان آوند

ممنونم
یک ده آباد به از صد شهره خرابه! برای ما مهمترین مسءله حفظ کیفیت هست…

مازیار replyپاسخ

با سلام و عرض ادب
دوست داشتم اولین کسی باشم که از شما تشکر میکنه…..
با سپاس فراوان ❓ ❓ ❓ ❓

لقمان آوند

متشکرم اقا مازیار

زمان الله ابراهیمی replyپاسخ

خیلی ممنون بابت زحمت های شما آقای آوند عزیز خدا قوت ❓ ❓ ❓

لقمان آوند

خواهش می کنم
موفق باشید

nader70 replyپاسخ

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

sadaf replyپاسخ

سلام استاد ممنون به خاطر مطلب فوق العادتون

لقمان آوند

خواهش می کنم
وظیفه است …

افشین زندی

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

لقمان آوند

متشکرم جناب زندی
از رضایتتون خوشحال شدم .
موفق باشید

افشین زندی replyپاسخ

استاد تشکر مجدد بابت این جلسه
چند تا سوال برام پیش اومد که فکر کردم سوال بقیه دوستان هم باشه که اگه جواب بدید ممنون میشم
1- در مورد پلاگین های سی اس اس (مثلا همون دکمه ها) استاد سوالم اینه که وقتی مثلا در یک صفحه وب از دو یا سه تا از این دکمه ها استفاده میشه بهتر این نیست که فقط کلاس همون دکمه هایی که استفاده میشه رو در بیاریم و تو سی اس اس اصلی بذاریم؟
2- استاد گفتید که خوب نیست تعداد درخواست برای پلاگین ها زیاد بشه و فایل های زیادی رو به صفحه اتچ کنیم.سوالم اینه که اگه مثلا 10 تا پلاگین داریم و حجم کلش 100 کیلوبایت میشه نمیتونیم اون 10 تا رو تو یه فایل بذاریم و فقط همون رو اتچ کنیم؟این کار تو اصل موضوع تاثیری میذاره یا نه؟
3- در مورد پلاگین pretty photo : استاد این که اول تصویر بندانگشتی نشون داده میشه و بعد از کلیک تصویر بزرگ نشون داده میشه: آیا اون تصویر بزرگ بعد از کلیک روی تصویر بندانگشتی لود میشه یا همزمان با لود صفحه اونم لود میشه ؟
استاد یه موردم اینکه وقتی داشتید پلاگین دکمه ها رو توضیح میدادید یه قسمتی رو هایلاید کردید و مرورگر اون رو براتون ترجمه کرد.از پلاگین خاصی تو مرورگر استفاده میکنید؟ اگه امکانش هست اون رو معرفی کنید
ببخشید کامنت زیاد شد 😳

لقمان آوند

سلام و ممنون از سوالات خوبی که مطرح کردید .
1- اگر مطمئنید که بقیه استایل ها بدردتون نمی خوره اینکار میتونه مفید باشه و حجم کدهای اضافه رو کم میکنه .
2- اینکار هم مفید هست و خیلی جاها پیشنهاد میشه . خیر اصولا تائیری نداره ولی برای سرعت لود و سئو خوبه .
3- بعد از کلیک لود میشه. چون توی href آدرسش هست و بعد از کلیک توسط جاوااسکریپت در باکس لود میشه که تاثیری روی لود اولیه صفحه وب نداشته باشه .
پلاگیم google-translate برای گوگل کروم هست می تونید نصب کنید. مفید هست .

افشین زندی

ممنون بابت جواب کاملتون

امید فیروزه replyپاسخ

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

لقمان آوند

اسکریپت های آماده ای برای این کار وجود دارند . برای وردپرس هم پلاگین معروف wp-quiz-pro هستش …

امید فیروزه

ممنون

Abbas412 replyپاسخ

سلام جناب آوند
من یه مشکلی دارم
کلا این پلاگین font-awesome با من قهره 🙁
ابتدایی ترین کد ممکن رو نوشتم ولی کار نمیکنه؛ یه مربع توخالی توی صفحه نشون میده؛ مشکل از کجاست؟

http://s6.picofile.com/file/8174410384/106.zip.html

لقمان آوند

باید دقت کنید دقیقا شبیه همون روشی که در آموزش گفتیم استفاده کنید . مکان فایل های css رو درون پوشه این پلاگین تغیر ندید و محتویات دیگه پلاگین رو هم حذف نکنید …

shahriar rad replyپاسخ

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

انشالله این سوالم را جواب بدین

آقای آوند الان اگه بخوایم ما از کتابخانه جاوا استفاده کنیم در جوملا به چه طریق هست؟

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

فایلهایی که باید لینک دهی کنیم کجاست؟ css را کجا وارد کنیم؟ چون شما در index وارد کردین
js و اون تابعی که صدا میزند را کجا وارد کنیم
ممنون میشم پاسخ دهین
با تشکر

لقمان آوند

سلام
حقیقتا من جوملاکار نیستم و علاقه ای هم به این cms ندارم و نمی تونم در این مورد کمکی بکنم . در مورد وردپرس اگر سوالی داشته باشید در خدمتم …

sadaf replyپاسخ

سلام
اگر بخوایم یک فرم ورود به صورت لایت باکس داشته باشیم حتما باید از php درش استفاده کنیم؟
نمیتونیم از ASP استفاده کنیم؟

وحید صالحی

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

امین خلیلی replyپاسخ


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

لقمان آوند

تعریف doctype رو اول صفحه وبتون بزارید حتما . اینو منظورمه :

امین خلیلی replyپاسخ

گذاشتم تو کروم و فایر فاکس کار میکنه ولی تو اکسپلور کار نمیکنه

لقمان آوند

این مطلب رو بخونید . شاید ورژن IE شما ساپورت نکنه …

sadaf replyپاسخ

سلام میشه یک سایت برای اینکه بتونم یک پلاگ این خوب به صورت لایت باکس
برای فرم ثبت نام درست کنم معرفی کنید ممنون

لقمان آوند

این و این مورد گزینه های خوبی هستند .

sadaf

سلام استاد
http://dinbror.dk/bpopup/
این لینکی که دادین برای لایت باکس ازون موردی که ترنزیشن داره و از بالا
به پایین میاد نمیشه استفاده کرد میشه یه راهنمایی درموردش کنید
باور کنید خیلی سعی کردم خودم اما نشد

لقمان آوند

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

میوند replyپاسخ

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

لقمان آوند

خیلی کار جالبی نیست . ولی اگر مطمئنید که هیچ تغیری بعدا تو سورس پلاگین ها نمی خواید بدید می تونید اینکارو هم بکنید . شما تا 7-8 تا رو عیب نداره داشته باشی …

sadaf replyپاسخ

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

وحید صالحی

سلام لایت باکس اضافه شده از کامپوننت های فریم ورک fundation هست که اگر شما قالب سایتتون رو با این فریم ورک پیاده سازی و ریسپانسیو کنید از این لایت باکس میتونید بهره ببرید البته فریم ورک های دیگه مثل بوت استرپ هم چنین لایت باکس یا به عبارتی modal هایی دارند .

mehdi karimi replyپاسخ

سلام استاد
من وقتی از linear-gradient یا box-shadow استفاده میکنم تو یک سری از مرورگر ها یا ورژن های پایین مرورگر ها اصلا کار نمیکنه
آیا اون پلاگین prefix که معرفی کردید این مشکلو حل میکنه ؟ یا راه دیگه ای هست ؟
یه راهنمایی کنید خیلی ممنون میشم

لقمان آوند

خیر حل نمیکنه اگر مرورگری ساپورت نکنه .

مجتبی replyپاسخ

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

لقمان آوند

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

ali ghollamnezhad replyپاسخ

سلام.وقتی که این خط( ) را می نویسم با اینکه فایل پلاگین در این پوشه (libs)قرار دارد اما این فایل را نمی شناسد ,خطای typo:in word ‘prefixfree’ more (ctrl + f) را می دهد اگر امکانش است راهنمایی ام کنید.

لقمان آوند

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

Pouriya replyپاسخ

خیلی جلسه فوق العاده بود
ممنون
استاد چطوری میتونم فایل جی کوئری این سایت رو دانلود کنم؟ با وی پی ان هم تست کردم نشد میگه کشور شما نمیتونه دان کنه
http://livicons.com/#

وحید صالحی

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

امین عزیزی پور replyپاسخ

سلام خسته نباشین
چرا هر کار میکنم پلاگین های prettyphoto و responcsiveslids اعمال نمیشن چند بار آدرس فایل و درستیشون مثل آموزش و مثل اموزش هاای که تو خود سایت ها مرجع گفته شده رو بررسی کردم…
خواهشا کمک کنید..

abbas replyپاسخ

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

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

لقمان آوند

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

esmipour68 replyپاسخ

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

لقمان آوند

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

esmipour68

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

abbas replyپاسخ

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

لقمان آوند

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

abbas replyپاسخ

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

لقمان آوند

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

itone replyپاسخ

سلامی دیگر 😛
استاد اوند توی این جلسه به پلاگین 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 ) 😛 🙂 😀 😯 😉
ممنون بابت راهنمایی خوبتون ببخشید طولانی شد

لقمان آوند

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

مهدی جی اج replyپاسخ

سلام استاد

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

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

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

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

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

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

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

مرسی

لقمان آوند

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

آسیه جعفری replyپاسخ

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

لقمان آوند

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

آسیه جعفری

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

وحید صالحی

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

آسیه جعفری replyپاسخ

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

آسیه جعفری replyپاسخ

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

لقمان آوند

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

آسیه جعفری

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

راضیه حسین ابادی replyپاسخ

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

لقمان آوند

!important رو هم در پدینگتون قرار بدید و چک کنید

راضیه حسین ابادی replyپاسخ

ممکنه راهنمایی بفرمایید؟

لقمان آوند

اگر کدتون رو سمت وب دارید آدرس بدید که یه چک بکنیم.

Esmail Muhmmadzade replyپاسخ

سلام آقای دکتر آوند.
قبل از هر چیزی به خاطر آموزش های خوبتان ازتان سپاسگزارم.
من طبق دستوری که برای استفاده از plugin PrettyPhotoگفته بودید عمل کردم ولی جواب نگرفتم (باکس نمایش داده نشد) اما با خطایابی که داشتم متوجه شدم که این plugin با ورژن jQuery من سازگار نیست (آخرین ورژن jQuery) و بایستی حتما از ورژن های سازگاری که توی خود مستندات این plugin است استفاده کرد.
سوال کلی ام این است که آیا باید از plugin هایی استفاده کرد که محدودیتی در نوع ورژن های jQuery ندارند یا ترفندی برای رفع این قبیل مشکلات وجود دارد.
با آرزوی صحت و سلامتی برای شما و خانواده محترمتان
منتظر جوابتان هستم

فرزانه replyپاسخ

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

لقمان آوند

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

حسین ملهم replyپاسخ

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

لقمان آوند

ارادتمندم جناب دکتر

محمد جواد عالمی replyپاسخ

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

لقمان آوند

سلام
چک کردیم مشکلی نبود جناب عالمی
الان بررسی کنید

ارسال نظرات

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