jQuery Select 插件



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery132.js"></script>
<script type="text/javascript" src="jquery.select-1.3.6.js"></script>
<link href="selectStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
	$("select").sSelect();
})
</script>
</head>
<body>
<h1></h1>
<div style="float:left;">
<h2></h2>
<form action="#" method="get" style="margin:10px;" id="test">
    <select name="birthday" onchange="//alert('change');">
			<option value="">select years old</option>
			<option value="1980">1980</option>
            <option value="1981">1981</option>
            <option value="1982">1982</option>
			<option value="1983">1983</option>
            <option value="1984">1984</option>
			<option value="1985">1985</option>
            <option value="1986">1986</option>
            <option value="1987">1987</option>
            <option value="1988">1988</option>
            <option value="1989">1989</option>
	</select>
<br /><br />
</form>

/*
 * jQuery Select Plugins v1.3.6.2
 * Copyright (c) 2009 zhangjingwei
 * Dual licensed under the MIT and GPL licenses.
 * Date: 2009-11-17 09:37
 * download by ttp://www.codefans.net
 * Revision: 1.3.6.2
 * www.leadwit.com-浪子 modify in  2010-07-26 14:26
 */

(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"><h4></h4><ul></ul></div>');
		$('#'+selectId+' h4').empty().append($('#'+selectId+' option:selected').text());
		var selectWidth=$('#'+selectId+' select').width();
		if($.browser.safari){selectWidth = selectWidth+15}
		$('#'+selectId+' h4').css({width:selectWidth});
		var selectUlwidth = selectWidth + parseInt($('#'+selectId+' h4').css("padding-left")) + parseInt($('#'+selectId+' h4').css("padding-right"));
		$('#'+selectId+' ul').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 || $.browser.opera){$('.dropdown').css({'position':'relative','z-index':'0'});}
				$('#'+selectId).css({'position':'relative','z-index':'999'});
				$.fn.setSelectValue(selectId);
				selectIndex = $('#'+selectId+' li').index($('.selectedli')[0]);
				var windowspace = ($(window).scrollTop() + document.documentElement.clientHeight) - $('#'+selectId).offset().top;
				var ulspace = $('#'+selectId+' ul').outerHeight(true);
				var windowspace2 = $('#'+selectId).offset().top - $(window).scrollTop() - ulspace;
				windowspace < ulspace && windowspace2 > 0?$('#'+selectId+' ul').css({top:-ulspace}):$('#'+selectId+' ul').css({top:$('#'+selectId+' h4').outerHeight(true)});
				$(window).scroll(function(){
					windowspace = ($(window).scrollTop() + document.documentElement.clientHeight) - $('#'+selectId).offset().top;
					windowspace < ulspace?$('#'+selectId+' ul').css({top:-ulspace}):$('#'+selectId+' ul').css({top:$('#'+selectId+' h4').outerHeight(true)});
				});	
				$('#'+selectId+' li').click(function(e){
						selectIndex = $('#'+selectId+' li').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+' li').removeClass("over");
							$(this).addClass("over").addClass("selectedli");
							selectIndex = $('#'+selectId+' li').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').css("display") == 'block'){
				$.fn.clearSelectMenu(selectId,selectZindex);
				return false;
			}else{
				click_fun();
			};
			e.stopPropagation();
		})
		.bind("mouseover",function(e){
			if($('#'+selectId+' ul').css("display") == 'block'){
				//$.fn.clearSelectMenu(selectId,selectZindex);
				return false;
			}else{
				click_fun();
			};
			e.stopPropagation();
		})
		.bind("mouseout",function(e){
			if($('#'+selectId+' ul').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('keydown',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').css({width:selectWidth});
		var selectUlwidth = selectWidth + parseInt($('#'+selectId+' h4').css("padding-left")) + parseInt($('#'+selectId+' h4').css("padding-right"));
		$('#'+selectId+' ul').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').html($('#'+sID+' option:selected').text());
		$('#'+sID+' li').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').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);

@charset "utf-8";
.dropdown {outline:none;display:inline-block;*display:inline;}
.dropdown h4{cursor:default; text-indent:5px; margin:0; padding:0;}
.dropdown * {-moz-user-select:none;}
.dropdown h4.over {}
.dropdown div {display:block; /*fix bug*/}
.dropdown ul{position:absolute;display:none;margin:0;padding:0;float:left;clear:both;}
.dropdown ul li{text-indent:5px;margin:0;padding:0;list-style:none;display:block;cursor:default;}
.dropdown ul li.over{}
.dropselectbox {display:inline;}
/* write you style here download by http://www.codefans.net*/
.dropselectbox {background:#DDD url(selectBg.png) repeat-x left top;}
.dropdown h4{height:21px; font:12px/21px Arial, Helvetica, sans-serif; border:solid 1px #AAA;background:url(droparrow.gif) no-repeat right center;}
.dropdown h4.over{border-color:#369; background-image:url(droparrowover.gif);}
.dropdown h4.current{border-color:#003;}
.dropdown ul{border:1px solid #AAA; background:#FFF;}
.dropdown ul li{background:#FFF;height:19px;font:400 12px/19px Arial, Helvetica, sans-serif;}
.dropdown ul li.over{background:#369; color:#FFF;}

posted @ 2011-03-15 14:09 jackyong 阅读(942) 评论(1) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

jQuery Select 插件

公告