jquery - 单击剑道按钮时如何在 div 中添加新文本框？

Question

我是剑道用户界面的新手。我在 HTML 中有一个 div:

<div id="newlabel"></div>

在这个 div 中，我想使用 kendo UI button 添加一个新的 label 吗？

@(Html.Kendo().Button()
    .Name("button name")
    .HtmlAttributes(new { type = "button",
                          @class = "k-primary", 
                          id = "NewButton",
                          param = "newlabel",
                          style = "height:1.9em;font-size:11px;margin-top:8px;"})
    .Content(NEW BUTTON")
    .Events(ev => ev.Click("Addlabel"))) 

Answer 1

我在这里准备了一个简单的演示供您测试:http://dojo.telerik.com/orOKI/3

这使用与 MVC 包装器基本相同的设置。

您需要做的就是将 @Data_target="{YourDivIDHere}"添加到 html 属性中，如下所示:

.HtmlAttributes(new { type = "button",
                          @class = "k-primary", 
                          @Data_target="MyDivHere", 
                          id = "NewButton",
                          param = "newlabel",
                          style = "height:1.9em;font-size:11px;margin-top:8px;"})

然后这会将 data-target 属性加载到按钮上，这样您就可以定位正确的包含 div。 (这也意味着您可以在以后更改 div。

然后使用我创建的函数 addItems 我们有以下内容:

function addItems(e)
              {

                var target = $(e.sender.element[0]).data("target");
                $('#' + target).append('<div class="form-group">
                 <label class="col-md-2 form-label">I\'m a label</label>
                 <div class="col-md-10">
                 <input type="textbox" class="form-control" />
                 </div></div>'); 


              }

所有这一切都是从按钮获取数据目标属性，如果这是页面上唯一使用此特定数据属性的元素，您可以直接调用它，而不是导航按钮结构来获取它的 ID。

然后我所做的就是在 div 上附加一个标签和文本框。

如果您需要更多信息或您的要求比这更复杂，请告诉我。

注意您始终可以使用kendo 模板，这使得将来编辑起来更容易。