首页 / JQUERY / jQuery Select(单选) 模拟插件 V1.3.62 改进版

jQuery Select(单选) 模拟插件 V1.3.62 改进版

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery Select(单选) 模拟插件 V1.3.62 改进版，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8400字，纯文字阅读大概需要13分钟。

内容图文

首先感谢jQuery.Select.js的作者张经纬，jQuery.Select.js项目地址：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/
项目中需要使用基于jQuery的Select模拟效果，主要是想实现select的onmouseover事件，而不需要点击在经过时即可进行选择，找了很多没有理想的，最后决定在jQuery.Select.js 1.3.6的基础上改进。

下面是增加mouseover事件后的代码：（如需原版请在作者主页下载）
代码如下:


/* 
* 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 
* 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); 

演示地址 http://demo.jb51.net/js/jQuery.Select/index.html
打包下载 //www.gxlcms.com/jiaoben/21397.html

内容总结

以上是互联网集市为您收集整理的jQuery Select(单选) 模拟插件 V1.3.62 改进版全部内容，希望文章能够帮你解决jQuery Select(单选) 模拟插件 V1.3.62 改进版所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/370794.html

来源：【匿名】

【上一篇】基于jquery的Repeater实现代码【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【jQuery Select(单选) 模拟插件 V1.3.62 改进版】教程文章相关的互联网学习教程文章

jQuery 增加删除修改select option

jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selected").text(); //获取Select选择的Text 2. var checkValue=jquery("#select_id").val(); //获取Select选择的option Value 3. var checkIndex=jQuery("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 4. var maxIndex=jQuery("#select_id option:last").attr("index"); //获取Select最大...

jQuery获取Select选择的Text和 Value(转)

jQuery获取Select选择的Text和Value:语法解释：1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text3. var checkValue=$("#select_id").val(); //获取Select选择的Value4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值5. var maxIndex=$("#select_id...

jquery操作select

用jquery操作select时经常要查文档，遂记录备用。jQuery获取Select选择的Text和Value: 语法解释： 1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select_id").val(); //获取Select选择的Value 4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取S...

jquery selector 2【图】

基本选择器：属性过滤选择器：层次选择器：过滤选择器：内容过滤选择器可见性过滤选择器：子元素过滤选择器：表单对象属性选择器原文：http://www.cnblogs.com/ordili/p/7224503.html

[jQueryUI] - Chosen：select下拉选择框美化插件及问题【转】【图】

hosen 是一个支持jquery的select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此，它更扩展了select，增加了自动筛选的功能。它可对列表进行分组，同时也可禁用某些选择项。先来看下插件的效果：跟这个比起来，原来的select样式是不是弱爆了！马上来武装我们的select吧：1、先把js和css文件引用到网页里面去：?123<link href="js/jqueryUI/chosen/chosen.css" type="text/css" rel="stylesheet" /...

jquery获得select option的值和对select option的操作

jQuery获取Select元素，并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select_id").val(); //获取Select选择的Value 4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 5. var maxIndex=$("#select...

关于jQuery插件imgAreaSelect基础讲解【代码】【图】

关于ImgAreaSelect, 是一jQuery插件，它支持用户通过鼠标拖曳选择图片的一部分，如图片拖曳、图片编辑等~~来具体看一下1、先下载imgAreaSelect插件下载地址：英文：http://odyniec.net/projects/imgareaselect/中文：http://www.css88.com/EasyTools/javascript/jQueryPlugin/imgAreaSelect/index.html在头部引用：<link rel="stylesheet" type="text/css" href="../jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" ...

php jquery ajax select 二级联动【get方式】【代码】

实用小例：ajaxTest.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 + ajax + php + select </title> </head> <script type="text/javascript" src="http://code.jquery.com/jquery.mi...

jQuery获取select选择的文本与值

l链接地址：http://m.blog.csdn.net/article/details?id=44154571jquery获取select选择的文本与值获取select ：获取select 选中的 text : $("#ddlregtype").find("option:selected").text();获取select选中的 value: $("#ddlregtype ").val();获取select选中的索引: $("#ddlregtype ").get(0).selectedindex;设置select:设置select 选中的索引： $("#ddlregtype ").get(0).selectedindex=index;//index为索引值设置sel...

jquery获取和设置radio,check,select选项

select控件选项1,获取select选中的value值 $("#selectID").val();2,获取select选中的text的值 $("#selectID").find("option:selected").text()3,设置select的第几项为当前选中项$("#selectID").attr("value",2);//设置第二项为当前选中项4，添加option$("selectID").append("<option value=‘5‘>select5</option>");5,删除一项option$("#SelectID option[value=‘3‘]").remove(); //删除Select中Value=‘3‘的Option6.,获取...

用插件的形式编写升级版 jquery_select_interval.js 源码【代码】

/* * select_interval 0.1 * Copyright (c) 2012 shuaisam http://shuaisam.cnblogs.com/* Date: 2012-06-04 * Desc: 提供时间的选择区间，用josn数据初始化* select_start_id 开始时间的id* select_end_id 结束时间的id* data_sourse josn数据源格式如var josn1 = {‘start‘:[ ],‘end‘:[ ]};* select_start_judge 选中的开始时间与结束时间选项比较函数* select_end_judge 选中...

HTML5中类jQuery选择器querySelector的使用【代码】【图】

简介HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。用法两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。element=document.querySelector(‘selectors‘);elementList=document.querySelectorAll(‘selectors‘);其中参数selectors 可以包含多个CS...

JQuery获取和设置Select选项常用方法总结 (转)

1.获取select 选中的 text: $("#cusChildTypeId").find("option:selected").text(); $("#cusChildTypeId option:selected").text()2.获取select选中的 value： $("#ddlRegType ").val();3.获取select选中的索引: $("#ddlRegType ").get(0).selectedIndex;4.得到select项的个数 $("#cusChildTypeId").get(0).options.length5.设置select 选中的索引： $("#cusChildTypeId").get(0).selectedIndex=index;//index为索引值...

Optimized Jquery Selector

1.Priority use ID selector2.Add TagName before Class selector3.Never add Tag before ID, because ID is unique4.Use find() instead of children()5.Chain operations faster than cache原文：http://www.cnblogs.com/aoun/p/4439563.html

jQuery常用函数（二）：选择器selector【代码】

$(function(){//ID匹配 var test = $(‘#1,#2‘);//匹配父下面的子的最后一个 var test1 = $(‘ul li:last‘);//给定父元素下的所有子元素 var test2x = $(‘ul>‘);var test2 = $(‘ul>li‘);//匹配id=1的li元素的下一个li元素。（指下一个相邻同辈元素），返回id=2的li var test3 = $(‘#1+li‘);//匹配li之后的所有同辈元素 var test4 = $(‘#1~li‘);//li集合的第一个li var test5 = $(‘li:first‘);//匹配第N个子元素,序号从...

JQUERY - 技术教程分类

jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery 链 jQuery 捕获 jQuery 设置 jQuery 添加元素 jQuery 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸 jQuery 遍历 jQuery 祖先 jQuery 后代 jQuery 同胞 jQuery 过滤 jQuery AJAX 简介 jQuery load() 方法 jQuery get()/post() 方法 jQuery noConflict() 方法 jQuery JSONP jQuery 实例 jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性 jQuery Validate jQuery Cookie jQuery Accordion jQuery Autocomplete jQuery Growl jQuery 密码验证 jQuery Tooltip jQuery Treeview jquery 全部

JQUERY - 最热教程

javascript中html字符串转化为jquerydo...js批量设置元素样式和封装似于jquery的...使用jquery获取url及url参数的方法 jQuery取消ajax请求的方法 jquery中根据获取元素的6种方法总结如何通过jQuery添加新的内容 jQuery和ajax实现鼠标单击修改内容的方...基于JSON格式数据的简单jQuery幻灯片插...jquery设置内联样式css()js调用iframe实现打印页面内容的方法_j...

首页 / JQUERY / jQuery Select(单选) 模拟插件 V1.3.62 改进版

jQuery Select(单选) 模拟插件 V1.3.62 改进版

内容导读

内容图文

内容总结

内容备注

内容手机端

【jQuery Select(单选) 模拟插件 V1.3.62 改进版】教程文章相关的互联网学习教程文章

jQuery 增加删除修改select option

jQuery获取Select选择的Text和 Value(转)

jquery操作select

jquery selector 2【图】

[jQueryUI] - Chosen：select下拉选择框美化插件及问题【转】【图】

jquery获得select option的值和对select option的操作

关于jQuery插件imgAreaSelect基础讲解【代码】【图】

php jquery ajax select 二级联动【get方式】【代码】

jQuery获取select选择的文本与值

jquery获取和设置radio,check,select选项

用插件的形式编写升级版 jquery_select_interval.js 源码【代码】

HTML5中类jQuery选择器querySelector的使用【代码】【图】

JQuery获取和设置Select选项常用方法总结 (转)

Optimized Jquery Selector

jQuery常用函数（二）：选择器selector【代码】

JQUERY - 相关标签

SELECT - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程