File: class.background.htm

Recommend this page to a friend!
  Classes of JImmy Bo   JavaScript CSS Generator   class.background.htm   Download  
File: class.background.htm
Role: Example script
Content type: text/plain
Description: Basic Template for Background CSS Editor
Class: JavaScript CSS Generator
Generate CSS styles dynamically
Author: By
Last change:
Date: 10 years ago
Size: 5,075 bytes
 

Contents

Class file image Download
<style> </style> <div class='css-tool tool-background-generator row'> <div class='tool-title'>Background</div> <div class='display small-12 columns'><div class='text'>Hello World!</div></div> <div class='inputs small-12 columns'> <div class='input background-type'> <div class='label'>Background Type</div> <div class='field'> <select> <option value='none'>none</option> <option value='solid' >solid</option> <option value='diagonal' SELECTED >diagonal</option> </select> </div> </div> <div class='section solid'> <div class='colors'> <div class='row'> <div class='input red small-4 columns'> <div class='label'>Red (0-255)</div> <div class='field'><input type='text' value='244' /></div> </div><!-- end input --> <div class='input green small-4 columns'> <div class='label'>Green (0-255)</div> <div class='field'><input type='text' value='22' /></div> </div><!-- end input --> <div class='input blue small-4 columns'> <div class='label'>Blue (0-255)</div> <div class='field'><input type='text' value='22' /></div> </div><!-- end input --> </div> <div class='input opacity'> <div class='label'>Alpha/Opacity (0.0 - 1.0)</div> <div class='field'><input type='text' value='0.2' /></div> </div><!-- end input --> </div><!-- End Colors --> </div><!-- section solid --> <div class='section diagonal'> <div class='input angle'> <div class='label'>Angle (0-360)</div> <div class='field'><input type='text' value='120' /></div> </div><!-- end input --> <div class='input diag-width'> <div class='label'>Band Width (px)</div> <div class='field'><input type='text' value='20' /></div> </div><!-- end input --> <div class='colors a'> <div class='title'>Primary Color</div> <div class='row'> <div class='input red small-4 columns'> <div class='label'>Red (0-255)</div> <div class='field'><input type='text' value='244' /></div> </div><!-- end input --> <div class='input green small-4 columns'> <div class='label'>Green (0-255)</div> <div class='field'><input type='text' value='22' /></div> </div><!-- end input --> <div class='input blue small-4 columns'> <div class='label'>Blue (0-255)</div> <div class='field'><input type='text' value='22' /></div> </div><!-- end input --> </div> <div class='input opacity'> <div class='label'>Alpha/Opacity (0.0 - 1.0)</div> <div class='field'><input type='text' value='0.2' /></div> </div><!-- end input --> </div><!-- End primary colors --> <div class='colors b'> <div class='title'>Secondary Color</div> <div class='row'> <div class='input red small-4 columns'> <div class='label'>Red (0-255)</div> <div class='field'><input type='text' value='244' /></div> </div><!-- end input --> <div class='input green small-4 columns'> <div class='label'>Green (0-255)</div> <div class='field'><input type='text' value='22' /></div> </div><!-- end input --> <div class='input blue small-4 columns'> <div class='label'>Blue (0-255)</div> <div class='field'><input type='text' value='22' /></div> </div><!-- end input --> </div> <div class='input opacity'> <div class='label'>Alpha/Opacity (0.0 - 1.0)</div> <div class='field'><input type='text' value='0.4' /></div> </div><!-- end input --> </div><!-- End secondary colors --> </div><!-- section diagonal --> </div><!-- end inputs --> <div class='code-area small-12 columns'> <div class='label'>CSS</div> <div class='field'> <textarea></textarea> </div> </div> </div><!-- end tool-box-shadow-generator --> <script> /* HANDLE background style dropdown change... */ $(function() { // Handler for .ready() called. $( ".tool-background-generator select ").on( "change", function() { // get value of background type dropdown... var background_style = $(".tool-background-generator .background-type select").val(); // slide up currently visible content $( ".tool-background-generator " + ".section").slideUp('fast'); // slide down new section style if(background_style == 'solid') $( ".tool-background-generator .section.solid").slideDown(); else if(background_style == 'diagonal') $( ".tool-background-generator .section.diagonal").slideDown(); }); }); </script>