javascript - EnjoyHint如何添加属性

Closed. This question needs to be more focused。它当前不接受答案。
                        
                    
                
            
        
            
        
                
                    
                
            
                
                    想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
                
                    2年前关闭。
            
        

    

这个插件非常复杂。我开发了这个插件。但是我不知道如何添加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>

最佳答案

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(...)并使用所需的颜色更改内部值...。