استفاده از ThemeRoller در jQuery

  • آپدیت شده در تاریخ

استفاده از ThemeRoller در jQuery

ThemeRoller یکی از محبوب ترین اپلکیشن های تحت وب است برای رابط کاربری jQuery است . این ابزار به شما اجازه تغییر در خصوصیات قالب بر اساس سلیقه را می دهد.

برای همین آن را ThemRoller یا همان غلطک برای ویرایش قالب نامگذاری کردند.

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

همانطور که می دانید ما از CSS برای طراحی ظاهری صفحات وب استفاده می کنیم. اما , jQuery ThemRoller بصورت خیلی زیبایی زمان را برای این طراحی ها کم کرده است . نه تنها زمان بلکه حجم لایه های طراحی را نیز کاهش داده است.

استفاده از ThemeRoller در jQuery

در این آموزش , آیتم های زیر را خواهیم داشت.

  • رابط کاربری jQuery UI ThemeRoller
  • تنظیمات پایه برای کامپوننت های jQuery UI
  • دانلود و نصب jQuery ThemeRoller

 

رابط کاربری jQuery UI ThemeRoller

در بخش jQuery UI میتوانید اینترفیس themeroller را برای دریافت قالب های مورد نیاز ببینید. در این رابط کاربری سمت چپ پنل , سه زبانه می بینیم

Roll Your Own یک سری تنظیمات اولیه برای تغییر در ظاهر را در اختیار ما قرار می دهد.

Gallery قالب های از پیش ساخته شده را برای دانلود نشان می دهد

Help نیز به نکته هایی را برای کار کردن با این ابزار نمایش می دهد.

استفاده از ThemeRoller در jQuery

همانطور که در تصویر هم مشخص است میتوانیم قالب ها را از قسمت Gallery انتخاب و از قسمت Roll Your Own تغییرات سفارشی را لحاظ کنیم.

تنظیمات پایه برای کامپوننت های jQuery UI

در این مرحله , می توانیم استایل های قالب را بنابر انتخاب هایی که در اختیار ما قرار داده تغییر بدیم . این تغییرات میتواند افکت هایی را بر روی استایل پیش فرض مانند حالت hover , active تغییر دهد . همچنین میتوانیم تنظمیات سراسری برای استایل های مربوط به فونت ها و غیره .. را اعمال کنیم.

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

از سمت دیگر , می توانیم بصورت داینامیک پترن های سفارشی , قالب متن ها را در اپلیکیشن وارد (import) کنیم . همه این تغییرات با استفاده از پنل سمت چپ jQuery ThemeRoller که در تصویر هم مشخص است , انجام می شود .

استفاده از ThemeRoller در jQuery

دانلود و نصب jQuery ThemeRoller

هیمنکه قالب دلخواه خودمان را انتخاب و تغییرات را برحسب نیاز اعمال کردیم می توانیم با کلیک بر روی دکمه Download در زبانه Roll Your Own دریافت کنیم.

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

بعد از دانلود فایل zip و اکسترکت کردن آن , فایل های jquery و css را می بینیم . همه تصاویر , پترن و استایل های استفاده در قالب ما توسط CSS سفارشی کنترل می شود .

 

برای همگام سازی ThemeRoller با وبسایت خودمان , نیاز داریم که فایل های زیر را در قسمت head صفحه ایمپورت کنیم .

بعد از آن , یک فایل HTML ساده index.html برای تغییر و استفاده از افکت های ThemeRoller خواهیم داشت که میتوانید از آن استفاده کنید.

 

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید

حسن شفیعی توسعه دهنده وب و موبایل مدیر سایت علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. اگر نیاز به برنامه نویس برای انجام پروژه و نوشتن اسکریپت های سمت وب, اپلیکیشن های اندروید و ios, پیدا کردن راه حل توسعه و غیره داشتید حتما از طریق تماس با ما/ واتساپ/ تلگرام بهم پیام بدید. برایتهیه هاست مطمین و پرسرعت کلیک کنید
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دوره های آموزشی