簡體   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