dijit.InlineEditBox

最新推荐文章于 2020-06-26 05:52:22 发布

原创最新推荐文章于 2020-06-26 05:52:22 发布 · 631 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#stylesheet #function #html #div #class

Javascript 同时被 2 个专栏收录

24 篇文章

订阅专栏

Dojo

14 篇文章

订阅专栏

本文介绍了一个使用Dojo框架实现的内联编辑框示例，该示例允许用户点击div区域进行编辑，并通过Textarea组件进行内容修改。同时，示例中还展示了如何配置Inline Edit Box组件并监听其内容变化。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
    
    <head>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true, isDebug: true">
        </script>
        <script type="text/javascript">
            dojo.require("dijit.InlineEditBox");
            dojo.require("dijit.form.Textarea");

            var eb;
            dojo.addOnLoad(function() {
                eb = new dijit.InlineEditBox({
                    editor: "dijit.form.Textarea",
                    autoSave: false ,
					onChange: myAlert
                },
                "ieb");
            });
			function myAlert(e){
				console.log(e);
			}
        </script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"
        />
    </head>
    
<body class=" claro ">
<div id="ieb">
            When you click on this div you'll be able to edit it (in plain text).
            The editor's size will initially match the size of the (original) text,
            but will expand/contract as you type.
    </div>
    <p>
          <!-- NOTE: the following script tag is not intended for usage in real
        world!! it is part of the CodeGlass and you should just remove it when
        you use the code -->
          <script type="text/javascript">
            dojo.addOnLoad(function() {
                if (document.pub) {
                    document.pub();
                }
            });
        </script>
</p>
    <p><</p>
    <p> </p>
    <p>  </p>
</body>

</html>