[英]JQuery and flot in a Windows Sidebar Gadget
我正在嘗試使用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 ]);
}
IE不支持<canvas>
元素,但是flot支持exanvas ,后者使用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>
額外說明一下,作為FYI-在Windows 7中已棄用beginTransition()
和endTransition()
它們將不執行任何操作。這是因為變形通常看起來有點麻煩。 您可以將其留給Vista用戶使用,但我只是想告訴您。
我已經在側邊欄小工具中使用了Google基於圖像的圖表API,沒有任何問題。
http://code.google.com/apis/chart/image_charts.html
我不知道他們的交互式圖表API如何與Windows小工具一起使用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.