鼠标上下滚动支持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标签添加属性 给底部的不蒜子添加属性 本地引入依赖并且编写启动函数 ...
随机推荐
- delphi 消息的使用
//分析结果 WM_AnalysisResult = WM_USER + 1009; SendMessage(G_MainHandle, WM_AnalysisResult, 0, 0); proce ...
- IIS日志文件清理
如何清除IIS日志以释放空间 打开“我的电脑”发现10GB容量的C盘只剩余355MB“可用空间”,已经严重不够用.如下图: 如果服务器的管理员并没有在C盘存储大容量文件,而IIS中站点的访问量又非常大 ...
- msgpack的数据序列和还原
msgpack的数据序列和还原 msgpack不仅可以序列一些常规的数据类型的数据,比如:string.datetime.integer...... 还能序列olevariant.stream 这就非 ...
- C# String.split()用法小结
第一种方法 string s=abcdeabcdeabcde; string[] sArray=s.Split('c') ; foreach(string i in sArray) Console.W ...
- python测试开发django-29.发送html格式邮件
前言 上一篇已经通过send_mail()函数发送纯文本的邮件,发送成功了,如果我们想发送一个html格式的邮件,如何实现呢? 发送html格式的邮件实际上还是调用send_mail()函数 ,只需多 ...
- springboot redis多数据源设置
遇到这样一个需求:运营人员在发布内容的时候可以选择性的发布到测试库.开发库和线上库. 项目使用的是spring boot集成redis,实现如下: 1. 引入依赖 <dependency> ...
- 混乱之子第七季/全集Sons of Anarchy迅雷下载
英文译名 Sons of Anarchy (第7季) (2014-秋季档回归)FX. 本季看点:<混乱之子>(Sons of Anarchy)最终季的客串演员还在不断增多.曾在1996年因 ...
- 低版本系统兼容的ActionBar(七)自定义Actionbar标题栏字体
这个自定义字体其实和ActionBar有关,但之前写AtionBar的时候没考虑到修改字体样式,今天看到一篇专门写这个的文章就贴上使用方式.╮(╯▽╰)╭,不得不说Actionbar的那个样式真是让人 ...
- PHP获取指定函数定义在哪个文件中及行号
当调试开源的代码时,希望查看某个函数的定义,那么就需要定位其位置.特别是有的项目中,函数会有多个地方都有定义,那么如果我想知道当前调用的这个函数是在哪里定义的,可以用下面这个方法. function ...
- JAVA 项目中使用 H2 数据库
为什么要使用H2数据库 H2数据库是可以嵌入到JAVA项目中的,因为只需要导入一个jar包即可,所以非常的方便. 项目中导入H2 将H2的jar包放到classpath里即可,我是用的maven,ma ...