zoukankan      html  css  js  c++  java
  • 鼠标上下滚动支持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

  • 相关阅读:
    mtext中的las参数的作用
    并行与CPE
    根据局部性得出最优矩阵乘法写法
    cache中的thrashing问题和应对办法
    csapp(3e)的bomblab的phase_6详解(没有详细到逐行解析的程度)
    计划
    遇到问题怎么处理?
    数据对齐的几问
    python进阶(八、mysql:完整性约束)
    python进阶(七、mysql:表操作、数据操作、数据类型)
  • 原文地址:https://www.cnblogs.com/yeminglong/p/8334950.html
Copyright © 2011-2022 走看看