首页 > 语言 > JavaScript > 正文

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

2024-05-06 14:28:12
字体:
来源:转载
供稿:网友

首先感谢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)});

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选