Menggunakan JQuery dan Fungsinya padaVue Cli /Typescript

Ade ci Borokokok
Nov 1 · 2 min read

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
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
Select Choosen
#JQuery
$(‘.chosen-the-basic’).chosen({ disable_search_threshold: 10 });
#plugin tambahan “@types/chosen-js”: “¹.8.1”
  • Ion Rangeslider
IonRangeslider
#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-Caraosel
$(‘.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
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
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
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

Ade ci Borokokok

Written by

belajar java, nativescript , vue, google cloud, kubernetes, JHIPSTER, microservices

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade