Office Fabric UI MessageBanner 选择不一致

Question

我在使用 Office Fabric UI MessageBanner 组件时遇到问题。为什么我可以使用 ChoiceFieldGroup 实例化 jQuery 和 document.querySelector 返回的元素，但只有 document.querySelector 可以使用 MessageBanner？

这是文件 test.html:

$(document).ready(function () {
    //This works:
    var $ChoiceFieldGroupElements = $(".ms-ChoiceFieldGroup");
    //This also works:
    //var $ChoiceFieldGroupElements = document.querySelector(".ms-ChoiceFieldGroup");

    //This works:
    var $mb = document.querySelector('.ms-MessageBanner');
    //This doesn't work:
    //var $mb = $('.ms-MessageBanner');

    // Just the components' initialization
    for (var i = 0; i < $ChoiceFieldGroupElements.length; i++) {
        new fabric["ChoiceFieldGroup"]($ChoiceFieldGroupElements[i]);
    }
  var MessageBanner =   new fabric["MessageBanner"]($mb);
});

这是文件 test.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Fabric Test</title>

        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css">
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css">
    <script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>

        <script src="test.js"></script>
</head>

<body>

    <br />
    <div id="title" class="ms-font-xxl ms-fontColor-neutralSecondary ms-fontWeight-semilight">Title</div>
    <br /><br />
    <p id="body" class="ms-font-m-plus ms-fontColor-neutralTertiary">Body text:</p>

    <div id="choicefieldgroup" class="ms-ChoiceFieldGroup" role="radiogroup">
        <ul class="ms-ChoiceFieldGroup-list">
            <li class="ms-RadioButton">
                <input tabindex="-1" type="radio" class="ms-RadioButton-input">
                <label role="radio"
                       class="ms-RadioButton-field"
                       tabindex="0"
                       aria-checked="false"
                       name="choicefieldgroup">
                    <span id="spn1" class="ms-Label">Option 1</span>
                </label>
            </li>
            <li class="ms-RadioButton">
                <input tabindex="-1" type="radio" class="ms-RadioButton-input">
                <label role="radio"
                       class="ms-RadioButton-field"
                       tabindex="0"
                       aria-checked="false"
                       name="choicefieldgroup">
                    <span class="ms-Label">Option 2</span>
                </label>
            </li>
        </ul>
    </div>

    <div class="ms-MessageBanner" id="notification-popup">
        <div class="ms-MessageBanner-content">
                <div class="ms-MessageBanner-text">
                        <div class="ms-MessageBanner-clipper">
                                <div class="ms-font-m-plus ms-fontWeight-semibold" id="notification-header">Notification Title</div>
                                <div class="ms-font-m ms-fontWeight-semilight" id="notification-body">Notification Body</div>
                        </div>
                </div>
                <button class="ms-MessageBanner-expand" style="display:none"><i class="ms-Icon ms-Icon--chevronsDown"></i> </button>
                <div class="ms-MessageBanner-action"></div>
        </div>
        <button class="ms-MessageBanner-close"> <i class="ms-Icon ms-Icon--x"></i> </button>
</div>

</body>
</html>

Answer 1

事实证明我将 jQuery 元素与 Fabric 元素混合。

错误发生在Fabric对象的初始化中，而不是在选择器中。

如果您的元素是 HTML，您可以使用以下语法构建他的组件：

new fabric['ComponentName'](document.querySelector('.class-name'));

但是，如果您有一个 jQuery 对象，则必须使用 [0]:

将原始 HTML 传递给 Fabric 方法

new fabric['ComponentName']($('.class-name')[0]);

Office Fabric UI MessageBanner 选择不一致

Office Fabric UI MessageBanner selection inconsistency

javascript

jquery

office-js

office-ui-fabric