Yii2: Kartik/PopoverX 绑定到自定义按钮功能

Question

我在每个字段上使用 yii2 + kartik gridview + popoverx，想要制作一个自定义按钮（例如作为标签），当点击它时文本区域会填充一些评论，例如 仅以折扣价购买

我可以在哪里放置该代码（按钮的），在哪个文件中，或者可能来自 gridview 中的 Kartik 弹出窗口的配置

<span onclick="placeDiscText()"
class="label label-info pull-left"
style="margin-left: 6px; margin-top: 3px; cursor:pointer;">
Buy only at discount.
</span>

主要问题是我应该在 JS 的 placeDiscText() 函数中放置什么...

我觉得差不多

$(this).parent()
.find('div.popover-body.popover-content > div.kv-editable-content > form.kv-editable-form > div.kv-editable-parent.form-group > textarea.form-control.kv-editable-input')
.val('Buy only at discount');

但是没用，我刚学JS，可能是傻代码请不要笑）

没有具体说明这个应该是span to click，可能有一个link，一个按钮什么的，主要是实现这样一个功能。

Answer 1

虽然您还没有为您正在使用的 Popover 扩展添加代码，因此我可以建议确切的代码，但据我所知，您想将自定义按钮添加到 popover 模式的左页脚部分，以及您需要使用 footer 选项。您可以为要呈现的 HTML 提供字符串，仅此而已。您已经定义了 2 个按钮，它们已经在页脚部分中，因此在该选项的开头添加以下字符串

'<div class="pull-left">'.Html::button('Buy', ['class'=>'btn btn-sm btn-info']).'</div>'

您的 Popover 的完整代码应如下所示。

<?php 
echo \kartik\popover\PopoverX::widget([
    'header' => 'Hello world',
    'size'=> \kartik\popover\PopoverX::SIZE_LARGE,
    'placement' => \kartik\popover\PopoverX::ALIGN_RIGHT,
    'content' => Html::textarea('message','Buy only at discount',['id'=>'description'])  ,
    'footer' => '<div class="pull-left">'.Html::button('Buy', ['class'=>'btn btn-sm btn-info']).'</div>'.Html::button('Cancel', ['class'=>'btn btn-sm btn-danger']).Html::button('Download', ['class'=>'btn btn-sm btn-primary']),
    'toggleButton' => ['label'=>'Right', 'class'=>'btn btn-default'],
]);
?>

编辑

当您尝试将点击绑定到模态按钮内的按钮，以便它插入特定文本时说 "Buy only at discount"。如果您查看 PopOverX 的 documentation 页面，有一个登录按钮的示例，它以模式 window 打开登录表单，当点击提交时提交表单，点击提交是 javascript 基于并通过您的检查员查看源代码，您将看到

是内联onclick属性用于运行javascript，详情可以看advanced HTML content (forms) with popover footer部分在文档页面上，所以你需要做的是像下面这样添加

'<div class="pull-left">'.
  Html::button('Buy', [
    'class'=>'btn btn-sm btn-info',
    'onclick'=>'$("#description").val("Buy only at discount")'
  ])
.'</div>'

所以你的 PopoverX 的完整代码看起来像

<?php 
echo \kartik\popover\PopoverX::widget([
    'header' => 'Hello world',
    'size'=> \kartik\popover\PopoverX::SIZE_LARGE,
    'placement' => \kartik\popover\PopoverX::ALIGN_RIGHT,
    'content' => Html::textarea('message','Buy only at discount',['id'=>'description'])  ,
    'footer' => '<div class="pull-left">'.
      Html::button('Buy', [
        'class'=>'btn btn-sm btn-info',
        'onclick'=>'$("#description").val("Buy only at discount")'
      ])
    .'</div>'.Html::button('Cancel', ['class'=>'btn btn-sm btn-danger']).Html::button('Download', ['class'=>'btn btn-sm btn-primary']),
    'toggleButton' => ['label'=>'Right', 'class'=>'btn btn-default'],
]);
?>

Yii2: Kartik/PopoverX 绑定到自定义按钮功能

Yii2: Kartik/PopoverX binding to custom button function

javascript

jquery

yii2

kartik-v