jquery knob旋钮插件

最新推荐文章于 2024-03-21 09:36:30 发布
最新推荐文章于 2024-03-21 09:36:30 发布
阅读量1.4k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kids_calamus/article/details/82720252
版权 
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>jQuery Knob 尝试</title>
 5         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 6         <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
 7         <script src="dist/jquery.knob.min.js"></script>
 8         <script>
 9             $(function() {
10                 $(".knob").knob({
11                     max: 940,
12                     min: 500,
13                     thickness: .3,
14                     fgColor: '#2B99E6',
15                     bgColor: '#303030',
16                 //    "cursor":true,
17                     'release':function(e){
18                         console.log("release : " + value);
19                     }
20                 });
21      
22                 $(".knob2").knob({
23                     'release':function(e){
24                     //    $('#img').animate({width:e});
25                     console.log("release : " + value);
26                     }
27                 });
28             });
29         </script>
30 
31     </head>
32     <body>
33 
34     <div >
35         <input class="knob" data-width="200" data-skin="tron" data-displayInput="true" value="200">
36         
37         <input class="knob2" data-width="150" data-fgColor="green" data-bgColor="#ffec03" data-skin="tron" data-thickness=".3" data-min="200" data-max="600" value="200">
38         
39     </div>
40     
41 
42     </body>
43 </html>

参数设置可以在input里直接设置也可以用js初始化。

 

效果图

源码下载==》下载

 

kiz_calamus
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5旋转按钮,基于SVG的jQuery旋转按钮插件
weixin_32531655的博客
07-02 438
jquery.knob.js是一款简单实用的基于SVG的jQuery旋转按钮插件。该插件通过jquery和jquery ui来动态生成基于SVG的旋转按钮。使用方法在页面中引入jquery,jquery ui和jquery.knob.js文件。HTML结构使用一个元素作为旋转按钮的容器，通过data-*属性来配置按钮。data-steps="10"data-fgColor="#3ff"data-b...
jQuery旋钮插件jQuery knob
04-15
如果你也在寻找一款生成漂亮旋钮(knob)的jQuery插件的话，那么今天我们介绍的jQuery knob肯定是一个不错的选择。演示地址：http://www.jq22.com/jquery-info392
分享一款超棒的jQuery旋钮插件 - jQuery knob
weixin_34239592的博客
05-08 139
在线演示  本地下载 如果你也在寻找一款生成漂亮旋钮(knob)的jQuery插件的话，那么今天我们介绍的jQuery knob肯定是一个不错的选择。它使用canvas帮助我们生成超酷的旋钮特效，你可以使用插件选项或者HTML5的data属性来自定义设置插件属性，方便简捷并且优雅，我相信大家肯定会喜欢这个超酷的jQuery插件，如果你有任何问题活着建议请给我们留言！ 主要特性 支持...
jQuery-Knob
04-16
html5下的滑圈控件,依赖于jQuery框架，基于html5画布技术
插件--旋钮插件jQuery knob
小石头
10-28 2846
插件描述：如果你也在寻找一款生成漂亮旋钮(knob)的jQuery插件的话，那么今天我们介绍的jQuery knob肯定是一个不错的选择。 如果你也在寻找一款生成漂亮旋钮(knob)的jQuery插件的话，那么今天我们介绍的jQuery knob肯定是一个不错的选择。它使用canvas帮助我们生成超酷的旋钮特效，你可以使用插件选项或者HTML5的data属性来自定义设置插件属性，方便简捷并且
分享一个旋钮插件 jquery.knob.js 新增change事件中回调返回值功能以及阻止冒泡事件
yanhappiness
10-14 2158
本来都要休息了还是打开github，解决了线上一个插件的兼容性。 看来今晚能睡的比较踏实了！ 插件介绍 jquery-knob是我用到的UI设计比较清新的旋钮插件之一，应用灵活，体积小，功能强大。 demo 展示地址 http://anthonyterrien.com/demo/knob/ 项目github地址 https://github.com/aterrien/jQuery-Knob...
jQuery旋钮插件jQuery knob特效代码
03-20
jQuery Knob是一款基于jQuery库的交互式数字输入插件，它允许用户通过旋转按钮来调整数值，常用于创建仪表盘、滑动控制器等界面元素。这个插件以其简洁的API和高度可定制的外观而受到开发者欢迎。在本文中，我们将...
jQuery旋钮插件jQuery knob.zip
07-04
jQuery Knob是一款强大的JavaScript插件，它基于jQuery库，用于创建直观、可自定义的旋钮（knob）控件。这个插件提供了一个数字输入的界面，用户可以通过旋转按钮来调整数值，常用于调整设置、输入数值或者控制某种...
编程开发-综合控件-jQuery knob网页旋钮插件.zip
09-20
jQuery Knob是一款流行的JavaScript插件，它允许开发者在网页上创建可交互的圆形旋钮控件，常用于数据输入、设置调整或者简单的图形界面设计。这个插件基于jQuery库，因此能够很好地与其他jQuery组件集成，简化了...
jQuery和css3音量调节旋钮插件
12-12
**jQuery和CSS3音量调节旋钮插件详解** 在网页开发中，用户交互体验是至关重要的，而音量调节旋钮作为一个常见的交互元素，能够为音频播放功能增添不少便捷性。这款基于jQuery和CSS3的音量调节旋钮插件，通过结合...
jquery-knob:用于 jQuery 旋钮的 WebJar
07-14
用于 jQuery 旋钮的 WebJar 更多信息： : 上游： :
vue-knob-control-Vue.js的旋钮控件-Vue.js开发
05-27
vue-knob-control Vue.js的旋钮控件Install npm install vue-knob-control -S用法从'vue'导入Vue从'vue-kno vue-knob-control导入KnobControl Vue.js的旋钮控件安装npm install vue-knob-control -S用法从'vue'导入Vue从'vue-knob-control'导入KnobControl Vue.use（KnobControl）示例最基本的用法： 在指定最小值和最大值时，请注意，值弧是从计算出的零点开始绘制的。 我们还使弧线看起来更细：
滚动旋钮时禁止页面滚动-jquery.knob.js
yanhappiness
10-11 1231
jquery.knob.js一款很棒的jquery旋钮插件 gayhub地址：https://github.com/aterrien/jQuery-Knob 当鼠标滚轮作用于旋钮时，禁止页面滚动 $(".knob").on("mousewheel",function(event){ var event = event || window.event; event.preventDef
JQ插件：Knob旋钮按钮
gundumw100的专栏
04-10 4625
在线演示 用法介绍： 分享一款超棒的jQuery旋钮插件 - jQuery knob http://anthonyterrien.com/knob/ 我要实现的效果： 就是需要下方有一个缺口，用于显示一些文字。 我利用knob只显示了这个圆环，其中的文本数字都是在div中显示的，跟knob无关！ 首先导入jquery和knob插件： 然后定义一个div用于显示
knob UI插件使用
iteye_9473的博客
05-10 348
图形是用canvas绘制的 [code="java"] js代码 var paras = { max:800, min:100, skin:'tron',//button type thickness:.3,//button width width:'200',//define canvas width.,canvas height displ...
jquery knob 旋钮的简单使用
easyboot的专栏
11-25 868
@{ ViewData["Title"] = "Test"; Layout = null; // Layout = "~/Views/Shared/_Layout.cshtml"; } <script src="~/plugins/vue/vue.js"></script> <h1 class="text-white">Test</h1> <div class="row"> <div class=".
有关jquery knob 插件应用- -|||
weixin_30487701的博客
01-08 131
如果你也在寻找一款生成漂亮旋钮(knob)的jQuery插件的话，那么今天我们介绍的jQuery knob肯定是一个不错的选择。它使用canvas帮助我们生成超酷的旋钮特效，你可以使用插件选项或者HTML5的data属性来自定义设置插件属性，方便简捷并且优雅，我相信大家肯定会喜欢这个超酷的jQuery插件。 主要特性 支持只读模式 两个供选择的callback方法：change和rele...
探索交互式数字输入的魅力：jQuery-Knob
最新发布
gitblog_00012的博客
03-21 408
探索交互式数字输入的魅力：jQuery-Knob 项目地址:https://gitcode.com/aterrien/jQuery-Knob 项目简介 jQuery-Knob 是一个基于 jQuery 的轻量级插件，它提供了美观、可自定义的圆形拨盘界面，用于创建互动式的数字输入控件。这个项目由 Aurélien Terrien 开发，旨在为网站和应用添加一种直观且吸引人的数据输入方式。 技术分析 ...
关于knob.js进度插件的使用
weixin_30299709的博客
11-14 358
关于这个插件，妹的，第一次使用坑死爹了，各种不会，幸亏我有持之以恒的精神，最终还是让其臣服于我的胯下。。。。 1. 引入 head 部分添加knob.js，同时引入excanvas.js这个文件主要为了兼容IE7，8，具体ie6没测试（可以不考虑了）； <script type="text/javascript" src="js/jquery.knob.js"></sc...
qt 自定义旋钮
05-26
在 Qt 中，可以通过自定义绘制实现一个旋钮。以下是一个简单的例子： 1. 定义一个自定义旋钮控件类，继承自 QWidget。 2. 在控件类中定义旋钮的属性，如当前值、最小值、最大值、步长等。 3. 重写 paintEvent() 函数，在函数中使用 QPainter 绘制旋钮。 4. 重写 mousePressEvent() 和 mouseMoveEvent() 函数，实现旋钮的交互操作，如拖动旋钮改变值。 以下是一个简单的自定义旋钮控件的示例代码： ```cpp class Knob : public QWidget { Q_OBJECT public: explicit Knob(QWidget *parent = nullptr); void setValue(int value); int value() const; void setMinimum(int minimum); int minimum() const; void setMaximum(int maximum); int maximum() const; void setSingleStep(int step); int singleStep() const; signals: void valueChanged(int value); protected: void paintEvent(QPaintEvent *event) override; void mousePressEvent(QMouseEvent *event) override; void mouseMoveEvent(QMouseEvent *event) override; private: int m_value; int m_minimum; int m_maximum; int m_singleStep; QPoint m_center; int m_radius; int m_angle; }; Knob::Knob(QWidget *parent) : QWidget(parent) , m_value(0) , m_minimum(0) , m_maximum(100) , m_singleStep(1) , m_center(width() / 2, height() / 2) , m_radius(qMin(width(), height()) / 2 - 10) , m_angle(0) { setSizePolicy(QSizePolicy::MinimumExpanding, QSizePolicy::MinimumExpanding); } void Knob::setValue(int value) { if (value < m_minimum) value = m_minimum; if (value > m_maximum) value = m_maximum; if (value != m_value) { m_value = value; emit valueChanged(m_value); update(); } } int Knob::value() const { return m_value; } void Knob::setMinimum(int minimum) { m_minimum = minimum; } int Knob::minimum() const { return m_minimum; } void Knob::setMaximum(int maximum) { m_maximum = maximum; } int Knob::maximum() const { return m_maximum; } void Knob::setSingleStep(int step) { m_singleStep = step; } int Knob::singleStep() const { return m_singleStep; } void Knob::paintEvent(QPaintEvent *event) { QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing, true); // 绘制外圆 painter.save(); painter.translate(m_center); painter.setPen(QPen(Qt::black, 2)); painter.drawEllipse(QPoint(0, 0), m_radius, m_radius); painter.restore(); // 绘制刻度线 painter.save(); painter.translate(m_center); painter.rotate(-120); for (int i = 0; i <= 20; ++i) { if (i % 2 == 0) { painter.drawLine(0, m_radius - 10, 0, m_radius - 20); painter.drawText(-10, m_radius - 22, QString::number(i * 5)); } else { painter.drawLine(0, m_radius - 15, 0, m_radius - 20); } painter.rotate(6); } painter.restore(); // 绘制指针 painter.save(); painter.translate(m_center); painter.rotate(-120 + m_angle); painter.setPen(QPen(Qt::red, 3)); painter.drawLine(0, 0, m_radius - 30, 0); painter.restore(); } void Knob::mousePressEvent(QMouseEvent *event) { if (event->button() == Qt::LeftButton) { m_center = QPoint(width() / 2, height() / 2); m_radius = qMin(width(), height()) / 2 - 10; m_angle = qRound(qRadiansToDegrees(qAtan2(event->y() - m_center.y(), event->x() - m_center.x()))); } } void Knob::mouseMoveEvent(QMouseEvent *event) { if (event->buttons() & Qt::LeftButton) { int newAngle = qRound(qRadiansToDegrees(qAtan2(event->y() - m_center.y(), event->x() - m_center.x()))); int delta = newAngle - m_angle; if (delta > 180) delta -= 360; if (delta < -180) delta += 360; setValue(m_value + delta / 2); m_angle = newAngle; } } ``` 在使用时，可以像使用其他控件一样添加到窗口中，并连接 valueChanged() 信号以处理旋钮的值改变事件。 ```cpp Knob *knob = new Knob(this); knob->setGeometry(50, 50, 100, 100); connect(knob, &Knob::valueChanged, [=](int value) { qDebug() << "value: " << value; }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值