55 lines
2.3 KiB
HTML
55 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Docs - impress.js</title>
|
|
<!--I am using jquery for button animations.-->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
|
<script>hljs.highlightAll();</script>
|
|
<script src="/js/docs/loader.js"></script>
|
|
<link rel="stylesheet" href="/css/docs/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="content">
|
|
<div id="nav"></div>
|
|
<div id="top"></div>
|
|
<div id="docPage">
|
|
<div id="doc-container">
|
|
<h1>Toolbar plugin</h1>
|
|
<p>This plugin provides a generic graphical toolbar. Other plugins that
|
|
want to expose a button or other widget, can add those to this toolbar.</p>
|
|
<p>Using a single consolidated toolbar for all GUI widgets makes it easier
|
|
to position and style the toolbar rather than having to do that for lots
|
|
of different divs.</p>
|
|
<p>To add/activate the toolbar in your presentation, add this div:</p>
|
|
<pre><code><div id="impress-toolbar"></div>
|
|
</code></pre>
|
|
<p>Styling the toolbar is left to presentation author. Here's an example CSS:</p>
|
|
<pre><code>.impress-enabled div#impress-toolbar {
|
|
position: fixed;
|
|
right: 1px;
|
|
bottom: 1px;
|
|
opacity: 0.6;
|
|
}
|
|
.impress-enabled div#impress-toolbar > span {
|
|
margin-right: 10px;
|
|
}
|
|
</code></pre>
|
|
<p>The <a href="../mouse-timeout/README.md">mouse-timeout</a> plugin can be leveraged to hide
|
|
the toolbar from sight, and only make it visible when mouse is moved.</p>
|
|
<pre><code>body.impress-mouse-timeout div#impress-toolbar {
|
|
display: none;
|
|
}
|
|
</code></pre>
|
|
<p>If you're writing a plugin and would like to add a widget to the toolbar, see
|
|
<a href="toolbar.js">the top of the source file for further instructions</a>.</p>
|
|
<h2>Author</h2>
|
|
<p>Henrik Ingo (@henrikingo), 2016</p>
|
|
</div>
|
|
</div>
|
|
<div id="footer"></div>
|
|
</div>
|
|
</body>
|
|
</html> |