...
Now that Infusion has been built and copied into your project, you can now add UI Options into your project.
Adding the Sliding Panel
The UI Options component includes HTML templates for all the controls, so you don't need to create any HTML for them. You only need to add a small amount of markup to the top of your webpage to tell UI Options where to render itself.
As an example, let's start with a simple HTML page:
| Code Block | ||
|---|---|---|
| ||
<!DOCTYPE html>
<html lang="en">
<head>My Project</head>
<body>
<h1>This is my project</h1>
<p>This is a paragraph.</p>
</body>
</html> |
Add the following markup at the very beginning within your <body> tag to your page html:
| Code Block | ||
|---|---|---|
| ||
<div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel">
<!-- This is the div that will contain the Preference Editor component -->
<div class="flc-slidingPanel-panel flc-prefsEditor-iframe"></div>
<!-- This div is for the sliding panel that shows and hides the Preference Editor controls -->
<div class="fl-panelBar">
<span class="fl-prefsEditor-buttons">
<button id="reset" class="flc-prefsEditor-reset fl-prefsEditor-reset">
<span class="fl-icon-undo"></span>
Reset
</button>
<button id="show-hide" class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide">
Show/Hide
</button>
</span>
</div>
</div> |
So our example will look like this now:
| Code Block | ||
|---|---|---|
| ||
<!DOCTYPE html>
<html lang="en">
<head>My Project</head>
<body>
<div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel">
<!-- This is the div that will contain the Preference Editor component -->
<div class="flc-slidingPanel-panel flc-prefsEditor-iframe"></div>
<!-- This div is for the sliding panel that shows and hides the Preference Editor controls -->
<div class="fl-panelBar">
<span class="fl-prefsEditor-buttons">
<button id="reset" class="flc-prefsEditor-reset fl-prefsEditor-reset">
<span class="fl-icon-undo"></span>
Reset
</button>
<button id="show-hide" class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide">
Show/Hide
</button>
</span>
</div>
</div>
<h1>This is my project</h1>
<p>This is a paragraph.</p>
</body>
</html> |