SpreadJS 13
SpreadJS Documentation / Sample Code / Sample Code for the Widget / Setting Visual Styles
In This Topic
    Setting Visual Styles
    In This Topic

    You can change the appearance of the entire widget.

    Visual styling

    Using Code

    This example sets a theme or visual style for the widget.

    JavaScript
    Copy Code
    <!DOCTYPE html>
    <html>
    <head>
        <title>SpreadJS Use Theme</title>
        <script src="http://code.jquery.com/jquery-2.0.2.js" type="text/javascript"></script>
        <link href="./css/gc.spread.sheets.13.0.0.css" rel="stylesheet" type="text/css" />
        <script src="./scripts/gc.spread.sheets.all.13.0.0.js"></script>
        <script type="text/javascript">
            $(function ()
         {
           var spread =
           new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
           var sheet = spread.getActiveSheet();
           $("#btn1").click(function ()
            {
              $("head").append($('<link href=
              "https://code.jquery.com/ui/1.8.12/themes/hot-sneaks/jquery-ui.css" rel="stylesheet"
              type="text/css" />'));
              
              setTimeout(function ()
               {   
                 spread.repaint();
               }, 500);
              });
            });
        </script>
    </head>
    <body>
    <div>
      <div id="ss" style="height: 300px; width: 50%"></div>
    </div>
    <input type="button" id="btn1" value="Change Theme" />
    </body>
    </html>
    
    See Also