Windows 边栏小工具中的 JQuery 和浮点数答案

【问题标题】：JQuery and flot in a Windows Sidebar GadgetWindows 边栏小工具中的 JQuery 和浮点数
【发布时间】：2010-02-06 02:19:30
【问题描述】：

我正在尝试使用 JQuery 和 flot 创建一个 Windows 侧边栏小工具。

当我在 FF 中运行小工具时，图表绘制得很好。但是当我从小工具运行它时，它不起作用。我知道 JQuery 代码可以正常工作，因为我可以使用它来更改 html、样式等。

所以问题出在浮动部分。

有什么想法吗？想法？

基本上，我正在尝试创建一个带有图表的侧边栏小工具，如果您有更好的解决方案，我会很高兴听到它们。

html代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script language="javascript" type="text/javascript" src="js/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="js/Docked.js" ></script>
    <link href="css/Docked.css" rel="stylesheet" type="text/css" />
</head>
<body onload="CheckDockState();">
    <g:background id="imgBackground">
    <div id="gadgetContent">
    </div>
    </g:background>
</body>
</html>

JavaScript 代码：

// Gadget width and height.
var gadgetWidth = 800;
var gadgetHeight = 800;

// Amount to scale gadget when docked or undocked.
var scaleDocked = 1;
var scaleUndocked = 2;

// Amount of time desired to perform transition (in seconds).
var timeTransition = 2;

// Declare the dock and undock event handlers.
try
{
    System.Gadget.onDock = CheckDockState;
    System.Gadget.onUndock = CheckDockState;
}
catch(err){}

// --------------------------------------------------------------------
// Check the gadget dock state; set the gadget style.
// --------------------------------------------------------------------
function CheckDockState()
{
    try
    {
        var oBackground = document.getElementById("imgBackground");
        System.Gadget.beginTransition();

        var oBody = document.body.style;
        if (System.Gadget.docked)
        {
            oBody.width = gadgetWidth*scaleDocked;
            oBody.height = gadgetHeight*scaleDocked;

            oBackground.src = "../images/bg_docked.png";

            //txtDocked.innerText = 'Docked';
            gadgetContent.innerHTML = 'Docked <button onclick="ShowChart();">press me</button>';
            gadgetContent.className = 'gadgetDocked';
        }
        else
        {
            oBody.width = gadgetWidth*scaleUndocked;
            oBody.height = gadgetHeight*scaleUndocked;  

            oBackground.src = "../images/bg_undocked.png";

            //txtDocked.innerText = 'Undocked';
            gadgetContent.innerHTML = 'Docked <button onclick="ShowChart();">press me</button>';
            gadgetContent.className = 'gadgetUndocked';
        }
        System.Gadget.endTransition(System.Gadget.TransitionType.morph, timeTransition);
    }
    catch(err)
    {
        // in a browser, some variables are different/missing then in the gadget, so i'm using this
        gadgetContent.innerHTML = 'Docked <button onclick="ShowChart();">press me</button>';
    }
}

function ShowChart()
{
    var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
        d1.push([i, Math.sin(i)]);

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    // a null signifies separate line segments
    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

    // just to see the jquery works
    $("#gadgetContent").width(200);
    $("#gadgetContent").height(200);

    jQuery.plot($("#gadgetContent"), [ d1, d2, d3 ]);
}

【问题讨论】：

标签： jquery flot windows-desktop-gadgets

【解决方案1】：

IE 不支持<canvas> 元素，但flot 支持excanvas，它使用VML 模拟它。下载 excanvas，并将其添加到您的脚本标签中，例如

<script language="javascript" type="text/javascript" 
    src="js/excanvas.min.js"></script>

另外，请勿将您的g:background 标签包裹在小工具主体的其余部分。这是不必要的，尽管它有效，但在某些时候您可能会遇到 DOM 遍历问题。只需打开它并立即关闭它：

<g:background id="imgBackground"></g:background>
<div id="gadgetContent"> 
</div>

附加说明，作为仅供参考 - beginTransition() 和 endTransition() 已弃用，并且在 Windows 7 中不会执行任何操作。这是因为变形通常看起来有点垃圾。你可以把它留给 Vista 用户，但我只是想让你知道。

【讨论】：

@Am：有任何错误信息吗？既然在 Firefox 下可以，那你在 IE 下试过吗？
是的，试过 IE，也可以。我猜这与 flot 自己绘制的方式有关。不知道是什么，因为小部件真的很难调试

【解决方案2】：

我在侧边栏小工具中使用了 Google 的基于 image 的图表 API，没有任何问题。

http://code.google.com/apis/chart/image_charts.html

我不知道他们的交互式图表 API 在 Windows 小工具中的行为。

【讨论】：