Question

我看起来很长很难，但似乎无法找到关于如何做到这一点的任何好文件。

我可以添加这样的类：

$('#element').dialog({
  buttons:{
    "yes":{
      text:'Yes',
      class:'test'
    },
    "no":{
      text:'No',
    }
});

这不允许我添加span标记。

我试过了：

.test:before {
    content:"\e105";
}

但是，这只是在文本上添加了一个小块：

我也试过注入跨度，我真的不想放弃，因为它感觉非常'hacky'。

$('.ui-dialog-buttonpane')
.find('button:contains("Yes")')
.removeClass('ui-button-text-only')
.prepend('<span class="glyphicon glyphicon-export"></span>')

这给了我：

有没有更好的方法呢？

Answer 1

小人似乎是：

.ui-icon {
  display: block;
  text-indent: -99999px; /* THIS GUY HERE! */
  overflow: hidden;
  background-repeat: no-repeat;
}

但是你不想完全摆脱他，因为它可能会影响jQuery UI小部件中的图标。

因此，您可以仅针对我们应用glyphicon类的元素覆盖它：

.ui-icon.glyphicon {
  text-indent: initial;
}

现在，要应用这些glyphicon类，请使用jQuery按钮小部件的icons选项，如：

$(function () {
  $("#dialog").dialog({
     buttons: [{
        text: "Ok",
        icons: {
            primary: "glyphicon glyphicon-export"
        },
        click: function () {
            $(this).dialog("close");
        }
    }]
  });
});

这给了我：

Answer 2

您还需要添加

.test { 
    font-family: 'Glyphicons Halflings'; 
}

Answer 3

您可以为按钮提供ID并通过css

添加glyphicon

   "yes":{
          id:'idYes',
          text:'Yes',
          class:'test'
        },
        "no":{
          id: 'idNo',
          text:'No',
        }

用于添加的CSS

#idYes:before{
  color:green;
  content:"\e170";
}

同样适用于其他按钮。您可以参考Bootstrap glyphicon cheatsheet获取图标代码

将Bootstrap Glyphicon添加到jQuery UI对话框按钮

3 个答案: