This time I will share jQuery Plugin and tutorial about SVG Based Triangle Picker Plugin For jQuery – Picker.js, hope it will help you in programming stack.
| File Size: | 79.6 KB |
|---|---|
| Views Total: | 874 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.
How to use it:
1. Include jQuery library and the jQuery Picker.js plugin’s file on the html page.
1 |
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" |
2 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
3 |
crossorigin="anonymous"> |
4 |
</script> |
5 |
<script src="picker.js"></script> |
6 |
<link rel="stylesheet" href="style.css"> |
2. Create a container element for the triangle picker.
1 |
<div id="picker"></div> |
3. Initialize the triangle picker.
1 |
$('#picker').trianglePicker(); |
4. Get the Top Middle, Bottom Left, and Bottom Right positions with the onChange callback.
1 |
// trianglePicker(el, options, onChange) |
2 |
$('#picker').trianglePicker(null, function(name, values) { |
3 |
console.log(values) |
4 |
}); |
5. Default plugin options.
01 |
polygon: { |
02 |
width: null, |
03 |
fillColor: null, |
04 |
line: { |
05 |
width: 2, |
06 |
color: 'black', |
07 |
centerLines: true, |
08 |
centerLineWidth: null |
09 |
} |
10 |
}, |
11 |
handle: { |
12 |
color: 'yellow', |
13 |
width: null, |
14 |
height: null, |
15 |
borderRadius: null |
16 |
}, |
17 |
inputs: { |
18 |
bottomRight: { |
19 |
name: 'bottomRight', |
20 |
id: '', |
21 |
class: '' |
22 |
}, |
23 |
topMiddle: { |
24 |
name: 'topMiddle', |
25 |
id: '', |
26 |
class: '' |
27 |
}, |
28 |
bottomLeft: { |
29 |
name: 'bottomLeft', |
30 |
id: '', |
31 |
class: '' |
32 |
}, |
33 |
decimalPlaces: 2 |
34 |
} |
This awesome jQuery plugin is developed by james-wasson. For more Advanced Usages, please check the demo page or visit the official website.
source : jquery.net
