...
| 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>
<!-- Table of Contents -->
<div class="flc-toc-tocContainer"> </div>
<h1>This is my project</h1>
<p>This is a paragraph.</p>
</body>
</html> |
Add CSS and Javascript Links
In the <head> of your HTML file, you now need to link to the UI Options CSS and Javascript. To do this, the following should be added to <head>:
| Code Block | ||
|---|---|---|
| ||
<!-- UI Options CSS -->
<link rel="stylesheet" type="text/css" href="/infusion/src/lib/normalize/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="/infusion/src/framework/core/css/fluid.css" />
<link rel="stylesheet" type="text/css" href="/infusion/src/framework/preferences/css/Enactors.css" />
<link rel="stylesheet" type="text/css" href="/infusion/src/framework/preferences/css/PrefsEditor.css" />
<link rel="stylesheet" type="text/css" href="/infusion/src/framework/preferences/css/SeparatedPanelPrefsEditor.css" />'
<!-- The Infusion Library -->
<script type="text/javascript" src="/infusion/infusion-custom.js"></script> |
Note: In the above snippet, it assumes the Infusion directory is sibling to the location of the HTML file. You may have to adjust the path in the <link> and <script> elements to match your particular directory structure.
If you open this page in your browser now, you'll only see that the button has been styled differently: it is in the upper right corner and the font has been changed. You can also see the bar of the sliding panel. The button still doesn't do anything, since we still haven't added the UI Options component to the page.
Initialize the UI Options Javascript