Question

如何为Chardin.js创建切换按钮？ Chardin Website

我知道脚本已全部正确链接，因为当我运行下面的脚本时显示正常：

$(document).ready(function(){
$('body').chardinJs('start');
});

但是，我希望用户点击按钮来显示信息，而不是文档加载。

我试过了：

<script>$('.button').on('click', function(){
$('body').chardinJs('start')
});</script>

用这个：

<span class="button"><a href="#" class="btn btn-large primary" data-toggle="chardinjs" data-intro="This button toggles the overlay, you can click it, even when the overlay is visible" data-position="left">Show Me</a></span>

我担心我在错误的树上吠叫，有人可以建议吗？谢谢你的期待。

Answer 1

试试这个

$('#some-button').on('click', function() { $('.container').chardinJs('start') });

您可以在此处找到更多信息：http://www.codersgrid.com/2013/07/03/chardin-js-make-overlay-instructions-easily/

Answer 2

由于你专门要求切换，chardinJs碰巧有这样的指示。

HTML（带按钮的引导类）：

<link rel="stylesheet" type="text/css" href="~/CSS/chardinjs.css" />
...
<button id="toggleHelp" type="button" class="btn btn-default"><span class="glyphicon glyphicon-question-sign"></span>Help</button>
...
<script type='text/javascript' src='~/Scripts/chardin.js'></script>

然后是js：

// 1. Just initializing
$(document).ready(function(){ $('body').chardinJs(); });

// 2. Later somewhere still during ready bind the event handler
$('#toggleHelp').on('click', function() { $('body').chardinJs('toggle') });

这就是全部。

Chardin.js - 创建一个切换按钮

2 个答案: