我试图创建一个 Gmail 上下文小工具并知道它不支持引用 JS 和 CSS 文件。它不加载 Javascript 和 CSS。我必须复制粘贴整个 CSS 和 Javascript，然后才能正常工作。
请在下面找到我的代码：它只是在小工具中显示选项卡式布局。
<link href="http://54.251.60.219/staging/google/gadget_ui/css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<script src="http://54.251.60.219/staging/google/gadget_ui/js/jquery-1.9.1.js"></script>
<script src="http://54.251.60.219/staging/google/gadget_ui/js/jquery-ui-1.10.3.custom.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
);
});
function showList(){
$('#cust-list').show();
}
function save(){
if(!$('input[name=customer]:checked').length)
alert('You need to select a customer to save an email.');
}
</script>
<style>
#main {
margin: 0px;
padding: 0px;
font-size: small;
}
</style>
<!-- <div id="main" style="display: none">
</div>
<div id="approval" style="display: none">
<img src="http://gadget-doc-examples.googlecode.com/svn/trunk/images/new.gif">
<a href="#" id="personalize">Personalize this gadget</a>
</div>
<div id="waiting" style="display: none">
Please click
<a href="#" id="approvaldone">I've approved access</a>
once you've approved access to your data.
</div> -->
<div id="loadinggadget"><h2>PS NetSuite Gadget</h2></div>
<style>
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
.demoHeaders {
margin-top: 2em;
}
#dialog-link {
padding: .4em 1em .4em 20px;
text-decoration: none;
position: relative;
}
#dialog-link span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 50%;
margin-top: -8px;
}
#icons {
margin: 0;
padding: 0;
}
#icons li {
margin: 2px;
position: relative;
padding: 4px 0;
cursor: pointer;
float: left;
list-style: none;
}
#icons span.ui-icon {
float: left;
margin: 0 4px;
}
.fakewindowcontain .ui-widget-overlay {
position: absolute;
}
</style>
<!-- Tabs -->
<div id="tabs">
<ul>
<li><a href="#tabs-1">Login</a></li>
<li><a href="#tabs-2">Customers</a></li>
</ul>
<div id="tabs-1">
<table cellpadding='0' cellspacing='0' border='0' width='100%'>
<tr><td bgcolor="white" style="padding:5"><br>
<form method="post" action="#" name="aform" target="_top">
<table>
<tr><td><font face="verdana,arial" size=-1>Login:</font></td><td><input type="text" name="login"></td></tr>
<tr><td><font face="verdana,arial" size=-1>Password:</font></td><td><input type="password" name="password"></td></tr>
<tr><td><font face="verdana,arial" size=-1>Account Id:</font></td><td><input type="text" name="accid"></td></tr>
<tr><td><font face="verdana,arial" size=-1> </font></td><td><font face="verdana,arial" size=-1><input type="submit" value="Save"></font></td></tr>
<tr><td colspan=2><font face="verdana,arial" size=-1> </font></td></tr>
</table>
</form>
</td></tr></table>
</div>
<div id="tabs-2">
<button onclick="showList()"/>Get Customers</button>
<button onclick="save()"/>Save To NetSuite</button>
<div id="cust-list" style="display:none">
<input type="radio" name="customer" value="cust1"> Customer </input><br/>
<input type="radio" name="customer" value="cust1"> Customer </input><br/>
<div>
</div>
</div>
<script type="text/javascript">
gadgets.window.adjustHeight(200);
function initGadget() {
gadgets.window.adjustHeight(200);
}
gadgets.util.registerOnLoadHandler(initGadget);
</script>
]]>
我收到错误：“$ 未定义”。但是这段代码在纯 HTML 文件中工作。
提前致谢。