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

استفاده از 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 تغییر دهد . همچنین میتوانیم تنظمیات سراسری برای استایل های مربوط به فونت ها و غیره .. را اعمال کنیم.

حتما بخوانید  پنل مدیریت HTML فارسی

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

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

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

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

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

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

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

 

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

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

 

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

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

حتما بخوانید  ساخت منو شناور با jQuery

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

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

دیدگاه کاربران

دیدگاهتان را بنویسید

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

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

افزایش امنیت سایت

مجوزهای ما

logo-samandehi

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

دانلود کتاب

عضویت در خبرنامه