SpreadJS製品ヘルプ
視覚スタイルの設定
SpreadJS > サンプルコード > ウィジェットのサンプルコード > 視覚スタイルの設定

ウィジェット全体の外観を変更できます。

コードの使用

次のサンプルコードは、ウィジェットのテーマ(視覚スタイル)を設定します。

JavaScript
コードのコピー
<!DOCTYPE html>
         <html>
         <head>
             <title>Spread.Sheets Use Theme</title>
             <script src="http://code.jquery.com/jquery-2.0.2.js" type="text/javascript"></script>
             <link href="./css/gc.spread.sheets.xx.x.x.css" rel="stylesheet" type="text/css" />
             <script src="./scripts/gc.spread.sheets.all.xx.x.x.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.11/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>
関連トピック

開発者の手引き