javascript - sapui5页面如何创建div

标签 javascript sapui5

我正在尝试在我的代码中放置一个签名板,但因为这是启动一个 div 元素并将涂鸦区域放入其中。我很震惊这样做。 http://www.zetakey.com/codesample-signature.php

<script>
<div id="canvas"></div>
function signature() {
signatureCapture();
var canvas = document.getElementById("newSignature");
var dataURL = canvas.toDataURL("image/png");
alert(dataURL);
}
</script>

那么如何在view中直接发起 提前致谢。

最佳答案

我不确定我是否理解正确,但这里有一个选项可以使用您提供的库。

我的建议是您使用 sap.ui.core.HTML 组件添加相关的 html 代码以实例化签名板。为此,您需要对项目中的 Signature.js 文件(从站点下载)进行微小更改。

请检查代码示例。

index.html

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />

    <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
        data-sap-ui-libs="sap.m" 
        data-sap-ui-theme="sap_goldreflection">
    </script>

<script>
    sap.ui.localResources("util");
    sap.ui.localResources("test");
    jQuery.sap.require("util.Signature");
    var view = sap.ui.view({id:"idApp1", viewName:"teste.App", type:sap.ui.core.mvc.ViewType.JS});
    view.placeAt("content");                
</script>

</head>
<body class="sapUiBody" role="application">
    <div id="content"></div>
</body>
</html>

测试/App.view.js

sap.ui.jsview("test.App", {

    /** Specifies the Controller belonging to this View. 
    * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
    * @memberOf teste.App
    */ 
    getControllerName : function() {
        return "test.App";
    },

    /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
    * Since the Controller is given to this method, its event handlers can be attached right away. 
    * @memberOf test.App
    */ 
    createContent : function(oController) {

        var mySignature = '<div id="wrapper"> ' +
        '            <p>Zetakey Signature Webapp</p> ' +
        '            <div id="canvas"> ' +
        '                Canvas is not supported. ' +
        '            </div> ' +
        ' ' +
        '            <script> ' +
        '                signatureCapture(); ' +
        '            </script> ' +
        '        </div>';

        var myhtml = new sap.ui.core.HTML();
        myhtml.setContent(mySignature);

        var clearBtn = new sap.m.Button({text: "Clear Signature", tap: function(evt) {
            signatureClear();
        }});

        return new sap.m.Page({
            title: "Title",
            content: [
                      myhtml,
                      clearBtn
            ]
        });
    },

});

util/Signature.js(已下载,但我添加了第一行使其成为 ui5 模块)

jQuery.sap.declare("util.Signature");

/*************************************************

 Signsend - The signature capture webapp sample using HTML5 Canvas

 Author: Jack Wong <jack.wong@zetakey.com>
 Copyright (c): 2014 Zetakey Solutions Limited, all rights reserved

 ...THE REST OF THE FILE...

这对你有用吗? 让我知道。

问候。

关于javascript - sapui5页面如何创建div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26378920/

相关文章:

javascript - $ ("value") 为空 -> jQuery

sapui5 - 将单个日期值绑定(bind)到 DatePicker 和 TimePicker

javascript - 使用 sap.ui.model.json.JSONModel 将元素添加到数组时如何强制绑定(bind)更新

javascript - 将表中的多行保存到后端 SAPUI5

javascript - SAPUi5 TypeError : I. fFunction.call 不是函数

javascript - SAPUI5:将 OData 与同一个表中的其他 Web 服务组合

javascript - 当子组件触发父组件的状态更改时,如何防止父组件重新渲染

javascript - Django Ajax 返回错误消息

javascript - 变量不断重置为其原始值

javascript - Rails 3 - Javascript :confirm not working for link_to and button_to with :method => :delete