Tabib UI is a lightweight and efficient JavaScript library that provides a collection of tools for easily building web page user interfaces. This library is developed by Taha Tabibzadeh. Key advantages of this library include the following
افزونه Tabib UI یک کتابخانه جاوا اسکریپت سبک و کارآمد است که مجموعه‌ای از ابزارها را برای ساخت آسان رابط کاربری صفحات وب شامل می‌شود. این کتابخانه توسط طاها طبیب زاده توسعه یافته است. از مزیت‌های مهم این کتابخانه می‌توان به موارد زیر اشاره کرد.
- 12 practical widgets for designing web user interfaces
- Extremely lightweight (43 KB) to optimize page loading speed
- Flexible coding, independent of jQuery
| IN THE NAME OF GOD | |
|---|---|
| Library Details | |
| Author: | Taha Tabibzadeh |
| Website: | https://tabibzade.com |
| Docs: | Documentation |
| License: | MIT license |
| First Release Date: | 2024/05/11 |
- Modal Window
- Notification
- Multiple Select Dropdown
- Nested List Selection Box
- Attributes Adding Widget
- Hashtag Input Field
- AutoComplete
- Sortable List with Drag and Drop
- Drag and Drop Row Movement Between Lists
- Row Copying Between Lists
- Carousel
- Loading ProgressBar
The development story of the Tabib UI JavaScript library began with the challenges often faced during UI design. Typically, multiple independent JavaScript plugins or jQuery-based plugins need to be added to projects. These plugins usually include at least two CSS and JS files and vary in size depending on their features. The main issue is that, in most cases, not all the features of these plugins are necessary, leading to an unnecessary increase in page size and reduced loading speed.
In contrast, the Tabib UI JavaScript library addresses this problem effectively. With 12 built-in tools, it is only 43 KB in size, operates independently of jQuery, and runs as pure JavaScript
داستان توسعه کتابخانه جاوا اسکریپت Tabib UI از جایی شروع شد که در هنگام طراحی رابط کاربری، اغلب نیاز است چندین افزونه جاوا اسکریپت مستقل یا مبتنی بر jQuery به پروژه‌ها اضافه شود. این افزونه‌ها معمولاً شامل حداقل دو فایل CSS و JS هستند و بسته به امکاناتشان، حجم‌های متفاوتی دارند. مشکل اصلی اینجاست که در اکثر مواقع به همه امکانات این افزونه‌ها نیازی نیست، و همین موضوع منجر به افزایش غیرضروری حجم صفحات و کاهش سرعت بارگذاری می‌شود.
این در حالی است که کتابخانه جاوا اسکریپت Tabib UI با دارا بودن 12 ابزار، تنها 43 کیلوبایت حجم دارد و مستقل از jQuery و به شکل pure javascript اجرا می‌شود.
To learn how the widgets of this library work, visit the following page:
Demos & Documentation Tabib UI
This widget displays a dialog window, which is used to show forms or messages to the user.
This tool displays a notification on the side of the screen after an event occurs. The notification supports styles such as success, warning, error, and info, which will be explained in the following settings.
This tool transforms the default HTML `<select>` tag into an advanced dropdown menu with multi-select and search capabilities. Such a menu is highly useful for forms where users need to make multiple selections from various categories.
If you need a nested dropdown menu where users can select multiple options, this tool will be useful for you.
If you need to assign various attributes to a document, you can use the attribute-adding widget, which features search functionality and an eye-catching design.
This widget allows users to easily add, manage, and edit hashtags in their documents. It can be useful in forms, content categorization systems, and social networks. After typing the desired phrase, pressing the Enter key adds the hashtag.
This widget adds a feature to the `<input>` tag to automatically suggest options based on previously entered data as the user types. This enhances both speed and accuracy when filling out forms. For example, typing the word "How" might display two suggestions to complete the search.
Row-moving widgets with Drag and Drop functionality are among the most important features of this library. Despite their complexity, they are designed to be extremely lightweight. The first type of this tool allows users to sort the rows of a list by simply dragging and dropping them.
The second type of this tool moves rows to a target box, while also allowing sorting between the rows in both the source and target boxes.
The third type of this widget transfers a copy of the corresponding row to the target box during the drag-and-drop operation, while also allowing sorting within the target boxes. This feature is particularly useful for assigning specific settings to a document.
The Carousel widget allows you to display a collection of images in a sliding format. It is useful for showcasing the latest posts on a website or product images. You can navigate through the cards by dragging and dropping the mouse. This tool also offers high flexibility for display on both desktop and mobile devices.
The progress bar is used to display the progress of a process, such as file uploads or the waiting time before an event starts. It shows users how much of the process has been completed and how much remains, helping reduce the feeling of waiting and enhancing the user experience.
We hope that with your valuable feedback, the Tabib UI JavaScript library will become more complete and optimized in future versions. Please feel free to share your thoughts with us.