First of all thanks to the jQuery. Select. js author Zhang Jingwei, 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)
Copy codeThe 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 ("<div class = 'dropdown' id =" + selectId + "tabIndex =" + tabindex + "> </div> "). prependTo ($ ("#" + selectId ));
Var selectZindex = (this).css ('z-Index'), selectIndex = $ ('#' + selectId + 'option '). index ($ ('#' + selectId + 'option: selected') [0]);
$ ('#' + SelectId ). append ('<div class = "dropselectbox"> $ ('#' + 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 + 'div '). 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 ("<li class = 'fixselectbrowser '>" + $ (this). text () + "</li> ");
});
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
