Versions Compared

Old Version 15

changes.mady.by.user Jonathan Hung

Saved on

compared with

New Version 16

changes.mady.by.user Jonathan Hung

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Info
titleWork in Progress

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.ca

 

Overview of Steps

Part 1: Preparing

...

  1. Add the UIO HTML snippets to your project's HTML pages
  2. Add the UIO Javascript snippets to your project's HTML pages

Part 4: Tweaking and Customizing UI Options

  1. Tweaking your site's styling and structure to work with UI Options

...

Code Block
languagexml
<!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 the effects being applied to the page.

Part 4: Customizing and Optimizing Your Site for UI Options

  • Inverting contrast themes
  • em, rem, and pixels
  • Structure
  • Dealing with images and contrast styles
  • Focus and hover styling