时钟样式角度选择器插件 jQuery circlePoint

  • 源码大小:8.69KB
  • 所需积分:1积分
  • 源码编号:19JP-3110
  • 浏览次数:790次
  • 最后更新:2023年05月07日
  • 所属栏目:时间和时钟
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

circlePoint是一个简单但完全可自定义的角度选择器插件,使用户可以通过在时钟样式的圆形UI中单击相应的点来选择所需的角度。

如何使用它:

1.添加jquery.circlepoint.js查询脚本到已加载jQuery库的页面。

  1. <script src="/path/to/cdn/jquery.slim.min.js"></script>
  2. <script src="/path/to/jquery.circlepoint.js"></script>

2.初始化插件,在页面上生成一个基本的角度选择器。

  1. <div class="circlepoint"></div>
  1. $(function(){
  2. $(".circlepoint").circlepoint();
  3. });

3.获取当前选择的角度(以度为单位)。

  1. $(".circlepoint").circlepoint({
  2. changeAction: function () {
  3. // $( this ).val()
  4. }
  5. });

4.可用的插件选项。

  1. $(".circlepoint").circlepoint({
  2.  
  3. // number of points to generate
  4. nbPoint: 16,
  5.  
  6. // width in px
  7. totalSize: 60,
  8.  
  9. // input ID
  10. // false: disable the input field
  11. input: circlepoint_input,
  12. input_value: 0,
  13. input_fontSize: 15,
  14.  
  15. // customize the points
  16. sizePointSup: 10,
  17. sizePointInf: 6,
  18. sizePoint: 4,
  19.  
  20. // rond or carre
  21. typePoint: "rond",
  22.  
  23. // background colors
  24. bgdColorSup: "#333",
  25. bgdColorInf: "#666",
  26. bgdColor: "#999",
  27. bgdColorHover: "#FFCC00",
  28. });

预览截图