...
| Code Block |
|---|
|
<!DOCTYPE html>
<html lang="en">
<head>My Project<<head>
<title>My Project</title>
</head>
<body>
<h1>This is my project</h1>
<p>This is a paragraph.</p>
</body>
</html> |
...
| Code Block |
|---|
|
<!DOCTYPE html>
<html lang="en">
<head>
<head>My<title>My Project</title>
</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> |
...
| Code Block |
|---|
|
<!DOCTYPE html>
<html lang="en">
<head>
<head>My<title>My Project</title>
</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> |
...
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.
Our example 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-custom.js"></script>
</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> |
Initialize the UI Options Javascript
...