如何在点击时显示弹出框?
Posted
技术标签:
【中文标题】如何在点击时显示弹出框?【英文标题】:How to show popover on click? 【发布时间】:2011-12-14 10:19:37 【问题描述】:我目前正在使用 Siwapp 的 0.5 版本,我正在尝试在发票表的每一行上显示付款按钮的弹出框。但我必须点击一下。我有以下JS代码:
jQuery(function($)
$('table[data-type="invoices"] a.payments').popover(
live: true,
placement: 'left',
offset: 5,
html: true,
content: function()
return $(this).attr('class');
,
trigger: 'manual'
).live('click', function(e)
e.preventDefault();
$(this).popover('show');
);
);
表格HTML是这样的(见文末链接):
<table class="zebra-striped align-middle" data-type="invoices">
<colgroup>
<col />
<col />
<col class="date" />
<col class="date" />
<col class="status" />
<col class="currency" />
<col class="currency" />
<col class="payments" />
</colgroup>
<thead>
<tr>
<th>% trans %Number% endtrans %</th>
<th>% trans %Customer% endtrans %</th>
<th>% trans %Date% endtrans %</th>
<th>% trans %Due Date% endtrans %</th>
<th>% trans %Status% endtrans %</th>
<th>% trans %Due% endtrans %</th>
<th>% trans %Total% endtrans %</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>ASET-22</td>
<td>Roxxon</td>
<td>5/28/11</td>
<td>9/16/11</td>
<td>
<span class="label important">% trans %overdue% endtrans %</span>
</td>
<td></td>
<td>$11,435.23</td>
<td>
<a href=" path('invoice_payments', 'invoiceId': 4 ) " class="btn secondary icon clock payments" title="Payments">% trans %Payments% endtrans %</a>
</td>
</tr>
</tbody>
</table>
如果我删除“手动”触发器,它可以工作,但如果我设置它,它不会。
有人知道怎么做吗?谢谢!
【问题讨论】:
【参考方案1】:Popover 会自动处理您手动执行的一些操作,这可能会导致一些奇怪的冲突。当您可以自己执行此操作时,您会不必要地添加自己的单击处理程序,并且您正在包装似乎没有必要的整个设置功能。试试这样的:
$('table[data-type="invoices"] a.payments').popover(
live: true,
placement: 'left',
offset: 5,
html: true,
content: function()
return $(this).attr('class');
,
trigger: 'manual'
);
【讨论】:
【参考方案2】:只是一个更新:Bootstrap 2.1 允许您提供 click
作为触发器。 (http://twitter.github.com/bootstrap/javascript.html#popovers)
【讨论】:
以上是关于如何在点击时显示弹出框?的主要内容,如果未能解决你的问题,请参考以下文章
在哪种情况下应该在情节提要中使用 Popover segue?