Menggunakan JQuery dan Fungsinya padaVue Cli /Typescript
Design Web yang dibuat dengan tool PINEGROW, hasilnya untuk lebih interactive menggunakan plugin JQuery. Namun ketika design tersebut diimplementasikan ke dalam project Vue CLI, ada beberapa fungsi dari JQuery yang harus disesuaikan dengan CLI, sehingga perlu menggunakan plugin lain. Namun ada juga beberapa fungsi yang berjalan tanpa merubah code, hanya dengan menambahkan plugin jquery typescript.
Fungsi JQuery, tanpa merubah code
Sebelumnya perlu meng-install “@types/jquery”: “³.3.31”
- Touchspin

#JQuery
$(‘.touch-spin-03’).TouchSpin({ min: 1, max: 10, buttondown_class: ‘btn btn-light btn-touch-spin’, buttonup_class: ‘btn btn-light btn-touch-spin’ });#plugin tambahan “@types/bootstrap-touchspin”: “0.0.30”
- Select Chosen

#JQuery
$(‘.chosen-the-basic’).chosen({ disable_search_threshold: 10 });#plugin tambahan “@types/chosen-js”: “¹.8.1”
- Ion Rangeslider

#JQuery
$(‘#price_range’).ionRangeSlider({ type: ‘double’, grid: true, min: 0, max: 1000, from: 200, to: 800, prefix: ‘$’ });#plugin tambahan “@types/ion.rangeslider”: “².0.29”
- Slick Carousel

$(‘.slick-hero’).slick({ infinite: true, slidesToShow: 5, slidesToScroll: 1, dots: false, arrows: true, variableWidth: true, centerMode: true });#plugin tambahan “@types/slick-carousel”: “¹.6.33”
Fungsi JQuery, yang tergantikan
- Rating

̵̶̵$̵̶̵(̵̶̵’̵̶̵i̵̶̵n̵̶̵p̵̶̵u̵̶̵t̵̶̵.̵̶̵r̵̶̵a̵̶̵t̵̶̵i̵̶̵n̵̶̵g̵̶̵’̵̶̵)̵̶̵.̵̶̵r̵̶̵a̵̶̵t̵̶̵i̵̶̵n̵̶̵g̵̶̵(̵̶̵)̵̶̵
Code diatas tidak dapat digunakan pada Vue CLI. Fungsi tersebut digantikan oleh plugin vue-star-rating
- Datepicker

̶$̶(̶’̶.̶a̶i̶r̶-̶d̶a̶t̶e̶p̶i̶c̶k̶e̶r̶’̶)̶.̶d̶a̶t̶e̶p̶i̶c̶k̶e̶r̶(̶{̶ ̶m̶i̶n̶D̶a̶t̶e̶:̶ ̶n̶e̶w̶ ̶D̶a̶t̶e̶(̶)̶ ̶}̶)̶;̶
Penggantinya menggunakan plugin vuejs-datepicker
- Sticky
̶$̶(̶’̶.̶s̶t̶i̶c̶k̶y̶-̶k̶i̶t̶-̶0̶2̶’̶)̶.̶s̶t̶i̶c̶k̶_̶i̶n̶_̶p̶a̶r̶e̶n̶t̶(̶{̶ ̶o̶f̶f̶s̶e̶t̶_̶t̶o̶p̶:̶ ̶1̶3̶0̶ ̶}̶)̶;̶
Penggantinya menggunakan plugin vue-sticky-directive
Fungsi JQuery tersebut yang umum digunakan. Selamat mencoba.
Salam ade CI borokokok
