SVG Based Triangle Picker Plugin For jQuery - Picker.js

SVG Based Triangle Picker Plugin For jQuery - Picker.js

A jQuery & SVG based triangle picker that enables the user to select a point within the triangle and returns an object containing Top Middle, Bottom Left, and Bottom Right positions after selections.

1. Include jQuery library and the jQuery Picker.js plugin's file on the html page.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="picker.js"></script>
<link rel="stylesheet" href="style.css">

2. Create a container element for the triangle picker.

<div id="picker"></div>

3. Initialize the triangle picker.

$('#picker').trianglePicker();

4. Get the Top Middle, Bottom Left, and Bottom Right positions with the onChange callback.

// trianglePicker(el, options, onChange)
$('#picker').trianglePicker(null, function(name, values) {
  console.log(values)
});

5. Default plugin options.

polygon: {
  width: null,
  fillColor: null,
  line: { 
    width: 2,
    color: 'black',
    centerLines: true,
    centerLineWidth: null
  }
},
handle: {
  color: 'yellow',
  width: null,
  height: null,
  borderRadius: null
},
inputs: {
  bottomRight: {
    name: 'bottomRight',
    id: '',
    class: ''
  },
  topMiddle: {
    name: 'topMiddle',
    id: '',
    class: ''
  },
  bottomLeft: {
    name: 'bottomLeft',
    id: '',
    class: ''
  },
  decimalPlaces: 2
}

This awesome jQuery plugin is developed by james-wasson. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 10.08.2018
  • Source