...
| 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
This section is in-complete.
...