...
Add the following markup at the very beginning within your <body> tag to your page html:
| Code Block |
|---|
|
<!-- UI Options Sliding Panel -->
<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> |
...
| Code Block |
|---|
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Project</title>
</head>
<body>
<!-- UI Options Sliding Panel -->
<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> |
...
| Code Block |
|---|
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Project</title>
</head>
<body>
<!-- UI Options Sliding Panel -->
<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> |
...
| 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-customall.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.
...
| Code Block |
|---|
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Project</title>
<!-- 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-customall.js"></script>
</head>
<body>
<!-- UI Options Sliding Panel -->
<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> |
Initialize the
...
UI Options JavaScript
We will now need to initialize UI Options. To do this you will need to add the following <script> block before the closing </body> tag in your HTML file.
| Code Block |
|---|
|
<script type="text/javascript">
$(document).ready(function () {
fluid.uiOptions.prefsEditor(".flc-prefsEditor-separatedPanel", {
tocTemplate: "infusion/components/tableOfContents/html/TableOfContents.html",
terms: {
templatePrefix: "infusion/framework/preferences/html",
messagePrefix: "infusion/framework/preferences/messages"
}
});
})
</script> |
So in our example, the HTML should now look like this:
| Code Block |
|---|
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Project</title>
<!-- 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-all.js"></script>
</head>
<body>
<!-- UI Options Sliding Panel -->
<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>
<!-- Initialize UI Options JavaScript -->
<script type="text/javascript">
$(document).ready(function () {
fluid.uiOptions.prefsEditor(".flc-prefsEditor-separatedPanel", {
tocTemplate: "infusion/components/tableOfContents/html/TableOfContents.html",
terms: {
templatePrefix: "infusion/framework/preferences/html",
messagePrefix: "infusion/framework/preferences/messages"
}
});
})
</script>
</body>
</html> |
Congratulations!
UI Options is now fully functional on your page. Now, when you load your page in your browser and click on the "Show Display Preferences" button, you will see the UI Options controls. If you adjust the controls, you will see your changes being applied to the page.