| Info | ||
|---|---|---|
| ||
This is a working space for creating documentation on integrating UI Options for end users who are not traditional "developers". The intent is to create and refine this documentation so it can be integrated into the official Infusion documentation.Please leave feedback in the comments section, or send email to: jhung (at) ocadu.cadocumentation has been deprecated and is not up to date with the current code base. For the most up to date documentation for UI Options, see "Setting up User Interface Options" on the Infusion Documentation website. |
Overview of Steps
Part 1: Preparing
...
| Code Block | ||
|---|---|---|
| ||
<script type="text/javascript">
$(document).ready(function () {
fluid.uiOptions.prefsEditor(".flc-prefsEditor-separatedPanel", {
tocTemplate: "infusion/src/components/tableOfContents/html/TableOfContents.html",
terms: {
templatePrefix: "infusion/src/framework/preferences/html",
messagePrefix: "infusion/src/framework/preferences/messages"
}
});
})
</script> |
...
| 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/src/components/tableOfContents/html/TableOfContents.html",
terms: {
templatePrefix: "infusion/src/framework/preferences/html",
messagePrefix: "infusion/src/framework/preferences/messages"
}
});
})
</script>
</body>
</html> |
...
Part 4: Customizing and Optimizing Your Site for UI Options
...
To get the most out of UI Options, see this guide "Working with UI Options". It is a starting point for customizing and optimizing your site for UI Options, and also addresses some common integration issues.