繁体   English   中英

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

[英]Yii2: Kartik/PopoverX binding to custom button function

我在每个字段上使用yii2 + kartik gridview + popoverx ,在单击它时要创建自定义按钮(例如作为标签),文本区域会填充一些评论,例如仅以折扣价购买

像下面的图片一样

我在哪里可以将该代码(按钮的位置),网格视图中的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,如果这可能是愚蠢的代码,请不要笑)

没有具体的指示表明应该跨度单击,可能有链接,按钮等等,主要是实现这样的功能。

尽管您尚未添加正在使用的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'],
]);
?>

编辑

当您尝试将单击绑定到模式按钮内的按钮时,它会插入某些文字,例如“仅以折扣价购买”。 如果您查看PopOverX的documentation页面,则有一个登录按钮示例,该示例在模式窗口中打开一个登录表单,然后单击“提交”,然后提交表单,该单击提交基于javascript并通过检查器查看源代码。你会看见

在此处输入图片说明

是的,内联onclick属性用于运行javascript ,您可以在文档页面上查看advanced HTML content (forms) with popover footeradvanced 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'],
]);
?>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM