ThemeRollerのカスタムテーマの使用

ThemeRollerを使用してカスタムjQueryテーマを作成し、これをSpread.Sheetsに使用できます。

ThemeRollerを利用するには、jqueryui.com/themerollerにアクセスします。

カスタムテーマを作成してから、Spread.Sheetsのリンクの後で、このリンクをページに追加します。次に、例を示します。

<link href=”css/gcspread.sheets.xx.x.x.css” rel=”stylesheet” type=”text/css” />

<link href="css/black-tie/jquery-ui.css " rel="stylesheet" type="text/css" />

サーバーからテーマをダウンロードする場合は、タイマーを使用してウィジェットを更新すると便利です。

コードの使用

次のサンプルコードは、Spread.Sheetsのサンプルコードからの抜粋であり、タイマーの使用例を示します。

JavaScript	コードのコピー
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Spread Sample</title> <link href="./css/gc.spread.sheets.xx.x.x.css" rel="stylesheet"/> <link href="https://code.jquery.com/ui/1.11.4/themes/overcast/jquery-ui.css" rel="stylesheet" type="text/css" title="themeRuler"/> <script src="http://code.jquery.com/jquery-2.1.1.js" type="text/javascript"></script> <script src="./scripts/gc.spread.sheets.all.xx.x.x.js" type="application/javascript"></script> <script> $(function () { var spread = new GC.Spread.Sheets.Workbook($("#ss")[0]); $("#btn").click(function () { $("link[title='themeRuler']")[0].href = "https://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css"; setTimeout( function () { var spread = $("#ss").data("workbook"); spread.refresh(); }, 500); }) }) </script> </head> <body> <div id="ss" style="width:50%;height:500px;border:solid 1px gray"></div> <input type="button" id="btn" value="Change Theme"/> </body> </html>

JavaScript

コードのコピー

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Spread Sample</title>
     <link href="./css/gc.spread.sheets.xx.x.x.css" rel="stylesheet"/>
     <link href="https://code.jquery.com/ui/1.11.4/themes/overcast/jquery-ui.css" rel="stylesheet" type="text/css"
           title="themeRuler"/>
<script src="http://code.jquery.com/jquery-2.1.1.js" type="text/javascript"></script>
     <script src="./scripts/gc.spread.sheets.all.xx.x.x.js" type="application/javascript"></script>
     <script>
         $(function () {
             var spread = new GC.Spread.Sheets.Workbook($("#ss")[0]);

            $("#btn").click(function () {
                 $("link[title='themeRuler']")[0].href = "https://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css";
                 setTimeout(
                         function () {
                             var spread = $("#ss").data("workbook");
                             spread.refresh();
                         }, 500);
             })
        })
     </script>
</head>
<body>
<div id="ss" style="width:50%;height:500px;border:solid 1px gray"></div>
<input type="button" id="btn" value="Change Theme"/>
</body>
</html>