辦公面料用戶界面MessageBanner選擇不一致

我在使用Office Fabric UI MessageBanner組件時遇到問題。爲什麼我可以實例化由jQuery和document.querySelector與ChoiceFieldGroup返回的元素，但只有document.querySelector與MessageBanner一起使用？辦公面料用戶界面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>

來源

2017-06-15 Felipe Costa Gualberto

我會建議將這個問題直接發佈到開發資源：[office-ui-fabric-js]（https://github.com/OfficeDev/office-ui-fabric-js/issues）。你會很快得到你的答案，他們對問題的反應很好 –

謝謝，斯拉瓦，我已經知道我做錯了什麼。 –

原來我混合面料元素jQuery的元素。

錯誤發生在Fabric對象的初始化中，而不是在選擇器中。

如果你的元素是HTML，你使用語法建立自己的組件：

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

但是，如果你有一個jQuery對象，則必須使用[0]將原始的HTML的織物的方法：

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

來源

2017-06-15 14:20:13

辦公面料用戶界面MessageBanner選擇不一致

回答

相關問題