دروپال، jQuery و پلاگین های جی کوئری

دروپال، jQuery و پلاگین های جی کوئری

افزایش جذابیت سایت با امکانات jQuery

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

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

پویا سازی صفحات در دروپال با jQuery

می دانید که JQuery در هسته دروپال قرار گرفته است و می توان از امکانات آن در ماژول ها و تم ها استفاده کرد. همچنین ماژول های متنوعی هستند که بر پایه جی کوئری یا پلاگین های آن قرار دارند و ویژگی های آنها را به یک سایت دروپالی اضافه می کنند. برای نمونه ویژگی های پلاگین JQuery Cycle توسط ماژول Views Slideshow به دروپال اضافه می شود و می توانید از آن روی نتایج یک view استفاده کرده و آنها را به صورت اسلاید در آورید.

دروپالیکا - دروپال - اسلایدر - جی کوئری

افزودن پلاگین های جی کوئری به دروپال به صورت دستی

بنابراین ماژول های زیادی وجود دارند که امکانات JQuery و پلاگین هایی نوشته شده بر اساس آن را به دروپال اضافه می کنند و می توان به راحتی از آنها با چند کلیک استفاده کرد. ولی در عین حال پلاگین های JQuery نیز بی شمار هستند و لزوما برای همه آنها، در دروپال، ماژولی نوشته نشده است. بنابراین باید خود دست به کار شوید و بتوانید از آنها در ماژول و یا تم خود استفاده کنید.

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

دروپالیکا - دروپال - کدهای جی کوئری

چند نکته در استفاده از پلاگین های JQuery در دروپال

  1. برای به کار بردن هر پلاگین باید مطمئن باشید که بر پایه چه نسخه ای از JQuery کار می کند. بنابراین قبل از هر چیز باید در محلی که کار می کنید از وجود JQuery با ورژن حداقلی، اطمینان حاصل کنید. آن طور که بیان شد jQuery در هسته دروپال وجود دارد ولی در صورتی که نسخه مورد نظر شما نبود، می توانید با استفاده از ماژول jQuery update نسخه جدیدتری از jQuery را در سایت دروپالی خود استفاده کنید.
  2. مستندات تکنیکی استفاده از پلاگین را بیابید. این مستندات می تواند حاوی اطلاعاتی در مورد تابعی باشد که باید صدا بزنید و اینکه ساختار تگ های HTML ای که توسط این پلاگین تبدیل می شوند (مثلا به اسلایدر) چگونه باید باشد.
  3. در صورتی که مستندات تکنیکی کافی را نیافتید، حداقل یک نمونه و یا دمو از اجرای این پلاگین را پیدا کنید. در این صورت به بخشی از اطلاعات ضروری که در نکته 2 اشاره شد، دسترسی خواهید داشت که برای شروع کار کافی است.
  4. بر اساس مستندات و یا نمونه استفاده شده، تگ های HTML لازم را ایجاد کرده و به صفحه وب مورد نظر خود اضافه کنید. برای نمونه شما ممکن است تگ های لازم را به صورت استاتیک در تم و یا یک بلوک یا محتوا وارد کنید و یا با استفاده از ماژول views آنها را تولید کرده باشید.
  5. فایل پلاگین را از سایتی که آن را ارائه می کند دانلود کنید و آن را به صفحه ضمیمه کنید. در دروپال می توانید این کار را با نوشتن یک تم و یا یک ماژول انجام بدهید.
  6.  یک اسکریپت را با افزودن یک فایل js و یا به صورت inline در صفحه وارد کنید. مثلا در دروپال می توانید این فایل را در تم ایجاد کرده و به فایل info آن تم اضافه کنید.
  7.  کدی بنویسید که در event مورد نظر، بر اساس مستندات و یا نمونه کار، تابع راه انداز آن پلاگین را بر روی یکی از تگ هایی که ساخته اید، صدا بزنید. برای نمونه معمولا یک اسلایدر را در هنگام لود کامل صفحه می سازیم و یا یک دیالوگ را هنگام زدن یک دکمه و یا یک لینک باز می کنیم.

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

ارسال نظر