javascript - Gmail 上下文小工具 - 不支持引用 JS 和 CSS？

Question

我试图创建一个 Gmail 上下文小工具，后来发现它不支持引用 JS 和 CSS 文件。它不加载 Javascripts 和 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>&nbsp;</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>&nbsp;</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 文件。

提前致谢。

Answer 1

也许您的网站使用了另一个库。尝试使用“jQuery”而不是“$”