带有图标的jquery.ui对话框按钮

knsnq2tg  于 2023-03-29  发布在  jQuery
关注(0)|答案(2)|浏览(143)

我期待有一个图标从jquery.ui按钮。
我更喜欢fontawsone,但我想bootstrap的也可以。
所以,假设这个标记:

<asp:Button ID="cmdTest" runat="server" Text="Test Dialog"
            CssClass="btn"
            OnClientClick="testdialog();return false;" />

        <div id="fundialog" style="display:none">
            <h3>This is a test dialog</h3>
            <i class="fa fa-check-circle" aria-hidden="true"></i> Ok icon wanted
            <br />
            <i class="fa fa-times-circle" aria-hidden="true"></i> Cancel icon wanted
        </div>
        <br />
        testing:<br />
         <h4><i class="fa fa-car" aria-hidden="true"></i> Fa Car icon</h4>

    <script>

        function testdialog() {

            var myDialog = $("#fundialog")
            myDialog.dialog({
                autoOpen: false,
                modal: true,
                closeText: "",
                title: "My title Text",
                appendTo: "form",
                buttons: [
                    {
                        id: "MyOkBtn",
                        text: 'Ok',
                        class:'MyOkBtn',
                        click: function () {
                            myDialog.dialog('close')
                            myDialog.dialog('destroy');
                            btn.click()
                        }
                    },
                    {
                        id: "MyCancel",
                        text: "Cancel",
                        click: function () {
                            myDialog.dialog('close')
                            myDialog.dialog('destroy');
                        }
                    }
                ]
            })
            myDialog.dialog('open')

        }
    </script>

结果是这样的:

但是,正如所指出的,我想要一个带有图标的按钮。
我尝试过:

buttons: [
                    {
                        id: "MyOkBtn",
                        text: '<i class="fa fa-check-circle" aria-hidden="true"></i>Ok',
                        click: function () {
                            myDialog.dialog('close')
                            myDialog.dialog('destroy');
                            btn.click()
                        }
                    },

但结果是这样的

所以,寻找一个按钮,但一个按钮的图标从字体awsome。
我想我愿意从bootstrap ions下载一个svg,甚至fontawsome,并为按钮使用背景图像。
所以它看起来不像jquery.ui按钮支持任何类型的按钮图标或图像(除了一些非常旧的丑陋的,看起来像他们来自windows3.1时代)。
当我在这里使用asp.net(Web表单)时,它是基本的标记,jquery,jquery. ui。
我也愿意修改jquery.ui的css文件,但是它们太长了,这样做会妨碍以后的升级。
还有一个迫在眉睫的问题,悬停亮点,和图像颜色不改变,但嘿,一步一步来!

yxyvkwin

yxyvkwin1#

考虑使用内置的UI图标:

$(function() {
  var myDialog = $("#fundialog").dialog({
    autoOpen: false,
    modal: true,
    title: "My title Text",
    buttons: [{
        id: "MyOkBtn",
        text: 'Ok',
        icon: "ui-icon-circle-check",
        class: 'MyOkBtn',
        click: function() {
          myDialog.dialog('close')
          myDialog.dialog('destroy');
          btn.click()
        }
      },
      {
        id: "MyCancel",
        text: "Cancel",
        icon: "ui-icon-circle-close",
        click: function() {
          myDialog.dialog('close')
          myDialog.dialog('destroy');
        }
      }
    ]
  });

  $(".btn").click(function() {
    myDialog.dialog("open");
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<button class="btn">Test Dialog</button>

<div id="fundialog">
  <h3>This is a test dialog</h3>
  <i class="fa fa-check-circle" aria-hidden="true"></i> Ok icon wanted
  <br />
  <i class="fa fa-times-circle" aria-hidden="true"></i> Cancel icon wanted
</div>
<br /> testing:
<br />
<h4><i class="fa fa-car" aria-hidden="true"></i> Fa Car icon</h4>

你也可以使用ID或类来使用你自己的图标。
一个一个二个一个一个一个三个一个一个一个一个一个四个一个
此方法使用create回调来修改按钮并添加FontAwesome Icons。

bmp9r5qi

bmp9r5qi2#

我希望你有一个css文件,你正在使用FontAwesome 6。最好通过css添加FA图标的unicode形式,就像这样,

.test-btn::before {
  content: '\f058';
  font-family: "Font Awesome 6 free";
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet"/>
<button class="test-btn">
  Hello
</button>

相关问题