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

البته این یه ماه و اندی اتفاقاتی افتاد که یکیشون هم طراحی مجدد سایت پرسینا بود که از اخرین متدهای روز برای طراحیش استفاده شده و با توجه به برنامه های شرکت احتمالا جزو بهترین وبسایتهای فروش انلاین هاست و دامین خواهد شد… از این که بگذریم این یه مدته که سرم خلوت شده سعی میکنم هر روز یه پست یا اموزش خوب از تجربیات! و معلوماتم بذارم که به درد همه بخوره…….
امروز میخوام یه افکت قشنگj-query رو با یا پنل ساده قاطی کنم ببینیم چی میشه!!…….

اموزشهایی که من در مورد j-query خواهم نوشت به فهم اولیه از کد نویسی این کتابخونه جاوا احتیاج داره….پس بهتره اول یه چیزایی از کدنویسیش رو یاد بگیرید بعد بیاید اینجا تا افکتهارو کاملا متوجه بشید…..اموزشهایی که مسیح شروع کرده نسبتا خوبه که میتونید از اونجا اشناییتون رو با این زبان اغاز کنید

احتمالا این افکت رو در وبسایتهای مبتنی بر وب ۲ دیدید……اگه ندید امروز خواهید دید!!خب همونجور که میدونید برای لینک کردن کتابخونمون از این که کد استفاده مکنید و کدهای جی کوئری هم در ادامشون قرار مگیرن

برای اینکه تمام کدها یه جا باشن من css رو هم داخل index نوشتم…..البته یادتون باشه که این کار توی پروژه های بزرگ یا کارای معمولی باعث کند شدن وبسایتتون میشه پس اصلا همچین اشتباهی رو مرتکب نشید!

فکر نمیکنم برای کدهای css لازم باشه توضیحی بدم….ولی در بین توضیحا کدهای jquery مختصری هم از کلاسهامون میگم.در قسمت اول از کلمه کلیدی .ready استفاده کردم که هروقت فانکشن های اماده بودن برای اجرا به کدشون بپردازه.

همونطور که توی شکل زیر میبینید از شناسه panel برای صفحه باز شونده و ازکلاس btn-slide برای دکمه باز شونده استفاده کریدم. توی کدمون به btn-slide اشاره میکنیم که هر وقت کلیکی بروش انجام شده مراحل زیرو انجام بده :

۱٫برای panel از .slideToggle استفاده میکنیم که خودش به خودی خود دو گزینه up وdown رو شامل میشه پس دو کار بالا و پایین رفتن پنل به راحتی با یه کلیک انجام میگیره و همچین از قید slow برای سرعتش استفاده کردم که شما میتونید از normal یا fast یا گذاشتن زمان(البته بدون ” “) به صورت میلی ثانیه بذارید مثل (۴۰۰۰)

۲٫سپس از this برای اشاره به #pannel استفاده میکنیم ……که اگرم دوست داشتید میتونید دوباره همون “#panel” رو بذارید…..فرق نفکوله!! از .toggleClass برای .active استفاده میکنیم……اگه گفتید چرا؟؟؟یکمی فکر……

یادتون باشه که toggle باعث دو حالته بودن کلاستون میشه….پس یعنی اینجا چی کار میکنه؟؟اینجا برای ما فلشهای کنار کلمه slidepanel رو عوض میکنه……موقعیکه صفحه باز نشده …..فلش رو به سمت پاییین وموقعی که صفحه باز شد فلش رو به سمت بالا نشون میده……..همین!

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

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