时间戳

首页 > 解决方案 > 文本框中带有 JavaScript 的文件 (ZK)

javascript - 文本框中带有 JavaScript 的文件 (ZK)

问题描述

我想将下面的代码移动到一个文件中，这样我就可以在更多的文本框中重复使用它，而无需复制相同的代码，只需将文件的源代码放在文本框标签中。可能吗？谢谢。

<textbox id="TBIdFunc" xmlns:w="client">                                            
  <attribute w:name="doKeyDown_">
    <![CDATA[
      function (evt) {
        var keyCode = event.keyCode;
          if( keyCode == 8 // back space
            || keyCode == 13 // enter
            || keyCode == 16 // enter
            || (keyCode >= 35 && keyCode <= 40) // home, end, arrows
            || keyCode == 46) { // Delete
             this.$doKeyDown_(evt);
          } else if ( !evt.shiftKey &&  // only do without shift key
            (keyCode >= 65 && keyCode <= 90)) {// teclas A-Z   
             this.$doKeyDown_(evt);   
          } else {               
             evt.stop();
             return;
          }
       }
   ]]>
 </attribute>
</textbox>

标签： javascripttextboxzk

解决方案

您可以将该函数提取到一个js文件中，将该文件加载到 zul 中，然后引用您的方法。让我们简化你的例子：

<textbox xmlns:w="client">                                            
  <attribute w:name="doKeyDown_">
    <![CDATA[
      function (evt) {
        console.log('oh hai!');
        this.$doKeyDown_(evt);
      }
   ]]>
 </attribute>
</textbox>

keyDown.js首先，在您的 webapp 文件夹中创建一个文件：

function customKeyDown(evt) {
    console.log('oh hai!');
    this.$doKeyDown_(evt);
}

然后你的 zul 变成这样：

<script src="keyDown.js" />
<textbox xmlns:w="client" w:doKeyDown_="customKeyDown" />

如果你想进一步缩短你的文本框定义，你可以引入一个标记 sclass customKeyDown（或 a custom-attribute）并使用zk.afterLoad()andzk.override()覆盖doKeyDown_一般：

zk.afterLoad('zul.inp', function applyCustomKeyDown() {
    var xTextbox = {};
    zk.override(zul.inp.Textbox.prototype, xTextbox , {
        doKeyDown_: function (evt) {
            if (jq(this).is('.customKeyDown')) {
                console.log('oh hai!');
                xTextbox.doKeyDown_.apply(this,arguments); // call original
            } else {
                xTextbox.doKeyDown_.apply(this,arguments); // call original
            }
        }
    });
});

在 zul 中，您将只应用该 sclass：

<textbox sclass="customKeyDown" />

推荐阅读