آموزش Semantic Dropdown

زمانی که می خواهید بین چند گزینه یکی را انتخاب کنید از dropdown استفاده می کنیم

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

به نمونه زیر توجه کنید

<div class="ui selection dropdown">
  <input type="hidden" name="gender">
  <i class="dropdown icon"></i>
  <div class="default text">Gender</div>
  <div class="menu">
    <div class="item" data-value="1">Male</div>
    <div class="item" data-value="0">Female</div>
  </div>
</div>

کد بالا یک dropdown ایجاد می کند که شامل دو گزینه ی اقا و خانوم هست که در طراحی سایت برای تعیین جنسیت در فرم های ثبت نام استفاده می شود شما می توانید گزینه های آن را با توجه به نیاز خود تغییر دهید

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

<script>
$('.ui.dropdown').dropdown();
</script>

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

حالا چگونه بفهمیم که کاربر کدام گزینه را از لیست انتخاب کرده است

<script>
var select= $('.ui.dropdown').dropdown('get value');
</script>

با افزودن get value می توانید مقدار انتخابی کاربر را دریافت کنید . مقداری که برمیگرداند همان مقداری است که در data-value گزینه ها نوشته اید

برای مشاهده لیست کامل قابلیت ها اینجا کلیک کنید

یک مثال دیگر : شما می خواهید زمانی که کاربر یکی از گزینه هارا انتخاب کرد پیامی به او بدهید یا یک عملیاتی را انجام دهید برای این کار از کد زیر استفاده می کنیم

$('.dropdown')
  .dropdown({
    onChange: function(value, text, $selectedItem) {
      // custom action
    }
  })
;

از متد onChange استفاده کردیم زمانی که کاربر یکی از گزینه ها را انتخاب کند کدی که در قسمت custom action نوشتید اجرا می شود نمونه های مختلف را با کلیک روی dropdown می توانید مشاده کنید

 

برای سفارش ساخت سایت می توانید به تلگرام و یا ایمیل ما پیام دهید

telegram : @benyaminir

email : [email protected]