我使用这个 jQuery 插件：http ://www.myjqueryplugins.com/jquery-plugin/selectyze
我注意到下拉列表仅在选择框下方展开，当在页面底部打开列表时，使列表转到“外部”浏览器窗口。如果下面的空间很小，您可能知道选择框上方的标准选择框扩展，这可能以某种方式使用此脚本吗？
插件脚本
$(document).ready(function(){
// simple Selectyze call
$(".selectyze").Selectyze();
// call with options
$(".selectyze").Selectyze({
theme:'css3',
effectOpen:'fade',
effectClose:'slide'
});
});
jQuery
/************************************************************************
*************************************************************************
@Name : Selectyze - jQuery Plugin
@Revison : 1.1
@Date : 25/01/2011
@Author: Mickael SURREL - ALPIXEL Agency - (www.myjqueryplugins.com - www.alpixel.fr)
@License : Open Source - MIT License : http://www.opensource.org/licenses/mit-license.php
**************************************************************************
*************************************************************************/
(function($) {
$.fn.Selectyze = function(opt) {
var defaults = {
theme:'css3',
effectOpen : 'slide',
effectClose : 'slide'
};
if(this.length)
return this.each(function() {
/** vars **/
var
opts = $.extend(defaults, opt),
$this = $(this),
optionselected = $this.find('option').filter(':selected'),
DivSelect = $('<div>', {'class' : 'DivSelectyze '+opts.theme+''}),
UlSelect = $('<ul>',{'class':'UlSelectize'}),
liHtml = '';
zIndex = 9999;
/** DOM construction && manipulation **/
constructList($this);
$this.hide();
$this.after(DivSelect);
DivSelect.html('<a href="#" rel="'+optionselected.val()+'" class="selectyzeValue">'+optionselected.text()+'</a>');
UlSelect.appendTo(DivSelect).html(liHtml);
$('.DivSelectyze').each(function(i,el){
$(this).css('z-index',zIndex);
zIndex -= 10;
});
/** Actions **/
n=false;
DivSelect.mouseenter(function() {n =false;}).mouseleave(function() {n = true;});
DivSelect.find('a.selectyzeValue').click(function(e){
e.preventDefault();
closeList($('ul.UlSelectize').not($(this).next()));
openList($(this).next('ul.UlSelectize'));
});
UlSelect.find('a').click(function(e){
e.preventDefault();
DivSelect.find('a.selectyzeValue').text($(this).text());
$this.val($(this).attr('rel'));
$this.trigger('change');
closeList($this.next().find('.UlSelectize'));
});
$(document).click(function(e){if(n) closeList($('.UlSelectize').not(':hidden'));});
/** Construct HTML list ul/li **/
function constructList(el){
/** Creat list content **/
if(el.has('optgroup').length)
{
el.find('optgroup').each(function(i,el){
liHtml += '<li><span class="optgroupTitle">'+$(this).attr('label')+'</span><ul>';
$(this).children().each(function(i,el){
liHtml += '<li><a rel="'+$(this).val()+'" href="#">'+$(this).text()+'</a></li>';
});
liHtml += '</ul></li>';
});
}
else
{
el.find('option').each(function(i,el){
liHtml += '<li><a rel="'+$(this).val()+'" href="#">'+$(this).text()+'</a></li>';
});
}
}
/** Effect Open list **/
function openList(el) {
switch (opts.effectOpen) {
case 'slide' :
if(!el.is(':hidden')) el.stop(true,true).slideUp('fast');
else el.stop(true,true).slideDown('fast');
break;
case 'fade':
if(!el.is(':hidden')) el.stop(true,true).fadeOut('fast');
else el.stop(true,true).fadeIn('fast');
break;
default :
if(!el.is(':hidden')) el.stop(true,true).hide();
else el.stop(true,true).show();
}
}
/** Effect Close list **/
function closeList(el) {
switch (opts.effectClose) {
case 'slide' :
el.stop(true,true).slideUp('fast');
break;
case 'fade':
el.stop(true,true).fadeOut('fast');
break;
default :
el.hide();
}
}
});
}
})(jQuery);
CSS
/************************************************************************
*************************************************************************
@Name : Selectyze - jQuery Plugin CSS
@Revison : 1.0
@Date : 19/12/2011
@Author: Mickael SURREL - ALPIXEL Agency - (www.myjqueryplugins.com - www.alpixel.fr)
@License : Open Source - MIT License : http://www.opensource.org/licenses/mit-license.php
**************************************************************************
*************************************************************************/
/***************************/
/** Common to every theme **/
/***************************/
.DivSelectyze {
position:relative;
width:253px;
float:left;
margin-top:15px;
}
.DivSelectyze .selectyzeValue {
position:relative;
z-index:10;
display:block;
text-decoration:none;
}
.DivSelectyze ul {list-style:none;}
.DivSelectyze .UlSelectize {
position:absolute;
z-index:9999;
display:none;
}
.DivSelectyze li a {
display:block;
text-decoration:none;
}
.optgroupTitle {
display:block;
}
/*******************************/
/** END COMMON TO EVERY THEME **/
/*******************************/
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*----------------------------------
You can add your own theme below !!
To add your theme, be sure to have 5 CSS elements :
.your_theme .selectyzeValue {} -> Appearance of your select element
.your_theme .UlSelectize {} -> Appearance of the dropdown list
.your_theme li a {} -> Appearance of the items into the dropdown list
.your_theme li a:hover {} -> items on hover
.your_theme .optgroupTitle {} -> Appearance of the optgroup label !! only if you have <optgroup> element into your list
that's all ! \o/
----------------------------------*/
/*****************/
/** SKYPE THEME **/
/*****************/
.skype .selectyzeValue {
font:18px/45px Arial;
color:#2a98c1;
width:254px;
height:45px;
background:url('bg_skype.png') no-repeat;
padding-left:15px
}
.skype .UlSelectize {
top:39px;
left:6px;
width:239px;
border:1px solid #00aff0;
background-color:#f7f8ff
}
.skype li a {
height:28px;
font:14px/30px Arial;
background-color:transparent;
color:#2a98c1;
border-top:1px solid #84d8f8;
padding-left:10px
}
.skype li a:hover {
color:#fff;
background-color:#2a98c1;/** gradient bgcolors */
background-image: -webkit-gradient(linear, left top, left bottom, from(#84d8f8), to(#0ab2f1)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #84d8f8, #0ab2f1); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #84d8f8, #0ab2f1); /* FF3.6 */
background-image: -ms-linear-gradient(top, #84d8f8, #0ab2f1); /* IE10 */
background-image: -o-linear-gradient(top, #84d8f8, #0ab2f1); /* Opera 11.10+ */
background-image: linear-gradient(top, #84d8f8, #0ab2f1)
}
.skype .optgroupTitle {
margin-top:15px;
font-size:16px;
padding-left:10px;
background-color:#0fb1ef;
color:#fff;
}