Improved jQuerySelect (single choice) simulation plug-in V1.3.6, added the mouseover event first thanks to the jQuery. Select. js author Zhang Wei, jQuery. Select. js Project address: http://www.zhangjingwei.com/archives/jquery-select%E5%8D%95%E9%80%89-%E6%A8%A1%E6%8B%9F%E6%8F%92%E4%BB%B6-v1-3-6/
The project needs to use the Select simulation effect based on jQuery, mainly to implement the onmouseover event of the select statement, without the need to click when passing through to Select a lot of undesired results, the final decision is in jQuery. select. js 1.3.6.
The code after the mouseover event is added: (download the original version on the author's homepage)
The Code is as follows:
/*
* JQuery Select Plugins v1.3.6.2
* Copyright (c) 2009 zhangjingwei
* Dual licensed under the MIT and GPL licenses.
* Date:
* Revision: 1.3.6.2
* Www.leadwit.com-prodigal son modify in
*/
(Function ($ ){
$. Fn. extend ({
SSelect: function (){
Return this. each (function (I, obj ){
Var selectId = (this. name | this. id) + '_ jqselect' + I |' _ jqselect' + I;
If (obj. style. display! = 'None' & $ (this). parents () [0]. id. indexOf ('_ jqselect') <0 ){
Var tabindex = this. tabIndex | 0;
$ (This). before ("
"). PrependTo ($ (" # "+ selectId ));
Var selectZindex = (this).css ('z-Index'), selectIndex = $ ('#' + selectId + 'option '). index ($ ('#' + selectId + 'option: selected') [0]);
$ ('#' + SelectId). append ('
');
$ ('#' + SelectId + 'h4 '). empty (). append ($ (' # '+ selectId + 'option: selected'). text ());
Var selectWidth = $ ('#' + selectId + 'select'). width ();
If ($. browser. safari) {selectWidth = selectWidth + 15}
$ ('#' + SelectId + 'h4'0000.css ({width: selectWidth });
Var selectUlwidth = selectWidth + parseInt ($ ('#' + selectId + 'h4'0000.css ("padding-left ")) + parseInt ($ ('#' + selectId + 'h4'character .css ("padding-right "));
$ ('#' + SelectId + 'ul'0000.css ({width: selectUlwidth + 'px '});
$ ('#' + SelectId + 'select'). hide ();
$ ('#' + SelectId + 'P'). hover (function (){
$ ('#' + SelectId + 'h4 '). addClass ("over ");
}, Function (){
$ ('#' + SelectId + 'h4 '). removeClass ("over ");
});
Var timeobj;
$ ('#' + SelectId + 'ul '). bind ("mouseover", function (e ){
ClearTimeout (timeobj );
});
Var click_fun = function (){
$ ('#' + SelectId + 'h4 '). addClass ("current ");
$ ('#' + SelectId + 'ul '). show ();
Var selectZindex = ('{'{selectid}.css ('z-Index ');
If ($. browser. msie | pai.browser.opera?#(('.dropdown'}.css ({'position': 'relative ', 'z-Index': '0 '});}
Certificate ('region'regionselectid).css ({'position': 'relative ', 'z-Index': '20140901 '});
$. Fn. setSelectValue (selectId );
SelectIndex = $ ('#' + selectId + 'lil'). index ($ ('. selectedli') [0]);
Var windowspace = ($ (window). scrollTop () + document.doc umentElement. clientHeight)-$ ('#' + selectId). offset (). top;
Var ulspace = $ ('#' + selectId + 'ul '). outerHeight (true );
Var windowspace2 = $ ('#' + selectId). offset (). top-$ (window). scrollTop ()-ulspace;
Windowspace <ulspace & windowspace2> 0? $ ('#' + SelectId + 'ul'0000.css ({top:-ulspace}): $ ('#' + selectId + 'ul'0000.css ({top: $ ('#' + selectId + 'h4 '). outerHeight (true )});
$ (Window). scroll (function (){
Windowspace = ($ (window). scrollTop () + document.doc umentElement. clientHeight)-$ ('#' + selectId). offset (). top;
Windowspace <ulspace? $ ('#' + SelectId + 'ul'0000.css ({top:-ulspace}): $ ('#' + selectId + 'ul'0000.css ({top: $ ('#' + selectId + 'h4 '). outerHeight (true )});
});
$ ('#' + SelectId + 'lil'). click (function (e ){
SelectIndex = $ ('#' + selectId + 'lil'). index (this );
$. Fn. keyDown (selectId, selectIndex );
$ ('#' + SelectId + 'h4 '). empty (). append ($ (' # '+ selectId + 'option: selected'). text ());
$. Fn. clearSelectMenu (selectId, selectZindex );
E. stopPropagation ();
E. cancelbubble = true;
})
. Hover (
Function (){
$ ('#' + SelectId + 'lil'). removeClass ("over ");
$ (This). addClass ("over"). addClass ("selectedli ");
SelectIndex = $ ('#' + selectId + 'lil'). index (this );
},
Function (){
$ (This). removeClass ("over ");
}
);
}
$ ('#' + SelectId)
. Bind ("focus", function (){
// $. Fn. clearSelectMenu (selectId, selectZindex );
$ ('#' + SelectId + 'h4 '). addClass ("over ");
})
. Bind ("click", function (e ){
If ($ ('#' + selectId + 'ul'wash.css ("display") = 'block '){
$. Fn. clearSelectMenu (selectId, selectZindex );
Return false;
} Else {
Click_fun ();
};
E. stopPropagation ();
})
. Bind ("mouseover", function (e ){
If ($ ('#' + selectId + 'ul'wash.css ("display") = 'block '){
// $. Fn. clearSelectMenu (selectId, selectZindex );
Return false;
} Else {
Click_fun ();
};
E. stopPropagation ();
})
. Bind ("mouseout", function (e ){
If ($ ('#' + selectId + 'ul'wash.css ("display") = 'block '){
Timeobj = setTimeout (function (){
$. Fn. clearSelectMenu (selectId, selectZindex );
},500 );
Return false;
}
E. stopPropagation ();
})
. Bind ('mousewheel ', function (e, delta ){
E. preventDefault ();
Var mousewheel = {
$ Obj: $ ('#' + selectId + 'Li. over '),
$ Slength: $ ('#' + selectId + 'option'). length,
Mup: function (){
This. $ obj. removeClass ("over ");
SelectIndex = 0? SelectIndex = 0: selectIndex --;
$. Fn. keyDown (selectId, selectIndex );
},
Mdown: function (){
This. $ obj. removeClass ("over ");
SelectIndex = (this. $ slength-1 )? SelectIndex = this. $ slength-1: selectIndex ++;
$. Fn. keyDown (selectId, selectIndex );
}
}
Delta> 0? Mousewheel. mup (): mousewheel. mdown ();
})
. Bind ("dblclick", function (){
$. Fn. clearSelectMenu (selectId, selectZindex );
Return false;
})
. Bind ("keydown", function (e ){
$ (This). bind ('keylow', function (e ){
If (e. keyCode = 40 | e. keyCode = 38 | e. keyCode = 35 | e. keyCode = 36 ){
Return false;
}
});
Var $ obj = $ ('#' + selectId + 'Li. over'), $ slength = $ ('#' + selectId + 'option'). length;
Switch (e. keyCode ){
Case 9:
Return true;
Break;
Case 13:
// Enter
$. Fn. clearSelectMenu (selectId, selectZindex );
Break;
Case 27:
// Esc
$. Fn. clearSelectMenu (selectId, selectZindex );
Break;
Case 33:
$ Obj. removeClass ("over ");
SelectIndex = 0;
$. Fn. keyDown (selectId, selectIndex );
Break;
Case 34:
$ Obj. removeClass ("over ");
SelectIndex = ($ slength-1 );
$. Fn. keyDown (selectId, selectIndex );
Break;
Case 35:
$ Obj. removeClass ("over ");
SelectIndex = ($ slength-1 );
$. Fn. keyDown (selectId, selectIndex );
Break;
Case 36:
$ Obj. removeClass ("over ");
SelectIndex = 0;
$. Fn. keyDown (selectId, selectIndex );
Break;
Case 38:
// Up
E. preventDefault ();
$ Obj. removeClass ("over ");
SelectIndex = 0? SelectIndex = 0: selectIndex --;
$. Fn. keyDown (selectId, selectIndex );
Break;
Case 40:
// Down
E. preventDefault ();
$ Obj. removeClass ("over ");
SelectIndex = ($ slength-1 )? SelectIndex = $ slength-1: selectIndex ++;
$. Fn. keyDown (selectId, selectIndex );
Break;
Default:
E. preventDefault ();
Break;
};
})
. Bind ("blur", function (){
$. Fn. clearSelectMenu (selectId, selectZindex );
Return false;
})
. Bind ("selectstart", function (){
Return false;
});
} Else if ($ (this). parents () [0]. id. indexOf ('_ jqselect')> 0 ){
SelectId = $ (this). parents () [0]. id;
$. Fn. setSelectValue (selectId );
Var selectWidth = $ ('#' + selectId + 'select'). width ();
If ($. browser. safari) {selectWidth = selectWidth + 15}
$ ('#' + SelectId + 'h4'0000.css ({width: selectWidth });
Var selectUlwidth = selectWidth + parseInt ($ ('#' + selectId + 'h4'0000.css ("padding-left ")) + parseInt ($ ('#' + selectId + 'h4'character .css ("padding-right "));
$ ('#' + SelectId + 'ul'0000.css ({width: selectUlwidth + 'px '});
If (this. style. display! = 'None') {$ (this). hide ();}
}})},
ClearSelectMenu: function (selectId, selectZindex ){
If (selectId! = Undefined ){
SelectZindex = selectZindex | 'auto ';
$ ('#' + SelectId + 'ul '). empty (). hide ();
$ ('#' + SelectId + 'h4 '). removeClass ("over"). removeClass ("current ");
(('{'{Selectid}.css ({'z-Index': selectZindex });
}
},
SetSelectValue: function (sID ){
Var content = [];
$. Each ($ ('#' + sID + 'option'), function (I ){
Content. push ("
"+ $ (This). text () +"");
});
Content = content. join ('');
$ ('#' + SID + 'ul'{.html (content );
$ ('#' + SID + 'h4'hangzhou.html ($ ('#' + sID + 'option: selected'). text ());
$ ('#' + SID + 'lil '). eq ($ ('#' + sID + 'select') [0]. selectedIndex ). addClass ("over "). addClass ("selectedli ");
},
KeyDown: function (sID, selectIndex ){
Var $ obj = $ ('#' + sID + 'select ');
$ Obj [0]. selectedIndex = selectIndex;
$ Obj. change ();
$ ('#' + SID + 'li: eq ('+ selectIndex +'). toggleClass ("over ");
$ ('#' + SID + 'h4'hangzhou.html ($ ('#' + sID + 'option: selected'). text ());
}
});
Var types = ['dommousescroll ', 'mousewheel'];
$. Event. special. mousewheel = {
Setup: function (){
If (this. addEventListener)
For (var I = types. length; I ;)
This. addEventListener (types [-- I], handler, false );
Else
This. onmousewheel = handler;
},
Teardown: function (){
If (this. removeEventListener)
For (var I = types. length; I ;)
This. removeEventListener (types [-- I], handler, false );
Else
This. onmousewheel = null;
}
};
$. Fn. extend ({
Mousewheel: function (fn ){
Return fn? This. bind ("mousewheel", fn): this. trigger ("mousewheel ");
},
Unmousewheel: function (fn ){
Return this. unbind ("mousewheel", fn );
}
});
Function handler (event ){
Var args = []. slice. call (arguments, 1), delta = 0, returnValue = true;
Event = $. event. fix (event | window. event );
Event. type = "mousewheel ";
If (event. wheelDelta) delta = event. wheelDelta/120;
If (event. detail) delta =-event. detail/3;
Args. unshift (event, delta );
Return $. event. handle. apply (this, args );
}
}) (JQuery );
Demo address http://demo.jb51.net/js/jQuery.Select/index.html
Package download http://www.jb51.net/jiaoben/21397.html
