javascript - Enjoy提示如何添加属性

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 5 年前。

Improve this 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'
}));

在两者中，查找 lines:rgb(...) 并使用所需的颜色更改内部的值...