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

Question

我仔细查找了很长时间，但似乎找不到关于如何执行此操作的任何好的文档。

我可以这样添加类：

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

这不允许我添加 span 标签。

我试过了：

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

但这只是在文本顶部添加了一个小块：

我也尝试过注入 span，但我真的不想这样做，因为感觉非常 'hacky'。

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

这给了我：

有更好的方法吗？

Answer 1

您还需要添加

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

Answer 2

反派好像是：

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

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

所以你可以只为我们应用的元素覆盖它 glyphicon class 比如：

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

现在，要应用这些字形 classes，请使用 jQuery 按钮小部件的 icons 选项，例如：

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

这给了我：

Answer 3

您可以为按钮提供 ID 并通过 css 添加字形图标

   "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 对话框按钮

Adding Bootstrap Glyphicon to jQuery UI Dialog Buttons

jquery

jquery-ui

twitter-bootstrap

glyphicons