577
edits
Labs/Extensions2/Examples: Difference between revisions
→Content Filter
| Line 22: | Line 22: | ||
Ent.Chrome. | Ent.Chrome. | ||
== Weather == | |||
<pre> | |||
<addon> | |||
<style> | |||
#weatherBadge{ opacity: 0.9; } | |||
#weatherBadge:hover{ opacity: 1.0; } | |||
#weatherPanel{ background: transparent; /* more css here */ } | |||
</style> | |||
<button id="weatherBadge" img="sun.png"> | |||
<div id="weatherPanel"> | |||
<!-- Pretty pretty mockup here --> | |||
</div> | |||
<script> | |||
Browser.load(function(){ | |||
JetPack.UI.statusBar | |||
.add("#weatherBadge"); | |||
.hover( showWeatherPanel ); | |||
setInterval( updateWeatherBadge, 60*60 ); | |||
}) | |||
function updateWeatherBadge(){ | |||
var weatherApiUrl = "http://..."; | |||
JetPack.ajax( weatherApiUrl, function(data){ | |||
jQuery("#weatherBadge").attr({ | |||
"img", data.weather.img, | |||
"text", data.weather.forecast | |||
}); | |||
jQuery("#weatherPanel")... /* update the panel */ | |||
}); | |||
} | |||
function showWeatherPanel(){ | |||
this.showPanel("#weatherPanel", {y:"+5px"}) | |||
} | |||
</script> | |||
</addon> | |||
</pre> | |||
== Content Filter == | == Content Filter == | ||