JQuery UI 显示消息警报

Question

我有一个 HTML table 并且 table 的最后一列是 "Details" 的按钮，目前显示我传递的内容的警报.这工作正常但很难看。我知道 JQuery 对话框，但我似乎无法将消息传递给它。我想知道是否有更好的方式来显示像 alert 那样的内容。

代码：

<tr>
  <td>{{date}}</td>
  <td>{{item_name}}</td>
  <td>{{type}}</td>
  <td>{{points}}</td>
  <td>{{item_options}}</td>
  <td><button onclick="detailer('{{other}}')">Details</button></td>
</tr>

<script>
  function detailer(pii_other){
    alert(pii_other);
}
</script>

Answer 1

如下所示向您的按钮添加一个 data-* 属性，并将控件传递给函数：

<td><button data-info='some-info' onclick="detailer('{{other}}',this)">Details</button></td>

然后在您的函数中检索特定控件的数据属性，如下所示：

<script>
  function detailer(pii_other, ctrl){
    var info = $(ctrl).data('info');
    alert(pii_other + ' ' + info);
}
</script>

编辑 - 好吧，我们走你的路

<td><button data-info='some-info' id="opener">Details</button></td>

<div id="dialog" title="Basic dialog">
  <p></p>
</div>

您将如下初始化对话框：

$(function() {
    $("#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
      $("#dialog p").text($(this).data("info")); //Here your dialog will get info from the button you clicked everytime!!
    });
});

Answer 2

我不熟悉神社，但你可以把它放在 jquery 对话框标记中

<div id="dialogContent"></div>

给按钮一个 id

<button id="myButton"></button>

并举办类似

的活动

$("#myButton").click(function() { $("#dialogContent").html([CONTENT GOES HERE]); });

那么您的按钮中就不需要当前的 onclick。

JQuery UI 显示消息警报

JQuery UI display message alert-like

jquery

jquery-ui

jinja2