SpreadJS Documentation
Setting Visual Styles
SpreadJS Documentation > Sample Code > Sample Code for the Widget > Setting Visual Styles

You can change the appearance of the entire widget.

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.12.0.0.css" rel="stylesheet" type="text/css" />
    <script src="./scripts/gc.spread.sheets.all.12.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

Developer's Guide