SpreadJS 产品帮助手册
Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

You can create a custom jQuery theme using the ThemeRoller and then use the theme with Spread.Sheets.
You can find the ThemeRoller at jqueryui.com/themeroller.
Create the custom theme and then add the link to the page after the Spread.Sheets link. For example:
<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.

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>

 

  • No labels