jquery插件开发之实现google+圈子选择功能

2020-05-22 15:13:05易采站长站整理


具体原理与调用不详述,可看代码注释及DEMO演示(演示中mod.udata.js里有一个汉字转拼音方法,它并不是插件的一部分,但为插件提供了拼音搜索的功能)。



;(function ($) {
    /*
     * 基于jQuery实现类似Google+圈子选择功能插件(支持键盘事件)@Mr.Think(http://mrthink.net/)
     */
    $.fn.iChoose = function (options) {
        var SELF=this;
        var iset = $.extend({}, $.fn.iChoose.defaults, options);
        var _h,pull=null;
        var main=$(iset.choMain);
        var chose=$(iset.choCls,main);
        var input=$(SELF);
        var tips=$(iset.tips,main);
        var cls=iset.selCls;
        var ids=$(iset.chsIds);
        var _l=iset.limit;
        //若无列表数据则中断
        if(iset.data.length==0){return false}
        //初始化下拉列表
        var tpl='<div class=”‘+iset.pullCls+'”><ul>’;
        var tplArr=[];
        $.each(iset.data,function(k,v){
            tplArr.push(‘<li data-mid=”‘+ v.mid+'” data-name=”‘+ v.filterName.toUpperCase()+'” class=”hook_visible hook_’+v.mid+'”>’+ v.name+'</li>’);
        });
        tpl=tpl+tplArr.join(”)+'</ul></div>’;
        if(pull==null){
            main.append(tpl);
        }
        pull=$(‘.’+iset.pullCls,main);
        _h=pull.find(‘li’).outerHeight(true);
        pull.width(main.width()-2);
        //操作函数
        var Action={
            init:function(){
                //列表鼠标划过