title: Gmail contextual Gadget - does not support reference JS and CSS?
body: <p>I was trying to create a Gmail Contextual Gadget and get to know that it doesn't support referencing JS and CSS files. It doesn't load Javascripts and CSS. I have to copy paste the whole CSS and Javascript then only it works. </p>
  
  <p>Please find my code below : It is just to display tabbed layout in gadget. </p>
  
  <p>
      
  
  <pre><code>    &lt;link href="http://54.251.60.219/staging/google/gadget_ui/css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet"&gt;
      &lt;script src="http://54.251.60.219/staging/google/gadget_ui/js/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="http://54.251.60.219/staging/google/gadget_ui/js/jquery-ui-1.10.3.custom.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      $(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.');
      }
      &lt;/script&gt;
  
      &lt;style&gt;
      #main {
          margin: 0px;
          padding: 0px;
          font-size: small;
      }
      &lt;/style&gt;
  
      &lt;!-- &lt;div id="main" style="display: none"&gt;
      &lt;/div&gt;
  
      &lt;div id="approval" style="display: none"&gt;
          &lt;img src="http://gadget-doc-examples.googlecode.com/svn/trunk/images/new.gif"&gt;
          &lt;a href="#" id="personalize"&gt;Personalize this gadget&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div id="waiting" style="display: none"&gt;
          Please click
          &lt;a href="#" id="approvaldone"&gt;I've approved access&lt;/a&gt;
          once you've approved access to your data.
      &lt;/div&gt; --&gt;
  
      &lt;div id="loadinggadget"&gt;&lt;h2&gt;PS NetSuite Gadget&lt;/h2&gt;&lt;/div&gt;
      &lt;style&gt;
          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;
          }
          &lt;/style&gt;
      &lt;!-- Tabs --&gt;
          &lt;div id="tabs"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#tabs-1"&gt;Login&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#tabs-2"&gt;Customers&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;div id="tabs-1"&gt;
  
                  &lt;table cellpadding='0' cellspacing='0' border='0' width='100%'&gt;
                  &lt;tr&gt;&lt;td bgcolor="white" style="padding:5"&gt;&lt;br&gt;
                  &lt;form method="post" action="#" name="aform" target="_top"&gt;      
                  &lt;table&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;font face="verdana,arial" size=-1&gt;Login:&lt;/font&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="login"&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;font face="verdana,arial" size=-1&gt;Password:&lt;/font&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="password" name="password"&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;font face="verdana,arial" size=-1&gt;Account Id:&lt;/font&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="accid"&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;font face="verdana,arial" size=-1&gt;&amp;nbsp;&lt;/font&gt;&lt;/td&gt;&lt;td&gt;&lt;font face="verdana,arial" size=-1&gt;&lt;input type="submit" value="Save"&gt;&lt;/font&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td colspan=2&gt;&lt;font face="verdana,arial" size=-1&gt;&amp;nbsp;&lt;/font&gt;&lt;/td&gt;&lt;/tr&gt;        
                  &lt;/table&gt;
                  &lt;/form&gt;
                  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;  
  
              &lt;/div&gt;
              &lt;div id="tabs-2"&gt;
              &lt;button onclick="showList()"/&gt;Get Customers&lt;/button&gt;
              &lt;button onclick="save()"/&gt;Save To NetSuite&lt;/button&gt;
                  &lt;div id="cust-list" style="display:none"&gt;
                      &lt;input type="radio" name="customer" value="cust1"&gt; Customer &lt;/input&gt;&lt;br/&gt;
                      &lt;input type="radio" name="customer" value="cust1"&gt; Customer &lt;/input&gt;&lt;br/&gt;
  
                  &lt;div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
      &lt;script type="text/javascript"&gt;
  
      gadgets.window.adjustHeight(200);
  
      function initGadget() {
          gadgets.window.adjustHeight(200);
  
      }
  
      gadgets.util.registerOnLoadHandler(initGadget);
  
  
  
  
  
  
    &lt;/script&gt;
  ]]&gt;
  </code></pre>
  
  <p></p>
  
  <p>I am getting error : "$ is not defined". But this code works in plain HTML file.</p>
  
  <p>Thanks in advance. </p>