0

当我将此作为小工具添加到谷歌日历时，它会部分显示在屏幕之外......我应该如何更正以便小工具将出现在屏幕上......

这是一个代码，它创建一个小工具，要求输入用户名和密码以及登录按钮..

我只是想知道程序也让小工具出现在屏幕上 

enter code here
<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="ABC Google Calendar Gadget" width="180" author="abc" author_email="abcgmail.com" description="My First Test">
<Require feature="dynamic-height"/>
 <Require feature="google.calendar-0.5"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
<html style="overflow: hidden;">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<style>
//.login {
//  display: block;
//}
//.event {
//  display: none;
/}
</style>

</head>
<body class="loc-en ff ff3">

<script>

var _message = 'This is My first Gadget!';
function validateForm(){
alert("Hello");
$('.login').hide();
$('.event').show();
}
function createEventfun(){
alert("create event");
var eventData = {
    title: 'NewYear',
    details: 'Hi all',
    location: 'My room',
    allDay: true,
    startTime: {year: 2013, month: 04, date: 21},
    endTime: {year: 2013, month: 04, date: 22},
    attendees: [
      {email: 'nirupama.ninusah@gmail.com'}
    ],
    rrule: 'RRULE:FREQ=YEARLY'
  };
google.calendar.composeEvent(eventData);
}  

function load()
{
alert("Page is loaded");
}

function changeWidth(){
        var e1 = document.getElementById("gadgetcell");
        e1.style.width = 180;
        alert("Page is loaded and width of gadgetcell is modified to 180");
    }

</script>

<div class="login" align="left">
<table border="1" height="200" width="100%">
<tr>
<td>
<image src="http://abc.com/Portals/78096/images/abc_logo.jpg" height="60" width="90"/>
</td>
</tr>
<tr>
<td align="left">
<table border="0">
<tr>
<td>Userid</td>
<td><input type="text" name="userid" size=10/><br></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" size=10/><br></td>
</tr>
<tr>
<td>VidyoURL</td>
<td><input type="text" name="url" size=10/><br></td>
</tr>
<tr>
<td><button onClick="validateForm()" style="background-color:red;color:white">LOGIN</button></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="event" style="width: 180px;">
<table border="1">
<tr>
<td>
<image src="http://abc.com/Portals/78096/image/abc_logo.jpg" height="60" width="90"/>
</td>
</tr>
<tr>
<td align="center">
<table border="0" height="200" width="100%">
<tr>
<span>User Successfully Aunthenticated</span>
</tr>&nbsp;
<tr>
<button onclick="createEventfun()" style="background-color:red;color:white">CREATE VIDYO EVENT</button>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
 ]]></Content>
</Module>
4

1 回答 1

1

看看管理小工具高度：

- A <Require feature="dynamic-height"/> tag (under <ModulePrefs>) to tell the 
  gadget to load the dynamic-height library.
- A call to the JavaScript function gadgets.window.adjustHeight() whenever there 
  is a change in content, or another event occurs that requires the gadget to 
  resize itself.

我将此脚本添加到所有视图中并且它有效：

<script type="text/javascript" charset="utf-8">
    function resize(){
        gadgets.window.adjustHeight();
    }
    window.onload=resize;
</script>

不要忘记“必需功能”标签

于 2013-05-07T15:44:28.480 回答