WidgetNas

درختواره Tree

زمانیکه میخواهید یک لیست به صورت درختی داشته باشید، این موضوع به شما کمک خواهد کرد تا بهترین نوع استفاده را داشته باشید.

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

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

نمایش ساده

برای نمایش ساده درختواره بایستی از لیست های ul استفاده کنید، سپس کلاس tree را نسبت داده و برای هر گزینه یک li قرار دهید.
برای تعریف هر ردیف بایستی تگی به اسم item ساخته و دیتای مرتبط با آن ردیف را در آن قرار دهید. اگر قرار است با کلیک کردن به صفحه ای انتقال یابید از تگ a و در غیر اینصورت متن را مستقیم یا درون label قرار دهید.
برای درج آیکون میتوانید از تگ img و یا i استفاده کنید.

برای ساخت درختواره از لیستهای تو در تو استفاده کنید، یعنی از یک ul دیگر داخل li مورد نظر.

LTR

RTL

انتخاب شده

اگر میخواهید یک ردیف از پیش انتخاب شود، از کلاس active به تگ item اضافه کنید. دقت کنید، هر درخت فقط یک گزینه فعال میتواند داشته باشد.


   <ul class="tree" wn-type="tree">
        <li>
            <item class="active">item</item>
        </li>
    </ul>

غیر فعال

اگر میخواهید یک ردیف غیر فعال نمایش داده شود، از کلاس یا خصوصیت disabled برای تگ item استفاده کنید.


    <ul class="tree" wn-type="tree">
        <li>
            <item class="disabled">item</item>
        </li>
    </ul>

عدم نمایش hover

اگر میخواهید با حرکت نمایشگر مویس بر روی هر ردیف، آن ردیف برجسته نشود، از کلاس tree-nohover استفاده کنید. این کلاس را بعد از کلاس tree قرار دهید.

LTR

RTL


    <ul class="tree tree-nohover" wn-type="tree">
        ...
    </ul>

عدم انتخاب، باز و بسته کردن با کلیک بر روی گزینه

اگر میخواهید، گزینه ای انتخاب نشود و با زدن بر روی نام گزینه زیر مجموعه آن نمایش داده شود یا نمایش داده نشود، از کلاس tree-expand-item استفاده کنید.

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

LTR

RTL


    <ul class="tree tree-expand-item" wn-type="tree">
        ...
    </ul>

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

به صورت پیش فرض برای باز و بسته کردن یک زیر مجموعه از شکل + و - استفاده میشود، اگر میخواهید آن شکل به حالت فلش در آید از کلاس tree-arrow استفاده کنید.

LTR

RTL


    <ul class="tree tree-arrow" wn-type="tree">
        ...
    </ul>

بسته بودن گزینه به صورت پیش فرض

کنترل باز و یا بسته بودن یک گزینه توسط محظه li آن است، برای بسته بودن یک گزینه به صورت پیش فرض کافیست کلاس collapsed را به li آن نسبت دهید.

دقت کنید، موارد قبل، نسبت دادن کلاس ها به گزینه های داخل li بود، ولی برای کنترل باز و بسته بودن باید به خود li نسبت دهید.

LTR

RTL


    <ul class="tree" wn-type="tree">
        ...
        <li class="collapsed">
            ...
        </li>

    </ul>

بسته بودن همه گزینه ها به صورت پیش فرض

اگر میخواهید همه گزینه ها به صورت پیش فرض در ابتدا بسته باشند کلاس collapsed-all را بعد از tree بیاورید.

LTR

RTL


    <ul class="tree collapsed-all" wn-type="tree">
        ...
    </ul>

زیر مجموعه افقی

ممکن است تمایل داشته باشید، یک زیر مجموعه به صورت افقی نمایش داده شود. بدین منظور کلاس tree-list-horizontal را به ul مدنظر اضافه کنید.

LTR

RTL

گزینه ها با محتوی خاص

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

برای آنکه تمامی گزینه ها حداکثر فضای ممکنه را بگیرند کلاس tree-fill را بعد از کلاس tree اضافه کنید، از این پس همه گزینه ها حداکثر فضای ممکنه را اشغال میکنند.

برای آنکه بین گزینه های درونی هر گزینه فاصله ایجاد شود، بایستی از کلاس justify-content-between استفاده کرد، پس از آن هر موضوع داخل tree-item یا tree-link درون فضای حداکثری گسترده میشود.

LTR

RTL

LTR

  • Subject
    Some detail
    12
  • Subject 2
    Some detail
  • Subject 3: Some detail

RTL

  • عنوان
    مطلبی برای زیر عنوان
    12
  • عنوان 2
    شرحی خاص
  • عنوان 3: در ادامه شرح آن

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

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

LTR

  • Checkbox
    • Checkbox 1
    • Checkbox 2
    • Checkbox 3
    • Switch 1
    • Switch 2
  • Radio
    • Radio 1
    • Radio 2
    • Radio 3
  • Input
  • Buttons

RTL

  • چک باکس
    • چک 1
    • چک 2
    • چک 3
    • سوئیچ 1
    • سوئیچ 2
  • رادیو
    • رادیو 1
    • رادیو 2
    • رادیو 3
  • ورودی
  • دکمه

گزینه های تیک دار

اگر تمایل دارید، در درختواره خود چک باکس داشته باشید، به مثالهای زیر توجه کنید.

LTR

  • Checkbox
    • Checkbox 1
    • Checkbox 2
    • Checkbox 3
      • Checkbox m1 Check 1 Check 2 Check 3
      • Checkbox m2
      • Checkbox m3
    • Checkbox 4
    • Checkbox 5
  • Checkbox
    • Checkbox 1
    • Checkbox 2
    • Checkbox 3
    • Checkbox 4
    • Checkbox 5

فقط خواندنی

در برخی مواقع میخواهیم درخت مان فقط خواندنی باشد و هیچ انتخابی صورت نگیرد.

LTR

  • Checkbox
    • Checkbox 1
    • Checkbox 2
    • Checkbox 3
    • Switch 1
    • Switch 2
  • Radio
    • Radio 1
    • Radio 2
    • Radio 3
  • Input
  • Buttons

RTL

  • چک باکس
    • چک 1
    • چک 2
    • چک 3
    • سوئیچ 1
    • سوئیچ 2
  • رادیو
    • رادیو 1
    • رادیو 2
    • رادیو 3
  • ورودی
  • دکمه

غیر فعال

LTR

  • Checkbox
    • Checkbox 1
    • Checkbox 2
    • Checkbox 3
    • Switch 1
    • Switch 2
  • Radio
    • Radio 1
    • Radio 2
    • Radio 3
  • Input
  • Buttons

RTL

  • چک باکس
    • چک 1
    • چک 2
    • چک 3
    • سوئیچ 1
    • سوئیچ 2
  • رادیو
    • رادیو 1
    • رادیو 2
    • رادیو 3
  • ورودی
  • دکمه

رنگها و اندازه ها

شما قادر هستید مانند دیگر موضوعات از کلاسهای رنگی و یا کلاسهای اندازه استفاده کنید.

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

جاوا اسکریپت

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

نمایش مستندات در صفحه مربوطه