illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

Responsive کردن قالب با استفاده از Jquery

25595 ۱۱ فروردین ۹۲

دوستان سلام . پس از مدت ها برگشتم و با آموزشی بسیار کاربردی در خدمتتون هستم . در این مقاله آموزشی – عملیاتی قصد دارم که آموزش Responsive ( یا همون قابل پشتیانی توسط موبایل ها و تبلت ها ) نمودن سایت را بدهم. با ما همراه باشید

در ابتدا بهتر است کمی در مورد Responsive صحبت کنم .

قالب Responsive یعنی اینکه شما قالب طراحی کرده باشید که در موبایل ها و تبلت ها بدون اسکرول افقی باشد . بهتر است به جای اینکه توضیح اضافی بدهم ، توضیح قالب Responsive را در دو عکس به شما نمایش بدهم :

 برای اینکه بتوانید یک قالب را با استفاده از jquery ، Responsive کنید کافیست که از یک پلاگین جی کوئری به نام isotope استفاده نمائید

این پلاگین jquery ، پلاگینی با قدرت و امکانات بسیار زیادی است و یکی از مهترین ویژگی های آن رایگان بودن آن است .

فقط یادتان باشد که برای استفاده از این پلاگین باید از نسخه های jQuery 1.4.3 به بالا استفاده کنید

در ابتدا باید دو فایل اسکریپی را به تگ head صفحه خود اضافه نمائید:

فرض کنید که شکل ساختاری کد شما بدین شکل است :

یعنی شما یک div اصلی دارید به نام container که دارای زیر div های می باشد که دارای کلاس element هستند .

حال تنها باید از کدی استفاده کنید که بتواند آنها را Responsive نماید :

برای فراخوانی کافیست از کد زیر استفاده نمائید :

پس از درج این کد مشاهده می کنید که Div که دارای کلاس container است  به صورت Responsive خواهد شد.

در ضمن شما با استفاده از تابع animate و همچنین css3 افکت های زیبائی برای تغییرات آن بدهید.

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

کلیک کنید

و همچنین برای دانلود این پلاگین از لینک زیر استفاده نمائید :

دانلود پلاگین

برای مشاهده سایت این پلاگین و راهنمایی های بیشتر :

کلیک کنید

در آخر باید بگم که معمولا برای Responsive کردن قالب ها از css و با استفاده از دستور زیر شکل می گیرد
با استفاده از دستور زیر می توانید چیدمان هر div را در سایز های مختلف تغییر دهید .
برای Responsive کردن قالب ها معمولا از سه دستور css زیر استفاده می شود :

  • 1) clear
  • 2) width
  • 3) float

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 18 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    جواد احمدی مقدم(۱۸ بهمن ۱۳۹۲)

    سلام
    در بلاگفا چطور باید استفاده نمود
    در کد دومی به جای containerو element باید چه ایدی یا کلسی گذاشت
    تشکر از شما

    • ‏‏
      وحید صالحی(۲۹ بهمن ۱۳۹۲)

      کلاس و آیدی توی قالبت رو باید به اینها تغییر بدی…

  • ‏‏
    طراحی سایت(۲۰ اسفند ۱۳۹۲)

    خیلی پلاگین خوبیه . مرسی

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram