کتابخانه جاوا اسکریپت Tabib UI | مجموعه ابزار طراحی رابط کاربری

Tabib UI چیست؟

Tabib UI یک کتابخانه جاوا اسکریپت سبک و کارآمد است که مجموعه‌ای از ابزارها را برای ساخت آسان رابط کاربری صفحات وب شامل می‌شود. این کتابخانه توسط طاها طبیب زاده توسعه یافته است. از مزیت‌های مهم این کتابخانه می‌توان به موارد زیر اشاره کرد.

فهرست ابزارهای کتابخانه Tabib UI

چرا کتابخانه Tabib UI

داستان توسعه کتابخانه جاوا اسکریپت Tabib UI از جایی شروع شد که در هنگام طراحی رابط کاربری، اغلب نیاز است چندین افزونه جاوا اسکریپت مستقل یا مبتنی بر jQuery به پروژه‌ها اضافه شود. این افزونه‌ها معمولاً شامل حداقل دو فایل CSS و JS هستند و بسته به امکاناتشان، حجم‌های متفاوتی دارند.

مشکل اصلی اینجاست که در اکثر مواقع به همه امکانات این افزونه‌ها نیازی نیست، و همین موضوع منجر به افزایش غیرضروری حجم صفحات و کاهش سرعت بارگذاری می‌شود. برای نمونه جهت استفاده از قابلیت Drag and Drop با افزدون کتابخانه jQuery-ui به تنهایی 230 کیلوبایت و یا برای استفاده از قابلیت Carousel با افزودن کتابخانه owl یا Slick حدوداً 50 کیلوبایت، حجم صفحه افزایش می‌یابد. این در حالی است که کتابخانه جاوا اسکریپت Tabib UI با دارا بودن هر دو این قابلیت‌ها و ده ابزار دیگر تنها 43 کیلوبایت حجم دارد و مستقل از jQuery و به شکل pure javascript اجرا می‌شود.

علاوه بر این، از دیگر مشکلات استفاده از چندین کتابخانه در یک پروژه می‌توان به مواردی همچون تداخل افزونه‌ها و یا بارگذاری ناموفق به دلیل محدودیت‌های CDN در داخل کشور اشاره کرد.

با توجه به نیاز پروژه‌هایی که در حال توسعه آن‌ها بودم؛ طی چند سال گذشته تا جایی که امکان و وقت اجازه می‌داد، افزونه‌های جاوا اسکریپت مورد استفاده را از پروژه‌هایم حذف کرده و هر کدام را به‌صورت اختصاصی، طراحی و کدنویسی کردم. نتیجه این تلاش‌ها، کتابخانه جاوا اسکریپت Tabib UI است.

معرفی ابزارهای کتابخانه

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

پنجره محاوره‌ ای |  Modal Window

ابزار شماره 1

Open Modal

گام 1 – قرار دادن یک دکمه جهت نمایش پنجره پاپ آپ

 <span id="open_Modal" class="btn">Open Modal</span> 

گام 2 – محتوای پنجره

در این مثال محتوا به‌صورت ایستا تعریف شده است، اما می‌توان با استفاده از Ajax آن را از سمت Back-End فراخوانی کرد.

<div id="content_modal" style="display: none;">
  <div>عنوان</div>
  <span>سلام دنیا</span>
</div>

گام 3 – تعریف تگ div با id یکتا.

 <div id="dialog"></div> 

گام 4 – تابع فراخوانی ابزار پنجره محاوره‌ای

My_modal("#open_Modal","#dialog","40%","ثبت رویداد",true,function(){
  var Content = document.querySelector("#content_modal");
  return Content;
});

• نام تابع فراخوانی My_modal است.
• مقدار اول، id دکمه فراخوانی پنجره است.
• آرگومان دوم، id تگ پنجره محاوره‌ای است که در گام سوم با نام dialog# مشخص شد.
• در مؤلفه سوم، عرض پنجره مشخص می‌شود.
• مقدار چهارم، عنوان را در نوار بالای پنجره مشخص می‌کند.
• متغیر پنجم جهت فعالسازی قابلیت جابجایی پنجره با مقادیر true و false است.
• تابع آرگومان آخر محتوای پنجره را فراخوانی می‌کند.

اعلان | Notification

ابزار شماره 2

Open Notfication

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

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

 <span class="btn" id="open_Notfication">Open Notfication</span> 

تنظیمات تابع ابزار اعلان

 Notif("#open_Notfication","ثبت شد","پردازش تکمیل شد","success");

• نام تابع فراخوانی اعلان Notif است.
• مقدار اول، شناسه (id) دکمه‌ای است که رویداد را فعال می‌کند.
• آرگومان دوم و سوم به‌ ترتیب عنوان و محتوای اعلان را دریافت می‌کند.
• آرگومان چهارم سبک اعلان را مشخص می‌کند که می‌تواند یکی از مقادیر success یا warning یا error یا info باشد.

فهرست کشویی با قابلیت انتخاب چندگانه | Multiple Select Dropdown

ابزار شماره 3

این ابزار تگ select پیشفرض Html را به یک منوی فهرست کشویی پیشرفته با قابلیت انتخاب چند گزینه و جست و جو میان گزینه‌ها تبدیل می‌کند. چنین منویی برای فرم‌هایی که نیاز است کاربر از دسته‌بندی‌های گوناگون چند انتخاب داشته باشد، بسیار کاربردی است.

ساختار HTML تگ <select> به‌ گونه‌ای نوشته می‌شود که دارای ویژگی multiple باشد. گزینه‌های این تگ می‌توانند بر اساس نیاز شما به‌صورت دسته‌بندی شده optgroup تعریف شوند.

  <select id="MultiSelect_list" multiple="multiple">
     <optgroup label="زبان‌ها">
         <option value="cp">C++</option>
         <option value="cs">C#</option>
         <optionvalue="oc">Object C</option>
         <option value="c">C</option>
     </optgroup>

     <optgroup label="اسکریپت">
         <option value="js">JavaScript</option>
         <option value="php">PHP</option>
         <option value="asp">ASP</option>
         <option value="jsp">JSP</option>
     </optgroup>
  </select>

تنظیمات تابع ابزار فهرست کشویی

const chk = ["cp","php"];
MultiSelect("#MultiSelect_list",chk);

• نام تابع فراخوانی ابزار فهرست کشویی MultiSelect است.
• آرگومان اول، شناسه (id) تگ <select> است.
• آرگومان دوم؛ آرایه‌ای است که گزینه‌های مورد نظر شما را بصورت پیش‌فرض در حالت انتخاب قرار می‌دهد. اگر کاربر قبلاً گزینه‌هایی را ذخیره کرده باشد، می‌توان با استفاده از این آرایه آن گزینه‌ها را به‌صورت انتخاب‌شده نمایش داد.

منوی چند سطحی با قابلیت انتخاب چندگانه | Nested List Selection Box

ابزار شماره 4

اگر به یک منوی فهرست تو در تو نیاز دارید که کاربر بتواند گزینه‌های مختلفی را انتخاب کند، این ابزار برای شما مفید خواهد بود.

برای ساخت چنین منویی نیاز است ابتدا یک فهرست تو در تو با ساختاری مشابه زیر ایجاد کنید. در ساخت فرم‌ها، بهتر است این ساختار با استفاده از حلقه و داده‌های دریافت‌شده از پایگاه‌ داده ایجاد شود.

<input type="hidden" id="Groups_list" value="">
<div id="MultiSelect_Box">
  <span>⋮⋮⋮ گروه ها</span>
  <hr/>
  <ul>
    <li>
        <label>
          <input type="checkbox" value="1">آموزش
        </label>
        <ul>
          <li>
            <label>
              <input type="checkbox" value="101">دانشگاهی
            </label>
          </li>
          <li>
            <label>
              <input type="checkbox" value="102">صنعتی
            </label>
              <ul>
                <li>
                  <label>
                    <input type="checkbox" value="10101">آزمایشگاهی
                  </label>
                </li>
              </ul>
          </li>
        </ul>
    </li>
    <li>
      <label>
        <input type="checkbox" value="201">تاریخ
      </label>
        <ul>
          <li>
            <label>
              <input type="checkbox" value="20101">صفویه
            </label>
          </li>
          <li>
            <label>
              <input type="checkbox" value="20102">افشاریه
            </label>
          </li>
        </ul>
    </li>
    <li>
      <label>
        <input type="checkbox" value="3">آزمون
      </label>
        <ul>
          <li>
            <label>
              <input type="checkbox" value="301">شیمی
            </label>
          </li>
          <li>
            <label>
              <input type="checkbox" value="302">فیزیک
            </label>
          </li>
          <li>
            <label>
              <input type="checkbox" value="303">ریاضی
            </label>
          </li>
        </ul>
    </li>
  </ul>
</div>

تنظیمات تابع ابزار فهرست جعبه‌ای

const arr_grp = ["303","301"];
MultiBox("#MultiSelect_Box","#Groups_list",arr_grp);

• نام تابع فراخوانی ابزار فهرست کشویی MultiBox است.
• آرگومان اول شناسه (id) ساختاری است که در مثال بالا <div id=”MultiSelect_Box”> ذکر شد.
• آرگومان دوم شناسه (id) تگ input از نوع hidden است. این تگ مقادیر value گزینه‌های انتخابی را در خود نگه می‌دارد تا زمان ارسال فرم به‌صورت یک آرایه به سمت Back-End ارسال کند.
• آرگومان سوم؛ آرایه‌ای است که گزینه‌های مورد نظر شما را بصورت پیش‌فرض در حالت انتخاب قرار می‌دهد. اگر کاربر قبلاً گزینه‌هایی را ذخیره کرده باشد، می‌توان با استفاده از این آرایه آن گزینه‌ها را به‌صورت انتخاب‌شده نمایش داد.

ابزارک افزودن ویژگی‌ها | Attributes Adding Widget

ابزار شماره 5

در صورتی که قرار به اختصاص ویژگی‌های مختلف به یک سند باشد می‌توانید از ابزار افزودن ویژگی‌ها که قابلیت جست و جو و طراحی چشم نواز دارد استفاده کنید.

یک تگ Input با شناسه مشخص تعریف می‌شود.

 <input type="text" id="tag" value=""> 

تنظیمات تابع ابزار افزودن ویژگی‌ها

const my_tags = [
  {id:'101', name:'خیلی بزرگ'},
  {id:'102', name:'بزرگ'},
  {id:'103', name:'متوسط'},
  {id:'104', name:'کوچک'},
  {id:'105', name:'خیلی کوچک'},
]

const curr = [
  {id:'201', name:'قرمز'},
  {id:'202', name:'آبی'},
  {id:'203', name:'سبز'},
]

Tagin("#tag",my_tags,curr);

• نام تابع فراخوانی ابزار افزودن ویژگی‌ها Tagin است.
• آرگومان اول، شناسه input است.
• آرگومان دوم، آرایه‌ای از ویژگی‌ها است که در فهرست کشویی نمایش داده می‌شود.
• آرگومان سوم، آرایه‌ای از ویژگی‌ها است که بصورت پیشفرض در باکس نشان داده می‌شود. اگر کاربر قبلاً گزینه‌هایی را ذخیره کرده باشد، می‌توان با استفاده از این آرایه آن گزینه‌ها را به‌صورت انتخاب‌شده نمایش داد.

ابزارک افزودن هشتگ | Hashtag Input Field

ابزار شماره 6

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

یک تگ Input با شناسه مشخص تعریف می‌شود.

 <input type="text" id="Hashtag" value=""> 

تنظیمات تابع ابزار افزودن هشتگ

const hash_arr = ["303","301"];
Hashtag("#Hashtag",hash_arr,"هشتگ جدید")

• نام تابع فراخوانی ابزار افزودن ویژگی‌ها Hashtag است.
• آرگومان اول، شناسه input است.
• آرگومان دوم، آرایه‌ای از هشتگ‌های پیشفرض که در باکس نمایش داده می‌شود. اگر کاربر قبلاً گزینه‌هایی را ذخیره کرده باشد، می‌توان با استفاده از این آرایه آن گزینه‌ها را به‌صورت انتخاب‌شده نمایش داد.
• آرگومان سوم، جهت ویرایش کلمه Place Holder تگ input است.

جست و جو با قابلیت تکمیل کننده کلمات | AutoComplete

ابزار شماره 7

این ابزار یک ویژگی به تگ input اضافه می‌کند تا هنگام وارد کردن اطلاعات پیشنهاد‌هایی را به صورت خودکار بر اساس داده‌های قبلی ارائه می‌دهد، که باعث افزایش سرعت و دقت در پر کردن فرم‌ها می‌شود. برای مثال اگر کلمه How را بنویسید دو پیشنهاد جهت تکمیل جست و جو پیشنهاد می‌شود.

یک تگ Input با شناسه مشخص تعریف می‌شود.

 <input type="text" id="Search_box" value="" autocomplete="off" placeholder="جست و جو کنید"> 

تنظیمات تابع ابزار جست و جو با قابلیت تکمیل کننده کلمات

let available = [
  'Html',
  'css',
  'JavaScript',
  'Asp Core',
  'Easy tutorial',
  'Where to learn coding online',
  'payton',
  'How to creat a website',
  'how to learn php',
  'flutter'
]
AutoComp('#Search_box',available);

• نام تابع فراخوانی ابزار افزودن ویژگی‌ها AutoComp است.
• آرگومان اول، شناسه input است.
• آرگومان دوم، آرایه‌ای از کلمات پیشنهادی است.

فهرست با قابلیت مرتب شوندگی | Sortable List with Drag and Drop

ابزار شماره 8

ابزارهای جابجایی ردیف‌ها با قابلیت Drag and Drop از مهم‌ترین قسمت‌های این کتابخانه هستند، چرا که با وجود پیچیدگی‌های آن، بسیار سبک طراحی شده‌اند. اولین نوع این ابزار امکان مرتب‌سازی ردیف‌های یک فهرست را با کشیدن و رها کردن فراهم می‌کند.

• item Number 1
• item Number 2
• item Number 3
• item Number 4

به لیست مورد نظر یک شناسه id اختصاص دهید.

 <ul id="Sortable_list">
	<li>item Number 1</li>
	<li>item Number 2</li>
	<li>item Number 3</li>
	<li>item Number 4</li>
</ul>

فراخوانی تابع مرتب سازی.

Sortable('#Sortable_list',function(){
  	// your function
});

• نام تابع فراخوانی Sortable است.
• آرگومان دوم شناسه id لیست مورد نظر است.
• آرگومان سوم تابعی است که به عنوان callback پس از هر تغییر در لیست اجرا می‌شود. از این تابع می‌توان برای ارسال درخواست Ajax و ذخیره تنظیمات استفاده کرد.

جابه‌جایی ردیف‌ها بین دو فهرست | Drag and Drop Row Movement Between Lists

ابزار شماره 9

دومین نوع این ابزار ردیف‌ها را به جعبه مقصد جابجا می‌کند و همزمان قابلیت مرتب سازی بین ردیف‌ها در جعبه مبدأ و مقصد وجود دارد.

این ساختار دارای یک لیست مبدأ و یک یا چند لیست مقصد است که به ترتیب با یک شناسه id و class شناسایی می‌شود. لیست دوم به دلیل نداشتن ردیف در ابتدا، برای مشخص شدن فضای آن هنگام جابجایی، دارای padding:5px است.

<ul id="task" class="grab_list Container1">
  <li>List Number 1</li>
  <li>List Number 2</li>
  <li>List Number 3</li>
  <li>List Number 4</li>
  <li>List Number 5</li>
</ul>
<!----------------->
<br>
<div class="grab_list">
  <span style="text-align: center; color:#7d7d7d;">جعبه مقصد</span>
  <ul style="list-style: none; padding: 5px; margin: 0px;" class="Container1"></ul>
</div>

فراخوانی تابع جابجایی

Drag_Move('#task','.Container1',function(){
	// your function
});

• نام تابع فراخوانی Drag_Move است.
• آرگومان اول شامل شناسه id فهرست مبدأ و آرگومان دوم شامل class فهرست‌های مقصد است.
• آرگومان سوم تابعی است که به عنوان callback پس از هر تغییر در لیست اجرا می‌شود. از این تابع می‌توان برای ارسال درخواست Ajax و ذخیره تنظیمات استفاده کرد.

کپی ردیف‌ها از فهرستی به فهرست دیگر | Drag and Drop Row Copying Between Lists

ابزار شماره 10

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

این ساختار یک لیست مبدأ و یک یا چند لیست مقصد است که به ترتیب با یک شناسه id و class شناسایی می‌شود. لیست دوم به دلیل نداشتن ردیف در ابتدا، برای مشخص شدن فضای آن هنگام جابجایی، دارای padding:5px است.

<ul id="task-Copy" class="grab_list">
  <li>Copy Number 1</li>
  <li>Copy Number 2</li>
  <li>Copy Number 3</li>
  <li>Copy Number 4</li>
</ul>
<!----------------->
<br>
<div class="grab_list">
  <span style="text-align: center; color:#7d7d7d;">جعبه مقصد 1</span>
  <ul style="list-style: none; padding: 5px; margin: 0px;" class="Container"></ul>
</div>
<!----------------->
<br>
<div class="grab_list">
  <span style="text-align: center; color:#7d7d7d;">جعبه مقصد 2</span>
  <ul style="list-style: none; padding: 5px; margin: 0px;" class="Container"></ul>
</div>

فراخوانی تابع رونوشت ردیف‌ها

Drag_Copy('#task-Copy','.Container',function(){
	// your function
});

• نام تابع فراخوانی Drag_Copy است.
• آرگومان اول شامل شناسه id فهرست مبدأ و آرگومان دوم شامل class فهرست‌های مقصد است.
• آرگومان سوم تابعی است که به عنوان callback پس از هر تغییر در لیست اجرا می‌شود. از این تابع می‌توان برای ارسال درخواست Ajax و ذخیره تنظیمات استفاده کرد.

فهرست گردشی | Carousel

ابزار شماره 11

ابزار Carousel به شما امکان می‌دهد مجموعه‌ای از تصاویر را به صورت اسلایدی نمایش دهید. این ابزار جهت نمایش آخرین مطالب وبسایت یا تصاویر محصولات کاربرد دارد. با استفاده از کشیدن و رها کردن موس، می‌توانید روی کارت‌ها حرکت کنید. این ابزار همچنین برای نمایش در حالت دسکتاپ و موبایل انعطاف‌پذیری بالایی دارد.

در ابتدا لیستی از کارت‌ها مانند ساختار زیر ایجاد کنید.

<div id="List_Gallery">
  <div>
    <a href="https://tabibzadeh.com"><img src="https://picsum.photos/400/300?random=1"></a>
  </div>
  <div>
    <a href="https://tabibzadeh.com"><img src="https://picsum.photos/400/300?random=2"></a>
  </div>
  <div>
    <a href="https://tabibzadeh.com"><img src="https://picsum.photos/400/300?random=3"></a>
  </div>
  <div>
    <a href="https://tabibzadeh.com"><img src="https://picsum.photos/400/300?random=4"></a>
  </div>
  <div>
    <a href="https://tabibzadeh.com"><img src="https://picsum.photos/400/300?random=5"></a>
  </div>
  <div>
    <a href="https://tabibzadeh.com"><img src="https://picsum.photos/400/300?random=6"></a>
  </div>'
  <div>
    <a href="https://tabibzadeh.com"><img src="https://picsum.photos/400/300?random=7"></a>
  </div>
  <div>
    <a href="https://tabibzadeh.com"><img src="https://picsum.photos/400/300?random=8"></a>
  </div>
</div>

فراخوانی تابع فهرست گردشی

Carousel("#List_Gallery", 'Custom_Style1', 'Custom_Style2');

• نام تابع فراخوانی Carousel است.
• آرگومان اول شناسه id فهرست است.
• آرگومان دوم و سوم نام Class های اختیاری است که جهت شخصی‌سازی فهرست و تخصیص کدهای css کاربرد دارد. برای مثال به کد زیر توجه کنید.

.Custom_Style1 #List_Gallery{
	border: 1px solid #ddd;
}

نوار پیشرفت بارگذاری | Loading ProgressBar

ابزار شماره 12

نوار پیشرفت برای نمایش میزان پیشرفت یک فرایند مانند بارگذاری فایل یا زمان انتظار برای شروع یک رویداد مورد استفاده قرار می‌گیرد. این نوار به کاربران نشان می‌دهد چه میزان از فرایند تکمیل، و چه مقدار تا اتمام آن باقی مانده است، که باعث کاهش حس انتظار و افزایش تجربه کاربری می‌شود.

ساختار Html مانند زیر را ایجاد کرده و یک دکمه جهت فعالسازی این رویداد تعریف می‌شود.

<div class="Tabib-progress">
  <span class="Tabib-progress-num"></span>
</div>
<span id="strat_progress" class="btn">click</span>

فراخوانی تابع نوار پیشرفت بارگذاری

ProgressBar("#strat_progress",12,"21%");

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

امیدواریم که با دریافت نظرات ارزشمند شما، کتابخانه جاوا اسکریپت Tabib UI در نسخه‌های آینده کامل‌تر و بهینه‌تر شود. لطفاً دیدگاه‌های خود را با ما به اشتراک بگذارید.