dijit.form.Select下拉框变形的解决方法

当网页居中显示没有滚动条时,下拉框项目数较多时会出现下拉框变形或者无法显示的问题。

调查了一下原因,是因为dojo的下拉框长度画画长一点,出现下拉框时一定会出现滚动条。而出现滚动条时,画面的位置会发生变化,于是下拉框就会出现变形(位置无法对齐)。解决方法是修改下拉框的高度,使其小于浏览器的显示高度。dojo的dijit.form.ComboBox、dijit.form.FilteringSelect、dijit.form.Select都有上面的问题。

如下代码:

JavaScript
require([ 'dojo/dom-geometry'], function(domGeometry) {
    dojo.declare("net.yutuo.dojo.Select", [dijit.form.Select], {
        openDropDown: function() {
            var aroundNode = this._aroundNode || this.domNode;
            var viewport = dojo.window.getBox();
            var position = domGeometry.position(aroundNode, false);
            this.maxHeight = Math.floor(
                    Math.max(position.y, viewport.h - (position.y + position.h)));

            this.maxHeight -= 5;
            this.inherited('openDropDown', arguments);
        }
    });
    dojo.declare("net.yutuo.dojo.ComboBox", [dijit.form.ComboBox], {
        openDropDown: function() {
            var aroundNode = this._aroundNode || this.domNode;
            var viewport = dojo.window.getBox();
            var position = domGeometry.position(aroundNode, false);
            this.maxHeight = Math.floor(
                    Math.max(position.y, viewport.h - (position.y + position.h)));

            this.maxHeight -= 5;
            this.inherited('openDropDown', arguments);
        }
    });
    dojo.declare("net.yutuo.dojo.FilteringSelect", [dijit.form.FilteringSelect], {
        openDropDown: function() {
            var aroundNode = this._aroundNode || this.domNode;
            var viewport = dojo.window.getBox();
            var position = domGeometry.position(aroundNode, false);
            this.maxHeight = Math.floor(
                    Math.max(position.y, viewport.h - (position.y + position.h)));

            this.maxHeight -= 5;
            this.inherited('openDropDown', arguments);
        }
    });
});

测试代码如下:

HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
    src="js/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css"
    href="js/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
    href="js/dijit/themes/claro/claro.css" />
<title>Dojo Textarea Test</title>

<script type="text/javascript">
    dojo.require("dojo.parser");
    dojo.require("dijit.form.Select");
    dojo.require("dijit.form.ComboBox");
    dojo.require("dijit.form.FilteringSelect");
    require([ 'dojo/dom-geometry'], function(domGeometry) {
        dojo.declare("net.yutuo.dojo.Select", [dijit.form.Select], {
            openDropDown: function() {
                var aroundNode = this._aroundNode || this.domNode;
                var viewport = dojo.window.getBox();
                var position = domGeometry.position(aroundNode, false);
                this.maxHeight = Math.floor(
                        Math.max(position.y, viewport.h - (position.y + position.h)));

                this.maxHeight -= 5;
                this.inherited('openDropDown', arguments);
            }
        });
        dojo.declare("net.yutuo.dojo.ComboBox", [dijit.form.ComboBox], {
            openDropDown: function() {
                var aroundNode = this._aroundNode || this.domNode;
                var viewport = dojo.window.getBox();
                var position = domGeometry.position(aroundNode, false);
                this.maxHeight = Math.floor(
                        Math.max(position.y, viewport.h - (position.y + position.h)));

                this.maxHeight -= 5;
                this.inherited('openDropDown', arguments);
            }
        });
        dojo.declare("net.yutuo.dojo.FilteringSelect", [dijit.form.FilteringSelect], {
            openDropDown: function() {
                var aroundNode = this._aroundNode || this.domNode;
                var viewport = dojo.window.getBox();
                var position = domGeometry.position(aroundNode, false);
                this.maxHeight = Math.floor(
                        Math.max(position.y, viewport.h - (position.y + position.h)));

                this.maxHeight -= 5;
                this.inherited('openDropDown', arguments);
            }
        });
    });
    dojo.ready(function() {
        dojo.query("select").forEach(function(entry, index) {
            for (var i = 0; i < 60; i++) {
                var o = dojo.create("option", {value: i, innerHTML: 'AAAA' + i});
                entry.appendChild(o);
            }
        });
        dojo.parser.parse();
    });
</script>
</head>

<body class="claro">
    <div style="width: 800px; margin: auto;">
        Old Select: <br/>
        <select data-dojo-type="dijit.form.Select" value="">
        </select>
        <br/>
        New Select: <br/>
        <select data-dojo-type="net.yutuo.dojo.Select" value="">
        </select>

        <br/><br/>
        Old ComboBox: <br/>
        <select data-dojo-type="dijit.form.ComboBox" value="">
        </select>
        <br/>
        New ComboBox: <br/>
        <select data-dojo-type="net.yutuo.dojo.ComboBox" value="">
        </select>

        <br/><br/>
        Old FilteringSelect: <br/>
        <select data-dojo-type="dijit.form.FilteringSelect" value="">
        </select>
        <br/>
        New FilteringSelect: <br/>
        <select data-dojo-type="net.yutuo.dojo.FilteringSelect" value="">
        </select>
    </div>
</body>

</html>

转载请注明:宇托的狗窝 » dijit.form.Select下拉框变形的解决方法

发表我的评论
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址