Default
<div id="myap"></div>
<script>
new AnglePicker("#myap", {
});
</script>
Enable Center
<div id="myap1"></div>
<script>
new AnglePicker($("#myap1"), {
flat : true
,enableCenter: true
,value: null
});
</script>
Enable Center, disable show value
<div id="myap1a"></div>
<script>
new AnglePicker($("#myap1a"), {
flat : true
,enableCenter: true
,showValueEnabled: false
,value: null
});
</script>
Value
<div id="myap2"></div>
<script>
new AnglePicker($("#myap2"), {
flat : true
,value: 41
});
</script>
Handle Size
<div id="myap3"></div>
<script>
new AnglePicker($("#myap3"), {
flat : true
,handleSize: 20
});
</script>
Snap
<div id="myap4"></div>
<script>
new AnglePicker($("#myap4"), {
flat : true
,snap: 45
});
</script>
Size
<div id="myap5"></div>
<script>
new AnglePicker($("#myap5"), {
flat : true
,size: 100
});
</script>
Change Event
change:null
move:
null
<div id="myap6"></div>
<script>
new AnglePicker($("#myap6"), {
flat : true
,enableCenter: true
, move: function(evt,data) {
var val = "" + data.value;
if (val != "null")
val += "°";
$("#myap6val2").html(val);
}
, change: function(evt,data) {
var val = "" + data.value;
if (val != "null")
val += "°";
$("#myap6val").html(val);
}
});
</script>
Top and Clockwise
<div id="myap7"></div>
<script>
new AnglePicker($("#myap7"), {
flat : true
,start: -90
});
</script>
anti-Clockwise
<div id="myap8"></div>
<script>
new AnglePicker($("#myap8"), {
flat : true
,clockwise: false
});
</script>
Bottom and anti-Clockwise
<div id="myap9"></div>
<script>
new AnglePicker($("#myap9"), {
flat : true
,clockwise: false
,start: -90
});
</script>
Show Value Center
<div id="myap10"></div>
<script>
new AnglePicker($("#myap10"), {
flat : true
, enableCenter: true
, showValue: true
, showValueCenter: true
});
</script>
Always Show Tooltip
<div id="myap11"></div>
<script>
new AnglePicker($("#myap11"), {
flat : true
, enableCenter: true
, showValueAlwaysEnabled: true
});
</script>
Full
<div id="myap100"></div>
<script>
new AnglePicker($("#myap100"), {
flat: true
, value: 90
, enableCenter: true
, centerSize: 80
, size: 100
, handleSize: 20
, handleType: "default"
, snap: 45
, showValue: true
, decimalPlaces: 0
, appendTo: "body"
,change : function(evt, data) {
console.log("change:"+data.value);
}
});
</script>
Set Value
<div id="myap110"></div>
<script>
var ap110 = new AnglePicker($("#myap110"), {
flat : true
,enableCenter: true
});
$("#myap110-button1").click(function() {
ap110.setValue(45);
});
$("#myap110-button2").click(function() {
ap110.setValue(null);
});
</script>
Show Value Center Snap/Relax
<div id="myap120"></div>
<script>
new AnglePicker($("#myap120"), {
flat : true
, enableCenter: true
, showValue: true
, showValueCenter: true
, snap: 5
, snapRelax: true
});
</script>