EnjoyHint 如何添加属性

Question

这个插件很杂。我开发了一点这个插件。但我不知道如何添加 arrowColor 和 textColor 属性。我无法共享所有代码。因为超过了最大字符长度。

此外，您可以在 github 上查看原始插件： https://github.com/xbsoftware/enjoyhint

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 <!-- EnjoyHint JS and CSS files -->
 <script src="enjoyhint.js"></script>
 <link href="enjoyhint/enjoyhint.css" rel="stylesheet">
  
   <script type="text/javascript">
 
 $(document).ready(function(){
 
  var enjoyhint_instance = new EnjoyHint({});

  var enjoyhint_script_steps = [
    {
   'next .navbar-brand' : 'Welcome to Turbo Search! Let me guide you through its features.',
   'nextButton' : {className: "myNext", text: "Sure"},
   'skipButton' : {className: "mySkip", text: "Nope!"}
      'arrowColor':'0,255,255'
      'textColor':'0,255,0'
    },
    {
   'key #mySearchButton' : "Insert your search request and press 'Enter'",
   'keyCode' : 13,
            'arrowColor':'0,255,255'
      'textColor':'0,255,0'
    },
    {
   'click .btn' : 'This button allows you to switch between the search results'
            'arrowColor':'0,255,255'
      'textColor':'0,255,0'
    },
    {
   'next .about' : 'Check the list of all the features available',
   'shape': 'circle',
            'arrowColor':'0,255,255'
      'textColor':'0,255,0'
    },
    {
   'next .contact' : 'Your feedback will be appreciated',
   'shape': 'circle',
   'radius': 70,
   'showSkip' : false,
   'nextButton' : {className: "myNext", text: "Got it!"},
            'arrowColor':'0,255,255'
      'textColor':'0,255,0'
    }

  ];

  enjoyhint_instance.set(enjoyhint_script_steps);
  enjoyhint_instance.run();
   
   });
   
   
 
 
 </script>

Answer 1

enjoyHint 步骤属性中没有 arrowColor 和 textColor。

您可以在 enjoyHint.css 文件中修改的 TextColor，如下所示：

.enjoy_hint_label {
    color: #550055 !important;
}

正如我在上面的评论中所说，箭头是在插件核心中创建的 svg。所以你只能在那里修改它，我建议你在enjoyhint.js:

中寻找这个

var polilyne = $(makeSVG('path', 
    {style: 
     "fill:none; 
     stroke:rgb(255,255,255); 
     stroke-width:2", d: "M0,0 c30,11 30,9 0,20"
}));

上面是箭头点，下面是箭头线：

that.$svg.append(makeSVG('path', 
     {style: 
      "fill:none; 
      stroke:rgb(255,255,255); 
      stroke-width:3", 'marker-end': "url(#arrowMarker)", d: d, id: 'enjoyhint_arrpw_line'
}));

在两者中，查找 stroke:rgb(...) 并用所需的颜色更改其中的值....

EnjoyHint 如何添加属性

EnjoyHint how to add properties

javascript

jquery

plugins

jquery-plugins