Office Fabric UI MessageBanner Auswahl Inkonsistenz

Ich habe Probleme bei der Arbeit mit Office Fabric UI MessageBanner Komponente. Warum kann ich ein Element, das von jQuery und document.querySelector mit der ChoiceFieldGroup zurückgegeben wird, instanziieren, aber nur document.querySelector funktioniert mit MessageBanner?Office Fabric UI MessageBanner Auswahl Inkonsistenz

Dies ist die Datei 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); 
});

Dies ist die Datei 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>

Quelle

2017-06-15 Felipe Costa Gualberto

Ich würde empfehlen, diese Frage direkt in Entwickler-Ressource zu stellen: [Office-UI-Fabric-js] (https://github.com/OfficeDev/office-ui-fabric-js/issues). Sie werden Ihre Antwort viel schneller bekommen, sie reagieren sehr gut auf die Probleme –

Danke, Slava, ich habe herausgefunden, was ich falsch gemacht habe. –

Es stellt sich heraus, dass ich jQuery Elemente mit Stoffelemente bin mischen.

Der Fehler tritt bei der Initialisierung des Fabric-Objekts auf, nicht im Selektor.

Wenn Ihr Element HTML ist, bauen Sie seine Komponente mit der Syntax:

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

Wenn Sie jedoch ein jQuery-Objekt haben, können Sie den rohen HTML an die Fabric-Methode übergeben müssen [0] unter Verwendung:

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

Quelle

2017-06-15 14:20:13

Office Fabric UI MessageBanner Auswahl Inkonsistenz

Antwort

Verwandte Themen