| ;(function ($) {
/*
* Based on jquery implementation similar to the Google + Circle selection feature plug-in (keyboard event support) @Mr.
*/
$.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 no list data is interrupted
if (iset.data.length==0) {return false}
Initializing 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);
Action function
var action={
Init:function () {
List mouse across
Pull.delegate (' li.hook_visible ', ' mouseover ', function () {
$ (this). addclass (CLS). Siblings (). Removeclass (CLS);
});
SELECT 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 and down-on:: Str=up | Under:: 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);
Follow scrolling when moving
if (Item.size () >_l) {
Roll down
if (dir== ' down ') {
Pull.scrolltop ((index+2-_l) *_h);
}
Roll up and move.
if (dir== ' up ') {
Pull.scrolltop ((index-1) *_h);
}
}
},
Choose:function (EL) {
List selection
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 ');
Return check list ID
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 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 () {
Show 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 () {
Hide List
Pull.slideup (100);
$ (SELF). blur ();
Tips.show ();
Input.removeclass (ISET.INPUTWCLS);
},
Upstyle:function (type) {
Update Drop-down list Style-when the line is 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 requires 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+ ' "> No selectable list </li> ')
}
This.upstyle (' match ');
},
Blur:function (str) {
Non-select area 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-binding input form
$ (this). On ({
Keyboard bouncing 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 keyboard values to perform corresponding events
/*
8-delete;
27-esc;
38-up;
40-down;
9-tab;
13-enter
*/
' 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 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: Incoming value, can be real-time Ajax biography, the demo is a JSON value, the specific format can refer to the $.map (...) in Mod.udatas.js.
Limit: Number of bars per display, other scrolling display
Chomain: Load Zone ID
PULLCLS: Class of Pop-up list
CHOCLS: Peripheral Class of selected list
SELITEMCLS: A single element class that has been selected
Removeel: Deletes the element's class
SELCLS: List of highlighted class
The class of Inputwcls:input
Tips: Default hint value element hook
NORESCLS: CLS with no results in list
Chsids: The ID value of the list has been selected and passed to the backend. (This value can also be used to return the value from the plug-in using the callback function)
*/
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); |
