javascript - anno.js - 如何在 anno.js 中自定义按钮

Question

我前几天下载了一个叫做 anno.js 的插件，我对 js 代码不是很在行。我想在此插件中自定义一个内置按钮。以前有人这样做过吗？

我只想自定义这个跳过按钮

成为这个

这是我的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

如果您编辑 .anno-btn 类，您将编辑所有按钮。您必须向按钮添加特定的类名，然后才能通过 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>