Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

You can create a custom jQuery theme using the ThemeRoller and then use the theme with Spread.Sheets.
You can find the ThemeRoller at 你可以使用 ThemeRoller 创建  JQuery 主题,并将其在 Spread.Sheets 中引用。

关于 ThemeRoller 的详细信息,请参阅: jqueryui.com/themeroller.
Create the custom theme and then add the link to the page after the Spread.Sheets link. For example:创建自定义主题,并且将它们放到 Spread.Sheets 页面上。比如:
<link href="css/gcspread.sheets.x.xx.xxxxx.x.css" rel="stylesheet" type="text/css" />
<link href="css/black-tie/jquery-ui.css " rel="stylesheet" type="text/css" />
You may also wish to use a timer to refresh the widget if downloading the theme from a server.
Using Code
This example uses a timer. 如果你从服务器端下载了主题,也可以使用一个 timer 来刷新控件。
示例代码
以下代码使用了 timer。

JavaScript

Copy Code

<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="1fbe5b2b-ff24-48f5-8fcc-4a28afd64b09"><ac:plain-text-body><![CDATA[

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Spread Sample</title>    <link href="./css/gc.spread.sheets.10.0.0.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.10.0.0.js" type="application/javascript"></script>    <script>        $(function () {            var spread = new GC.Spread.Sheets.Workbook($("#ss")[0]);
]]></ac:plain-text-body></ac:structured-macro>
<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="f5762e1d-c6ac-4107-9cda-8f29ae1a8721"><ac:plain-text-body><![CDATA[            $("#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>

 

]]></ac:plain-text-body></ac:structured-macro>