最新消息:发现真没时间折腾VPS,最近又换了个空间。呵呵

IE下dojox.form.Uploader点击问题的解决方法

在IE下,当dojox.form.Uploader的显示Label过长或者显示文件名(showInput=true)时,点击控件前端会把整个控件隐藏。

对于这个问题,我看了一下dojo的源代码,发现它是用字体大小写实现控件点击的,相同字体在Chrome和Firefox下都没问题,但IE下就会有点小。我们可以通过继承dojox.form.Uploader来修改字体大小的生成函数。

如下代码:

JavaScript
dojo.declare("net.yutuo.dojo.Uploader", [dojox.form.Uploader], {
    _setButtonStyle: function() {
        this.inputNodeFontSize = Math.max(2,
            Math.max(Math.ceil(this.btnSize.w / 40), Math.ceil(this.btnSize.h / 15)));

        this._createInput();
    }
});

测试代码如下:

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"
    djConfig="parseOnLoad: true"></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("dojox.form.Uploader");
    dojo.declare("net.yutuo.dojo.Uploader", [dojox.form.Uploader], {
        _setButtonStyle: function() {
            this.inputNodeFontSize = Math.max(2,
                Math.max(Math.ceil(this.btnSize.w / 40), Math.ceil(this.btnSize.h / 15)));

            this._createInput();
        }
    });

</script>
</head>

<body class="claro">
    Old: <br/>
    <input id="test1" name="test1" type="file" data-dojo-type="dojox.form.Uploader"
           label="选择选择选择选择选择选择选择选择选择选择" />
    <br/>
    <input id="test2" name="test2" type="file" data-dojo-type="dojox.form.Uploader"
           data-dojo-props="showInput:'before'" label="选择" />
    <br/>
    New: <br/>
    <input id="test3" name="test3" type="file" data-dojo-type="net.yutuo.dojo.Uploader"
           label="选择选择选择选择选择选择选择选择选择选择" />
    <br/>
    <input id="test4" name="test4" type="file" data-dojo-type="net.yutuo.dojo.Uploader"
           data-dojo-props="showInput:'before'" label="选择" />
</body>

</html>

转载请注明:宇托的狗窝 » IE下dojox.form.Uploader点击问题的解决方法

发表我的评论
取消评论

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

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