0

我的应用程序上有一些仅限图标的操作按钮。这些按钮是使用 JQuery UI 设计的普通旧锚标记，例如：

<a class="move-up-button-icon-only" href="/Ctrl/Action/5/8/2">Up</a>

$('.move-up-button-icon-only').button({
  text: false,
  icons: {
    primary: "ui-icon-arrowthick-1-n"
  }
});

图标按钮

有些按钮有副作用，所以我想 POST 到href.

我知道我可以使用标准<input type="submit"/>按钮，但是我不能使用仅图标按钮，因为 JQuery UI 无法在普通提交按钮上放置图标。我真的很想保持与其他按钮的视觉一致性，那么有什么方法可以将锚链接的方法从 GET 更改为 POST 吗？

（如果这对不支持 Javascript 的浏览器发出 GET 请求是可以的。在这种情况下，我将有一个确认页面，以及一个用于 POST 的常规表单。）

4

2 回答 2

0

这似乎有效，但对我来说真的感觉像是一个肮脏的黑客。这可以吗，还是有更好的方法？

$('.move-up-button-icon-only').click(function () {
  if ($.browser.msie) {
    var form = document.createElement("form")
    $(form).attr('method', 'post').attr('action', $(this).attr('href'));
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
  } else {
    $('<form/>').attr('method', 'post')
                .attr('action', $(this)
                .attr('href')).submit();
  }
});

请注意，您必须在 IE 中将表单添加到 DOM，其他浏览器才可以使用。

于 2012-04-24T17:31:27.117 回答
0

使用 a<button />代替，样式不需要 jQuery（尽管您可以使用它来附加按钮行为），并且仅图标可以正常工作：

<button class="my-button" />

...

.my-button {
    background:url('ui-icon-arrowthick-1-n.png') no-repeat left top;
    height:16px;  /* or whatever */
    width:16px; 
}

从语义上讲，如果您要创建一个没有表单的按钮，请使用您可用的工具 -<button /> 应该是您想要的。

文档在这里。

干杯

于 2012-04-25T16:35:43.640 回答