鼠标上下滚动支持combobox选中
首先需要jquery插件来支持:
1、代码SVN检出https://github.com/jquery/jquery-mousewheel
2、点击这里下载jquery.mousewheel.zip
3、直接上代码
$('#text1').combobox({
height: 32,
data: [
{"value": "选项1", "text": "选项1"},
{"value": "选项2", "text": "选项2"},
{"value": "选项3", "text": "选项3"},
{"value": "选项4", "text": "选项4"},
{"value": "选项5", "text": "选项5"},
{"value": "选项6", "text": "选项6"},
{"value": "选项7", "text": "选项7"},
{"value": "选项8", "text": "选项8"},
{"value": "选项9", "text": "选项9"},
{"value": "选项10", "text": "选项10"}
]
,
onShowPanel: function () {
var data = $('#text1').combobox('getData');
var value = $('#text1').combobox('getValue');
var startN = 0;
if (value != '') {
for (var i = 0; i < data.length; i++) {
if (data[i].value == value) {
startN = i;
break;
}
}
}
var deltaY = -1;
function setValue() {
startN += -deltaY;
if (startN < 0) {
startN = 0;
}
else if (startN > data.length - 1) {
startN = (data.length - 1);
}
$('#text1').combobox('select', data[startN].value);
}
$('#text1').combobox('panel').off('mousewheel').on('mousewheel', function (event) {
//事件event对象中可以获取如下三个属性值:
//deltaX:值为负的(-1),则表示滚轮向左滚动。值为正的(1),则表示滚轮向右滚动。
//deltaY:值为负的(-1),则表示滚轮向下滚动。值为正的(1),则表示滚轮向上滚动。
//deltaFactor:增量因子。通过 deltaFactor * deltaX 或者 deltaFactor * deltaY 可以得到浏览器实际的滚动距离。
console.log(event.deltaX, event.deltaY, event.deltaFactor);
deltaY = event.deltaY;
setValue();
});
}
});
下面是做好的gif动画图,很圆润,湿滑哦 哈哈 走起 吃午饭了哦!!

技术交流QQ群:15129679
鼠标上下滚动支持combobox选中的更多相关文章
- 如何让DbGrid支持鼠标滚轮滚动
如何让DbGrid支持鼠标滚轮滚动 在主窗体上加一个ApplicationEvents控件(控件在Additional面板中), 在它的OnMessage事件中加入下述代码,一切搞定-! proced ...
- 纯javaScript实现元素平滑滚动,改进前两个版本,支持鼠标滚轮滚动和点击元素滚动,滚动更顺畅
windowScroll(id, number, distance, direction, obj) 参数介绍: 1.id:所要滚动的元素id; 2.number:滚动次数; 3.distance:每 ...
- 问题记录:JavaFx 鼠标滑轮滚动事件监听!
问题描述: 在listview的item里面添加鼠标拖拽排序功能.代码如下: setOnMouseDragged(event -> { //设定鼠标长按0.3秒后才可拖拽 防止误操作 isCan ...
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- js判断鼠标向上滚动并浮动导航
<div id="Jnav"> <ul class="nav"> <li><a href="#"& ...
- WPF的ScrollViewer鼠标的滚动
在C# 中,两个ScrollViewer嵌套在一起或者ScrollViewer里面嵌套一个ListBox.Listview(控件本身有scrollviewer)的时候,我们本想要的效果是鼠标滚动整个S ...
- jquery.datetimepicker.js 当鼠标离开时,不选中当前时间,以达到清空的目的
validateOnBlur:true 当鼠标离开时,不选中当前时间,以达到清空的目的 使用方法: // 时间设置 $('#BankProduct_sale_begin'). ...
- Delphi - 鼠标上下滚动基础消息事件
Delphi实现对鼠标上下滚动基础消息的截获并处理 前几天有客户提出需求:由于个人PC界面限制,有时候电子图档显示不全,希望通过鼠标上下滚动用来控制电子图档的放大和缩小. 下面通过一个测试Demo来说 ...
- hexo next主题深度优化(十一),next主题中加入scrollReveal.js,让文章随着鼠标的滚动,出现点小动作。
文章目录 效果 scrollReveal简单介绍以及简单操作 参考文档: next主题中加入scrollReveal 给article标签添加属性 给底部的不蒜子添加属性 本地引入依赖并且编写启动函数 ...
随机推荐
- 打印 Go 结构体(struct)信息:fmt.Printf("%+v", user)
package main import "fmt" // 用户 type User struct { Id int Name string Age int } func main( ...
- 【Go命令教程】14. go env
命令 go env 用于打印 Go 语言的环境信息.其中的一些信息我们在之前已经多次提及,但是却没有进行详细的说明.在本小节,我们会对这些信息进行深入介绍.我们先来看一看 go env 命令情况下都会 ...
- solaris 软件包地址
1. http://www.opencsw.org/ 在Solaris 10下 1.安装pkgutil pkgadd -d http://get.opencsw.org/now 2.查询有那些PK ...
- WinForm通用自动更新器AutoUpdater项目实战
一.项目背景介绍 最近单位开发一个项目,其中需要用到自动升级功能.因为自动升级是一个比较常用的功能,可能会在很多程序中用到,于是,我就想写一个自动升级的组件,在应用程序中,只需要引用这个自动升级组件, ...
- Modbus TCP和Modbus Rtu协议的区别 转
http://blog.csdn.net/educast/article/details/9177679 Modbus rtu和Modbus tcp两个协议的本质都是MODBUS协议,都是靠MOD ...
- 线程池大小设置,CPU的核心数、线程数的关系和区别,同步与堵塞完全是两码事
线程池应该设置多少线程合适,怎么样估算出来.最近接触到一些相关资料,现作如下总结. 最开始接触线程池的时候,没有想到就仅仅是设置一个线程池的大小居然还有这么多的学问,汗颜啊. 首先,需要考虑到线程池所 ...
- sql语句练习题
6.Mysql不要用top用limit 在我们使用查询语句的时候,经常要返回前几条或者中间某几行数据,这个时候怎么办呢? 查找时Mysql不能用top,反正我用不了,查了下可以用limit来替换. 比 ...
- Ext.grid.GroupingView 分组显示
1.Ext.grid.GroupingView 主要配置项: enableGroupingMenu:是否在表头菜单中进行分组控制,默认为true group ...
- 【GitLab】【GitHub】GitLab和GitHub的双向同步
有这种需求,需要GitLab上的现有代码库,同步到GitHub上. 又有一种需求,需要将GitHub上的代码库,同步到gitlab上. 一.GitLab上的代码库,自动同步到GitHub上 大致需要三 ...
- 关于unity里pbr技术和材质 unity5默认shader和传统的对比
刚开始也不知道什么是pbr (Physically Based Rendering)后来才发现这是一种新的渲染方式 与之对应的是材质是pbs(Physically Based Shader) unit ...