Jquery plug in development to achieve the Google + circle selection function
- 2020-03-30 02:21:24
- OfStack
< img border = 0 id = theimg onclick = window. The open this. (SRC) SRC = "/ / files.jb51.net/file_images/article/201403/20140310154640.jpg? 2014210155022 ">
The specific principle and call is not detailed, you can see the code comments and DEMO DEMO (DEMO mod.udata.js has a Chinese characters to pinyin method, it is not part of the plug-in, but provides a pinyin search function for the plug-in).
;(function ($) {
/*
* Based on the jQuery Achieve similar Google+ Circle selection function plug-in (supports keyboard events) @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 there is no list data, it is interrupted
if(iset.data.length==0){return false}
//Initializes the drop-down list
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);
//Operation function
var Action={
init:function(){
//Mouse over the list
pull.delegate('li.hook_visible','mouseover',function(){
$(this).addClass(cls).siblings().removeClass(cls);
});
//Selection list
pull.delegate('li.hook_visible','click',function(){
Action.choose($(this));
});
//Click on the pop-up list
chose.click(function(){
Action.show();
});
//Remove selected
chose.delegate('.'+iset.removeEl,'click',function(){
Action.undock($(this));
});
},
move: function(dir) {
//Move - up :: STR =up | ::step=down;
var index;
var item=pull.find('li.hook_visible').filter(':visible');
var cur=item.filter('.'+cls);
cur.size()==0 ? index=-1 : index=item.index(cur);
item.eq(dir=='up' ? (index<1 ? 0 : index-1) : index+1).addClass(cls).siblings().removeClass(cls);
//Scroll as you move
if(item.size()>_l){
//Under the double scroll
if(dir=='down'){
pull.scrollTop((index+2-_l)*_h);
}
//Turn on the scroll
if(dir=='up'){
pull.scrollTop((index-1)*_h);
}
}
},
choose:function(el){
//A list of choices
var mid=el.attr('data-mid');
var name=el.text();
tips.before('<div class="'+iset.selItemCls+'"><span>'+name+'</span><a href="javascript:;" class="'+iset.removeEl+'" data-mid="'+mid+'">x</a></div>');
input.focus();
el.hide().removeClass('hook_visible');
//Returns the id of the selected list
ids.val() =='' ? ids.val(mid) : ids.val(ids.val()+','+mid);
pull.find('li.hook_visible:first').addClass(cls).siblings().removeClass(cls);
this.upstyle();
},
undock:function(el){
//Delete the selected
var mid=el.attr('data-mid');
var idsArr=ids.val().split(',');
input.focus();
el.parent().remove();
idsArr=$.grep(idsArr,function(v,k){
return v != mid;
});
ids.val(idsArr.join(','));
pull.find('li.hook_'+mid).show().addClass('hook_visible');
this.upstyle();
},
show:function(){
//Display list
pull.slideDown(100,function(){Action.match('')});
pull.find('li.hook_visible:first').addClass(cls).siblings().removeClass(cls);
$(SELF).focus();
tips.hide();
input.addClass(iset.inputWCls);
},
hide:function(){
//Hidden list
pull.slideUp(100);
$(SELF).blur();
tips.show();
input.removeClass(iset.inputWCls);
},
upstyle:function(type){
//Update drop-down style - when newline has been selected -
var len=pull.find('li.hook_visible').size();
if(type=='match'){
len=pull.find('li:visible').size();
}
if(len<_l){
pull.height(_h*len);
if(len==0){
this.hide();
}
}else{
pull.height(_h*_l);
}
pull.css('top',chose.outerHeight());
},
match:function(str){
//Filter selection - pinyin selection required plugin support
var visible=pull.find('li.hook_visible');
visible.each(function(){
var name=$(this).attr('data-name');
name.match(str.toUpperCase())!=null ? $(this).show() : $(this).hide();
});
if(visible.size()==0 && $('.'+iset.noResCls).size()==0){
pull.find('li:first').before('<li class="'+iset.noResCls+'"> Temporarily no Selection list</li>')
}
this.upstyle('match');
},
blur:function(str){
//Unselected areas click hide
pull.find('li.hook_visible').each(function(){
var name=$(this).text();
if(name == str){
Action.choose($(this));
}
});
input.val('');
}
}
Action.init();
//Keyboard control - bind input form
$(this).on({
//Keyboard pop-up
'keyup change':function(){
var val= $.trim(input.val());
Action.match(val);
},
//Lose focus
'blur':function(){
var val= $.trim(input.val());
Action.blur(val);
},
//Keyboard press - captures the keyboard value to execute the corresponding event
'keydown':function(e){
switch (e.keyCode) {
case 8:
if($.trim(input.val())==''){
e.preventDefault();
var last=chose.find('.'+iset.removeEl+':last');
if(last.size()>0){
Action.undock(last);
}
}
break;
case 27:
e.preventDefault();
Action.hide();
break;
case 38:
e.preventDefault();
Action.move('up');
break;
case 40:
e.preventDefault();
Action.move('down')
break;
case 9:
case 13:
e.preventDefault();
Action.choose(pull.find('.'+cls));
break;
default:
$.noop();
}
}
});
//Click on the non-current area to hide the pop-up layer
main.click(function(e){
e.stopPropagation();
});
$(document).click(function(){
Action.hide();
});
}
$.fn.iChoose.defaults = {
data:UDatas,
limit:5,
choMain:'#iChooseMain',
pullCls:'icm-list',
choCls:'.icm-box',
selItemCls:'icm-item',
removeEl:'icm-delete',
selCls:'selected',
inputWCls:'icm-input-w',
tips:'.icm-cur-txt',
noResCls:'hook_noresult',
chsIds:'#iChooseIds'
}
})(jQuery);