docs/include/jscripts/infusion/components/uiOptions/html/UIOptions.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
   2 \r
   3 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:rsf="http://ponder.org.uk/rsf">\r
   4     <head>\r
   5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\r
   6 \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
  23 \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
  31 \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
  39 \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
  44         \r
  45         <script type="text/javascript">\r
  46             $().ready(function () {\r
  47                 fluid.uiEnhancer();\r
  48                 \r
  49                 var options = {\r
  50                     listeners: {\r
  51                         afterRender: function () {\r
  52                             $('.fl-uiOptions .fl-col:eq(0)').accordion({header: 'h2', clearStyle: true, autoHeight: false});\r
  53                         }\r
  54                     }\r
  55                 };\r
  56                 fluid.uiOptions(".uiOptions", options);\r
  57             });\r
  58         </script>\r
  59     </head>\r
  60 \r
  61     <body>\r
  62 \r
  63         <h1>User Interface Options</h1>\r
  64         <form id="options" action="" class="fl-col-flex2 fl-uiOptions uiOptions">\r
  65             \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
  71                             <li>\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
  74                                 </select>\r
  75                             </li>\r
  76                             \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
  81                             </li>\r
  82         \r
  83                             <li>\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
  87                                 </select>\r
  88                             </li>\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
  93                             </li>\r
  94                             <li>\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
  98                                 </select>\r
  99                             </li>\r
 100         \r
 101                             <li>\r
 102                                 <span class="fl-label">Background Images:</span>\r
 103                                 <fieldset>\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
 108                                     </span>\r
 109                                 </fieldset>\r
 110                             </li>\r
 111         \r
 112                             <li>                             \r
 113                                 <span class="fl-label">Simplified Layout:</span>\r
 114                                 <fieldset>\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
 119                                     </span>\r
 120                                 </fieldset>\r
 121                             </li>\r
 122                         </ol>\r
 123                     </div>\r
 124                 \r
 125                     <h2>Easier to find</h2>\r
 126                     <div class="fl-accordion-content">\r
 127                         <ol class="fl-controls-right">\r
 128                             <li>\r
 129                                 <span class="fl-label">Table of Contents:</span>\r
 130                                 <fieldset>\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
 135                                     </span>\r
 136                                 </fieldset>\r
 137                             </li>                            \r
 138                             <li>\r
 139                                 <span class="fl-label">Links:</span>\r
 140                                 <fieldset>\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
 148                                 </fieldset>\r
 149                             </li>\r
 150                             <li>\r
 151                                 <span class="fl-label">Inputs:</span>\r
 152                                 <fieldset>\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
 156                                 </fieldset>                                   \r
 157                             </li>\r
 158                         </ol>\r
 159                     </div>\r
 160                 \r
 161             </div>\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
 167                 </div>\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
 172                 </div>                \r
 173             </div>\r
 174             \r
 175         </form>                \r
 176     </body>\r
 177 </html>\r
 178 \r