dwz下拉框(combox)不想出現滾動條的顯示問題解決

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>