chosen.jquery.js插件拓展总结

本文介绍使用jQuery进行插件开发的实践经验,涵盖事件委派、滚动条高度获取、元素事件触发等技巧,并通过具体示例展示了如何实现动态数据加载及搜索功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

jquery知识点总结

监听事件(事件委派)
.chosen-search input原本不存在,是动态写入HTML。所以必须将这个元素的事件委派到document元素,让document监
听到产生这个元素就赋予input事件(这里有兼容性问题,IE浏览器不支持input事件)。
$(document).on( 'input', '.chosen-search input' ,function(){
     alert(123);
});
文本内容改变事件:contentchanged
jQuery的contents()方法获取到该元素的所有节点(包括文本节点)与获取子元素节点children()不同;text()方法获
取的文本内容;
$(document).on( 'contentchanged', '.chosen-results' ,function(){
      $(this).find('.no-results').contents().text("没有匹配到数据").css('color','red');           
 });
触发元素事件或更新对象:trigger
$('.chosen-results').trigger('contentchanged');
jQuery获取元素滚动条高度
 $('.chosen-results').on( 'scroll', function(){
       var ulHeight     = $(this).height();  //元素高度
       var scrollTop    = $(this).scrollTop(); // 元素滚动条到顶部的高度
       var scrollHeight = $('.chosen-results')[0].scrollHeight - ulHeight;// 元素滚动条总高度
});
$(this)的那些事
如何表示$(this)的子元素:
$(this).find('.className').html()
如何与$(this)共用事件:
$('.className',this).on('click',function(){
    alert(123);
})

插件拓展内容代码

CSS部分(主要新增遮罩层、Loading图标)
<style>
        .chosen-drop-mask{
            width: 100%;
            height: 100%;
            background: black;
            opacity: 0.2;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10000;
            display: none;
            text-align: center;
        }
        .fa-spinner {
            position: relative;
            top: 50%;
        }
    </style>
HTML部分
<select name="platform_id" class="chosen-select1" defaulted="{{ request('platform_id' , '') }}"></select>
js部分
(function(chosenClass){
            // 在这里初始化选项会使得input框出现其他内容
            var html = "<option value='' >全部渠道</option>";
            var list;
            var current_page = 1;
            // 插件初始化
            $(chosenClass).chosen({search_contains: false,width:"25%" , no_results_text: '查找中...' });
            $('.chosen-search input').attr('placeholder' , '停顿3s自动开始搜索');
            $('.chosen-drop').append('<div class="chosen-drop-mask"><i class="fa fa-spinner fa-spin white bigger-250"></i></div>');
            // 默认选择第一页
            chosenSelect( 1 , html );
            // 事件委派, 监听插件搜索值改变,动态查询数据:输入完3秒后查询(input事件会有兼容性问题)
            var timer;
            $(document).on( 'input', '.chosen-search input' ,function(){
                clearTimeout(timer);
                timer = setTimeout(function(){
                    var like = $('.chosen-search input').val();
                    chosenSelect(1 ,html , like )
                },3000);
            });
            $('.chosen-results').on( 'scroll', function(){
                var ulHeight     = $(this).height();
                var scrollTop    = $(this).scrollTop();
                var scrollHeight = $('.chosen-results')[0].scrollHeight - ulHeight;
                var html         = $(chosenClass).html();
                var like = $('.chosen-search input').val();
                if( scrollHeight - scrollTop < 5 && current_page < list.last_page ){
                    current_page ++;
                    chosenSelect( current_page , html , like );
                }
            });

            // 手动查询数据
            function chosenSelect( page , html , like   ){


                var defaulted = $(chosenClass).attr('defaulted');
                $('.chosen-search input').val(like).blur(); // 搜索框失去焦点
                $('.chosen-drop-mask').show();              // 遮罩层防止快速输入
                $.post('/common/platformchosen' ,{ page:page , like:like ,defaulted:defaulted , _token: $('[name=_token]').val() } , function(platform){
                    var data  = platform.data;
                    list      = platform;
                    //console.dir(platform)
                    if( data.length === 0 ){
                        $(document).on( 'contentchanged', '.chosen-results' ,function(){
                            //$(this).find('.no-results').contents().text("没有匹配到数据").css('color','red');
                            $(this).find('.no-results span').html("没有查找到数据").css('color','red');
                        });
                        $('.chosen-results').trigger('contentchanged');
                    }else{
                        for( var key in data ){
                            html += '<option value="' +data[key].id+ '">'+ data[key].name + '</option>';
                        }
                        $(chosenClass).html( html ).val(defaulted).trigger("chosen:updated");  // 重新加载选项 , 保留默认选项 ,刷新插件
                    }

                    $('.chosen-search input').val(like).focus();          // 保留搜索值并获取焦点
                    $('.chosen-drop-mask').hide();
                } )

            }
        })('.chosen-select1')
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值