管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

JQuery SELECT单选模拟jQuery.select.js

　　基于jQuery JavaScript Library v1.3.2 的单选模拟

　　(本文件是跟据 zhangjingwei 的Jquery Select(单选) 模拟插件 V1.3.4 修改而来的)

　　a. 修改的主要原因是，原来的zhangjingwei的模拟在显示方式上的问题。在跟文字交替出现时会出现错位。现将模拟DIV的display修改为inline方式。更自然的嵌入到文本行中。

　　b.在加载文件后自动转化样式名为'commonselect' 的select。简化调用

　　c.对select的onchange()事件的响应。以及宽度获取的小调整

　　jquery.select.js

　　

复制代码 代码如下:

　　/*

　　* jQuery.select.js

　　*/

　　jQuery.fn.sSelect = function(){

　　var selectId = $(this).attr('id');

　　var selectZindex = $(this).css('z-index');

　　var selectIndex = $('#'+selectId+' > select > option').index($('#'+selectId+' > select > option:selected')[0]);

　　$('#'+selectId).append('<div class="dropselectbox"><h4></h4><span class="FixSelectBrowserSpan"></span><ul style="display:none" style="display:none"><li></li></ul></div>');

　　$('#'+selectId+' > div > h4').empty().append($('#'+selectId+' > select > option:selected').text());

　　$('.dropselectbox').css("display", 'block');

　　//取select的宽度 优先级 select样式中的宽度 - select自动的宽度 - 默认为60

　　var selectcssWidth = $('#'+selectId+'> select').css('width');

　　selectcssWidth = typeof(selectcssWidth) =='undefined' ? 0 : parseInt(selectcssWidth.replace('px','')) +5 ;

　　var selectWidth = selectcssWidth ? selectcssWidth : ( $('#'+selectId+'> select').width() > 0 ? $('#'+selectId+'> select').width() + 5 : 60);

　　$('#'+selectId).css("margin-right",selectWidth);    //修改偏移量

　　$('#'+selectId+' > div > h4').css("width", selectWidth); //将原select的宽度赋值给生成的select（并不是h4的总宽度）

　　$('#'+selectId+' > div > ul').css("width",selectWidth); //将h4的总宽度赋值给Ul

　　$('#'+selectId+' > select').hide();

　　$('#'+selectId+' > div').hover(function(){

　　$('#'+selectId+' > div > h4').addClass("over");

　　$('#'+selectId+' > div > span').addClass("over");

　　},function(){

　　$('#'+selectId+' > div > h4').removeClass("over");

　　$('#'+selectId+' > div > span').removeClass("over");

　　});

　　$('#'+selectId)

　　.bind("focus",function(){

　　__clearSelectMenu();

　　$('#'+selectId+' > div > h4').addClass("over");

　　$('#'+selectId+' > div > span').addClass("over");

　　})

　　.bind("click",function(e){

　　//$('#value2').append('点击：'+selectIndex+'  <br>');

　　if($('#'+selectId+' > div > ul').css("display") == 'block'){

　　__clearSelectMenu(selectId);

　　return false;

　　}else{

　　if ($.browser.opera){__clearSelectMenu();}

　　$('#'+selectId+' > div > h4').addClass("current");

　　$('#'+selectId+' > div > span').addClass("over").addClass("current");

　　$('#'+selectId+' > div > ul').show();

　　var selectZindex = $(this).css('z-index');

　　if ($.browser.msie || $.browser.opera){

　　$('.dropdown').removeClass('overclass');

　　}

　　$('#'+selectId).addClass('overclass');

　　__setSelectValue(selectId);

　　var windowspace = ($(window).scrollTop() + document.documentElement.clientHeight) - $(this).offset().top;

　　var ulspace = $('#'+selectId+' > div > ul').outerHeight(true);

　　var windowspace2 = $(this).offset().top - $(window).scrollTop() - ulspace;

　　if (windowspace < ulspace && windowspace2 > 0) {

　　$('#'+selectId+' > div > ul').css({top:-ulspace});

　　}else{

　　$('#'+selectId+' > div > ul').css({top:$('#'+selectId+' > div > h4').outerHeight(true)});

　　}

　　selectIndex = $('#'+selectId+' > div > ul > li').index($('.selectedli')[0]);

　　$(window).scroll(function(){

　　var windowspace = ($(window).scrollTop() + document.documentElement.clientHeight) - $('#'+selectId).offset().top;

　　var ulspace = $('#'+selectId+' > div > ul').outerHeight(true);

　　if (windowspace < ulspace) {

　　$('#'+selectId+' > div > ul').css({top:-ulspace});

　　}else{

　　$('#'+selectId+' > div > ul').css({top:$('#'+selectId+' > div > h4').outerHeight(true)});

　　}

　　});

　　//响应鼠标点击选择

　　$('#'+selectId+' > div > ul > li').click(function(e){

　　selectIndex = $('#'+selectId+' > div > ul > li').index(this);

　　//$('#value2').append('鼠标点击：'+selectIndex+'  <br>');

　　$('#'+selectId+'> select')[0].selectedIndex = selectIndex;

　　$('#'+selectId+' > div > h4').empty().append($('#'+selectId+' > select > option:selected').text());

　　__clearSelectMenu(selectId,selectZindex);

　　e.stopPropagation();

　　e.cancelbubble = true;

　　//SELECT onchange 事件

　　$('#'+selectId+'> select').change();

　　})

　　.hover(

　　function(){

　　$('#'+selectId+' > div > ul > li').removeClass("over");

　　$(this).addClass("over").addClass("selectedli");

　　selectIndex = $('#'+selectId+' > div > ul > li').index(this);

　　},

　　function(){

　　$(this).removeClass("over");

　　}

　　);

　　//End

　　};

　　e.stopPropagation();

　　})

　　.bind("mousewheel",function(){

　　//以后也许支持滚轮

　　/*$('#'+selectId+' > div > ul > li').hover(

　　function(){

　　return false;

　　},

　　function(){

　　return false;

　　}

　　);*/

　　})

　　.bind("dblclick", function(){

　　__clearSelectMenu();

　　return false;

　　})

　　.bind("keydown",function(e){

　　//var hotkeys = e.keyCode;

　　$(this).bind('keydown',function(e){

　　if (e.keyCode == 40 || e.keyCode == 38 || e.keyCode == 35 || e.keyCode == 36){

　　return false;

　　}

　　});

　　switch(e.keyCode){ //设置为true可给定case范围

　　case 9:

　　return true;

　　break;

　　case 13:

　　//enter

　　//$('#value2').append('按回车收到的值：'+selectIndex+'  <br>');

　　__clearSelectMenu();

　　break;

　　case 27:

　　//esc

　　__clearSelectMenu();

　　break;

　　case 33:

　　$('#'+selectId+' > div > ul > li').removeClass("over");

　　selectIndex = 0;

　　__keyDown(selectId,selectIndex);

　　break;

　　case 34:

　　$('#'+selectId+' > div > ul > li').removeClass("over");

　　selectIndex = ($('#'+selectId+' > select > option').length - 1);

　　__keyDown(selectId,selectIndex);

　　break;

　　case 35:

　　$('#'+selectId+' > div > ul > li').removeClass("over");

　　selectIndex = ($('#'+selectId+' > select > option').length - 1);

　　__keyDown(selectId,selectIndex);

　　break;

　　case 36:

　　$('#'+selectId+' > div > ul > li').removeClass("over");

　　selectIndex = 0;

　　__keyDown(selectId,selectIndex);

　　break;

　　case 38:

　　//up

　　//$('#value2').append('原始值：'+selectIndex+'  <br>');

　　$('#'+selectId+' > div > ul > li').removeClass("over");

　　if (selectIndex == 0){

　　selectIndex = 0;

　　}else{

　　selectIndex--;

　　};

　　//$('#value2').append('<span style="color:red;" style="color:red;">向上改变的aa值：</span>'+selectIndex+'  ');

　　__keyDown(selectId,selectIndex);

　　break;

　　case 40:

　　//down

　　//$('#value2').append('传递过来的：'+selectIndex+'  ');

　　$('#'+selectId+' > div > ul > li').removeClass("over");

　　if (selectIndex == ($('#'+selectId+' > select > option').length - 1)){

　　selectIndex = $('#'+selectId+' > select > option').length - 1;

　　}else{

　　selectIndex ++;

　　};

　　//$('#value2').append('<span style="color:blue;" style="color:blue;">向下改变的aa值：</span>'+selectIndex+'  ');

　　__keyDown(selectId,selectIndex);

　　break;

　　/*case ((hotkeys > 47 && hotkeys < 59) || (hotkeys > 64 && hotkeys < 91) || (hotkeys > 96 && hotkeys < 123)):

　　//首字幕查询预留接口

　　//character = String.fromCharCode(hotkeys).toLowerCase();

　　return false;

　　break;*/

　　default:

　　return false;

　　break;

　　};

　　})

　　.bind("blur",function(){

　　__clearSelectMenu(selectId,selectZindex);

　　return false;

　　});

　　//禁止选择

　　$('.dropselectbox').bind("selectstart",function(){

　　return false;

　　});

　　};

　　function __clearSelectMenu(selectId,selectZindex){

　　//$('#value2').append('移除焦点：'+selectIndex+'  <br>');

　　$('.dropselectbox > ul').empty().hide();

　　$('.dropselectbox > h4').removeClass("over").removeClass("current");

　　$('.dropselectbox > span').removeClass("over");

　　$('#'+selectId).removeClass('overclass');

　　}

　　function __setSelectValue(sID){

　　$('#'+sID+' > div > ul').empty();

　　$.each($('#'+sID+' > select > option'), function(i){

　　$('#'+sID+' > div > ul').append("<li class='FixSelectBrowser'>"+$(this).text()+"</li>");

　　});

　　$('#'+sID+' > div > h4').empty().append($('#'+sID+' > select option:selected').text());

　　$('#'+sID+' > div > ul > li').eq($('#'+sID+'> select')[0].selectedIndex).addClass("over").addClass("selectedli");

　　}

　　function __keyDown(sID,selectIndex){

　　$('#'+sID+'> select')[0].selectedIndex = selectIndex;

　　$('#'+sID+' > div > ul > li:eq('+selectIndex+')').toggleClass("over");

　　$('#'+sID+' > div > h4').empty().append($('#'+sID+' > select option:selected').text());

　　//SELECT onchange 事件

　　$('#'+sID+'> select').change();

　　}

　　/* 自动调用 */

　　$(document).ready(function(){

　　var s = new Array();

　　var t = document.getElementsByTagName('select');

　　var j = 0;

　　for(var i=0;i<t.length;i++){

　　if(t[i].className=='commonselect'){

　　s[j] = t[i];

　　j++;

　　}

　　}

　　if(j==0)return;

　　var k = m = null;

　　for(var i=0;i<s.length;i++){

　　k = s[i].parentNode;

　　m = createDiv(k, i);

　　//s[i].replaceNode(m);

　　k.replaceChild(m,s[i])

　　m.appendChild(s[i]);

　　$('#selectbox'+ i).sSelect();

　　}

　　function createDiv(p, i){

　　var div = document.createElement('div');

　　div.className = 'dropdown';

　　div.id = 'selectbox' + i;

　　div.innerHTML = ' ';

　　p.appendChild(div);

　　return div;

　　}

　　})

　　HTML应用

　　

复制代码 代码如下:

　　<!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>JQuery SELECT单选模拟</title>

　　<style type="text/css" bogus="1">

　　body,div,ul,h4,li {margin:0; padding:0; border:none; list-style:none; font-size:1;}

　　/*下拉列表select的commonselect样式 配合jquery.select插件 */

　　/* select style */

　　.dropdown {outline:none;z-index:1;display:inline-block;*display:inline; position:relative;}

　　.dropdown * {-moz-user-select:none;}

　　.dropselectbox{float:left; position:absolute}

　　.overclass{ z-index:999} /* 对于IE下层定位问题的修正样式 */

　　.dropdown h4{position:relative;cursor:default; text-indent:5px;text-align:left;display:block;overflow:visible; margin:0; height:20px;font:12px/21px Arial, Helvetica, sans-serif; border:solid 1px #AAA; background:#3B3936 ;color:#CEBC7E;padding-left:0px;}

　　.dropdown h4.over{border-color:#369;}

　　.dropdown h4.current{border-color:#003;}

　　.dropdown div {display:none;position:absolute; left:0px; top:0px;}

　　.dropdown span {position:absolute;top:4px; right:3px; background:url(ico.gif) no-repeat center; width:16px; height:14px;}

　　.dropdown ul{position:absolute;display:none;border:1px solid #AAA; background:#333;color:#8E867B;}

　　.dropdown ul li{text-indent:5px;background:#333;height:19px;display:block;cursor:default;font:400 12px/19px Arial, Helvetica, sans-serif;text-align:left;}

　　.dropdown ul li.over{background:#369; color:#FFF;}

　　/* select style */

　　/* input style */

　　input.txt{border:solid 1px #AAA; background:#3B3936 ;color:#CEBC7E; height:18px;line-height:18px;}

　　</style>

　　<script type="text/javascript" src="jquery132.js" src="jquery132.js"></script>

　　<script type="text/javascript" src="jquery.select.js" src="jquery.select.js"></script>

　　</head>

　　<body style="background:none" style="background:none">

　　<h1>Jquery Select(单选) 模拟插件 V1.3.4</h1>

　　<form action="#" method="post" style="margin:10px;" style="margin:10px;">

　　类型：

　　<select name="type" class="commonselect" id="test">

　　<option value=""></option>

　　<option value="男">类型男</option>

　　<option value="女">类型女</option>

　　</select>

　　性别:

　　<select name="sex" style="width:100px" onchange="alert(this.value);">

　　<option value="">性别：</option>

　　<option value="男">男</option>

　　<option value="女">女</option>

　　</select>

　　<input type="text" size="8" class="txt" name='input'>

　　<input type="submit" id="postform" value="提交表单" style="border:1px solid #000; height:23px; margin-left:20px;" />

　　</form>

　　</body>

　　</html>

　　可以参考这篇文档http://www.glzy8.com/jiaoben/21397.html

教程首页 更多教程