1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
\r
3 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:rsf="http://ponder.org.uk/rsf">
\r
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
\r
7 <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-reset.css" />
\r
8 <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-layout.css" />
\r
9 <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-text.css" />
\r
10 <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-theme-hc.css" />
\r
11 <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-theme-hci.css" />
\r
12 <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-theme-slate.css" />
\r
13 <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-theme-coal.css" />
\r
14 <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-theme-mist.css" />
\r
15 <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-theme-rust.css" />
\r
16 <link rel="stylesheet" type="text/css" href="../../../lib/jquery/ui/css/fl-theme-coal/coal.css" />
\r
17 <link rel="stylesheet" type="text/css" href="../../../lib/jquery/ui/css/fl-theme-mist/mist.css" />
\r
18 <link rel="stylesheet" type="text/css" href="../../../lib/jquery/ui/css/fl-theme-slate/slate.css" />
\r
19 <link rel="stylesheet" type="text/css" href="../../../lib/jquery/ui/css/fl-theme-hc/hc.css" />
\r
20 <link rel="stylesheet" type="text/css" href="../../../lib/jquery/ui/css/fl-theme-hci/hci.css" />
\r
21 <link rel="stylesheet" type="text/css" href="../css/UIOptions.css" />
\r
22 <link rel="stylesheet" type="text/css" href="../css/Slider.css" />
\r
24 <title>UI Options</title>
\r
25 <script type="text/javascript" src="../../../lib/jquery/core/js/jquery.js"></script>
\r
26 <script type="text/javascript" src="../../../lib/jquery/ui/js/ui.core.js"></script>
\r
27 <script type="text/javascript" src="../../../lib/jquery/ui/js/ui.accordion.js"></script>
\r
28 <script type="text/javascript" src="../../../lib/jquery/ui/js/ui.slider.js"></script>
\r
29 <script type="text/javascript" src="../../../lib/json/js/json2.js"></script>
\r
30 <script type="text/javascript" src="../../../lib/jquery/plugins/delegate/js/jquery.delegate.js"></script>
\r
32 <script type="text/javascript" src="../../../framework/core/js/jquery.keyboard-a11y.js"></script>
\r
33 <script type="text/javascript" src="../../../framework/core/js/Fluid.js"></script>
\r
34 <script type="text/javascript" src="../../../framework/core/js/FluidDOMUtilities.js"></script>
\r
35 <script type="text/javascript" src="../../../framework/core/js/DataBinding.js"></script>
\r
36 <script type="text/javascript" src="../../../lib/fastXmlPull/js/fastXmlPull.js"></script>
\r
37 <script type="text/javascript" src="../../../framework/renderer/js/fluidParser.js"></script>
\r
38 <script type="text/javascript" src="../../../framework/renderer/js/fluidRenderer.js"></script>
\r
40 <script type="text/javascript" src="../js/UIEnhancer.js"></script>
\r
41 <script type="text/javascript" src="../js/UIOptions.js"></script>
\r
42 <script type="text/javascript" src="../../tableOfContents/js/TableOfContents.js"></script>
\r
43 <script type="text/javascript" src="../../undo/js/Undo.js"></script>
\r
45 <script type="text/javascript">
\r
46 $().ready(function () {
\r
51 afterRender: function () {
\r
52 $('.fl-uiOptions .fl-col:eq(0)').accordion({header: 'h2', clearStyle: true, autoHeight: false});
\r
56 fluid.uiOptions(".uiOptions", options);
\r
63 <h1>User Interface Options</h1>
\r
64 <form id="options" action="" class="fl-col-flex2 fl-uiOptions uiOptions">
\r
66 <!-- column 1, options -->
\r
67 <div class="fl-col">
\r
68 <h2>Easier to see</h2>
\r
69 <div class="fl-accordion-content">
\r
70 <ol class="fl-controls-right">
\r
72 <label for="text-font" class="fl-label">Font style:</label>
\r
73 <select rsf:id="text-font" id="text-font" class="flc-uiOptions-control" >
\r
77 <li class="flc-uiOptions-min-text-size fl-uiOptions-min-text-size">
\r
78 <label for="min-text-size" class="fl-label">Minimum text size:</label>
\r
79 <p class="fl-slider fl-force-right fl-slider-horz flc-textfieldSlider-slider flc-uiOptions-control"> </p>
\r
80 <input id="min-text-size" class="fl-textfield flc-textfieldSlider-field flc-uiOptions-control" type="text" />pt
\r
84 <label for="text-spacing" class="fl-label">Text Spacing:</label>
\r
85 <select rsf:id="text-spacing" id="text-spacing" class="flc-uiOptions-control" >
\r
86 <option>text-spacing here</option>
\r
89 <li class="flc-uiOptions-line-spacing fl-uiOptions-line-spacing">
\r
90 <label for="line-spacing" class="fl-label">Line Spacing:</label>
\r
91 <p class="fl-slider fl-force-right fl-slider-horz flc-textfieldSlider-slider flc-uiOptions-control"> </p>
\r
92 <input id="line-spacing" class="fl-textfield flc-textfieldSlider-field flc-uiOptions-control" type="text" />
\r
95 <label class="fl-label" for="theme">Contrast:</label>
\r
96 <select rsf:id="theme" id="theme" class="flc-uiOptions-control" >
\r
97 <option>contrast here</option>
\r
102 <span class="fl-label">Background Images:</span>
\r
104 <legend>Background Images</legend>
\r
105 <span rsf:id="background-images-row:">
\r
106 <input rsf:id="background-images-choice" id="background-images-choice" class="flc-uiOptions-control" type="radio" />
\r
107 <label rsf:id="background-images-label" for="background-images-choice">choice</label>
\r
113 <span class="fl-label">Simplified Layout:</span>
\r
115 <legend>Simplified Layout</legend>
\r
116 <span rsf:id="layout-row:">
\r
117 <input rsf:id="layout-choice" id="layout-choice" class="flc-uiOptions-control" type="radio" />
\r
118 <label rsf:id="layout-label" for="layout-choice">choice</label>
\r
125 <h2>Easier to find</h2>
\r
126 <div class="fl-accordion-content">
\r
127 <ol class="fl-controls-right">
\r
129 <span class="fl-label">Table of Contents:</span>
\r
131 <legend>Table of Contents</legend>
\r
132 <span rsf:id="toc-row:">
\r
133 <input rsf:id="toc-choice" id="toc-choice" class="fl-textfield flc-uiOptions-control" type="radio"/>
\r
134 <label rsf:id="toc-label" for="toc-choice">choice</label>
\r
139 <span class="fl-label">Links:</span>
\r
141 <legend>Links</legend>
\r
142 <input rsf:id="links-underline" id="links-underline" class="flc-uiOptions-control" type="checkbox"/>
\r
143 <label for="links-underline">Underline</label><br />
\r
144 <input rsf:id="links-bold" id="links-bold" class="flc-uiOptions-control" type="checkbox"/>
\r
145 <label for="links-bold">Bold</label><br />
\r
146 <input rsf:id="links-larger" id="links-larger" class="flc-uiOptions-control" type="checkbox"/>
\r
147 <label for="links-larger">Larger</label>
\r
151 <span class="fl-label">Inputs:</span>
\r
153 <legend>Inputs</legend>
\r
154 <input rsf:id="inputs-larger" id="inputs-larger" class="flc-uiOptions-control" type="checkbox"/>
\r
155 <label for="inputs-larger">Larger</label>
\r
162 <!-- column 2, preview -->
\r
163 <div class="fl-col">
\r
164 <div class="fl-subcomp-preview">
\r
165 <h2><strong>Preview window</strong> (updates automatically)</h2>
\r
166 <iframe class="flc-uiOptions-preview-frame" src="UIOptionsPreview.html" frameborder="0"></iframe>
\r
168 <div class="fl-text-align-center fl-subcomp-buttons">
\r
169 <input class="flc-uiOptions-reset" type="button" value="Reset" />
\r
170 <input class="flc-uiOptions-save" type="button" value="Save and apply" />
\r
171 <input class="flc-uiOptions-cancel" type="button" value="Cancel" />
\r