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