dwz下拉框(combox)不想出现滚动条的显示问题解决

最新推荐文章于 2023-05-17 10:04:25 发布

原创最新推荐文章于 2023-05-17 10:04:25 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#dwz #js #前端框架 #select #滚动条

dwz 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在DWZ前端框架中，如何解决下拉框（select）出现滚动条的问题。通过查看dwz.combox.js源代码，找到相关代码段，并提出了在超过300个选项时，增加配置滚动条显示与否的开关，以提供更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

dwz前端框架下，使用下拉框非常简单，就在select元素中，配置一个class="combox"就行了。实例代码如下：

	<select class="combox" name="test">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
		<option value="6">6</option>
		<option value="7">7</option>
		<option value="8">8</option>
		<option value="9">9</option>
	</select>

效果如图：

简单是简单，但是正如大家看到的，有时候，并不希望它出现滚动条。结果，发现文档并没有给相关介绍和配置项。只要翻它的源代码，寻求解决方案。

翻到dwz.combox.js，定位到下面这段代码：

$(op.selector, box).click(function(){
	var options = $("#op_"+box.attr("id"));
	if (options.is(":hidden")) {
		if(options.height() > 300) {
			options.css({height: "300px", overflow:"scroll"});	
		}
		var top = box.offset().top+box[0].offsetHeight-50;
		if(top + options.height() > $(window).height() - 20) {
			top =  $(window).height() - 20 - options.height();
		}
		options.css({top:top,left:box.offset().left}).show();
		killAllBox(box.attr("id"));
		$(document).click(killAllBox);
	} else {
		$(document).unbind("click", killAllBox);
		killAllBox();
	}
	return false;
});

很明显，如果combox的高度超过300px，就自动出现滚动条。那么，现在的解决方案就有一个了：把300这个临界值改大。

但相比配置项，还是不友好。所以应该还在判断大于300的同时，判断是否配置了滚动与否的选项开关。

思路有了，具体的代码如下：

//第一处改动：
$(op.selector, box).click(function(){
	var options = $("#op_"+box.attr("id"));
	if (options.is(":hidden")) {
		if(options.height() > 300) {
			//增加配置项：showScroll
			if (options.attr("showScroll") == "false") {
				options.css({height: options.height() + "px", overflow:"visible"});
			} else {
				options.css({height: "300px", overflow:"scroll"});	
			}
		}
		var top = box.offset().top+box[0].offsetHeight-50;
		if(top + options.height() > $(window).height() - 20) {
			top =  $(window).height() - 20 - options.height();
		}
		options.css({top:top,left:box.offset().left}).show();
		killAllBox(box.attr("id"));
		$(document).click(killAllBox);
	} else {
		$(document).unbind("click", killAllBox);
		killAllBox();
	}
	return false;
});


//第二处改动：在combox:function(){...}内部
var cid = $this.attr("id") || Math.round(Math.random()*10000000);
var select = '<div class="combox"><div id="combox_'+ cid +'" class="select"' + (ref?' ref="' + ref + '"' : '') + '>';
select += '<a href="javascript:" class="'+$this.attr("class")+'" name="' + name +'" value="' + value + '">' + label +'</a></div></div>';
var options = '<ul class="comboxop" id="op_combox_'+ cid + '" ';
//在select标签上增加"showScroll"属性：因为源码实现的是，
//当select下拉高度大于300px时，会自动显示滚动条。有时希望是全部都显示
if ($this.attr("showScroll") == "false") {
	options += 'showScroll="false" ';
}

options += '>';

如此修改后，以后需要在下拉框上显示滚动条时，就在select标签上配上：showScroll="false"

<select id="sysModule" name="sysModule" class="combox" showScroll="false">
...
</select>