آموزش پلاگین chosen و استفاده از آن در Laravel

سلام دوستان

گاهی توی فرم های HTML نیاز داریم که از تگ های select استفاده کنیم، اما خب همینطور که میدونید این تگ ها به صورت خام شکل خوبی ندارن و نمیشود از تمام قابلیت های اون استفاده کرد. بنابراین از پلاگین های کمک میگیریم. من خودم از chosen استفاده میکنم. ایشون پلاگین جی کوئری سبکی هستن که قابلیت های زیادی مثل سرچ، چند انتخابی و … دارن. در تعریف این پلاگین آمده :

Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly

داکیومنت این پلاگین و لینک دانلود آن هم در آدرس زیر هست. خب حالا بریم ببینیم چجوری از اون توی پروژهامون استفاده کنیم.

https://harvesthq.github.io/chosen/

---

1- مرحله اول دانلود پلاگین و Extract کردن آن و کپی اش در آدرس پروژه مون.

1C:\xampp\htdocs\myLaravel\blog\public\plugins\chosen

2- مرحله دوم وارد کردن آدرس css و js در فایل “index.blade.php” و نوشتن ییلد در پایین js.

1@yield('js')

3- و مرحله سوم هم نوشتن تگ select و استفاده از کلاس chosen-select

123456789<div class=&quotform-group&quot>
    <label for=&quotcategories&quot>انتخاب دسته بندی</label>
    <div id=&quotoutput&quot></div>
    <select class=&quotchosen-select&quot multiple name=&quotcategories&quot style=&quotwidth: 400px&quot>
        <option value=&quot1&quot>اخبار ورزشی</option>
        <option value=&quot2&quot>اخبار علمی</option>
        <option value=&quot3&quot>اخبار فرهنگی</option>
    </select>
</div>

و در آخر فرم هم این قطعه کد را اضاف میکنیم.

12345@section('js')
    
        $(&quot.chosen-select&quot).chosen()
    
@endsection

و در نهایت فرم و تگ select ما آماده هست.

امیدوارم استفاده کنید و لذت ببرید.

نویسنده مطلب: نیما جهان بین

منبع مطلب