anno.js - anno.jsのカスタムボタンの使い方

Question

anno.jsというプラグインをダウンロードしました。数日はかかりますが、jsコードは本当にうまくいきません。このプラグインでは、カスタムボタンにビルトインボタンが必要です。これまで誰もこれをやっていますか？

私がやりたいことはすべて、このスキップボタン

はこの1つ

これは私のJSコード

var anno8 = new Anno([{ 
     target: '.guides', 
     position: 'left', 
     content: "Add another app or manage existing ones by going to <b>‘My Applications’</b> through this menu button", 
     buttons:[{ 
      text:'Skip', 
      click: function(anno,evt){ 
       anno.hide(); 
       //$('#dialog').modal('show'); 
      } 
     },AnnoButton.NextButton] 

Answer 1

を作成するのいずれか。 ボタンに特定のクラス名を追加する必要があります。その場合、cssからボタンを選択することができます。

var intro = new Anno([ 
       { 
       ... 
       buttons:[{ 
       text:'Skip', 
       className: 'anno-btn-skip', 
       }] 
       ... 
       }, 
      ]); 

希望のテキストでボタンを選択することをおすすめします。

私が見

$('document').ready(function(){ 
 
     var intro = new Anno([ 
 
       { 
 
       target:'#first', 
 
       content: "Hello world!", 
 
       buttons:[{ 
 
       text:'Skip', 
 
       className: 'anno-btn-skip', 
 
       }] 
 
       }, 
 
      ]); 
 
     $('#clickMe').on('click',function(e){ 
 
     intro.show(); 
 
     }); 
 
});

.element{ 
 
    height:100px; 
 
    width:100px; 
 
    border:2px solid green; 
 
    margin:0px auto; 
 
} 
 

 
.anno-btn-container > .anno-btn-skip {  
 
    background-color: white!important; 
 
    color: #0d7fad!important; 
 
    border: 1px solid #0d7fad!important; 
 
    border-radius: 0.6em!important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<script src="https://rawgit.com/iamdanfox/anno.js/gh-pages/dist/anno.js" type="text/javascript"></script> 
 
<script src="https://rawgit.com/litera/jquery-scrollintoview/master/jquery.scrollintoview.js" type="text/javascript"></script> 
 

 
<link href="https://rawgit.com/iamdanfox/anno.js/gh-pages/dist/anno.css" rel="stylesheet" type="text/css" /> 
 

 
    <div id="first" class="first element">First Element</div> 
 
    <a href="#" type="button" id="clickMe">ClickMe</a>

Answer 2

あるAnon.jsはそのを持っているとなっカスタムにありCSSファイル。あなたは.anno-BTNクラスを編集した場合は、すべてのボタンを編集します直接CSSを編集したり、あなたに

.anno-btn { 
//define your styles here 
}