Directory: http://blog.csdn.net/wide288/article/details/40298693
How to develop basic Widgets
How to Use HTML and CSS to get the widget shape
How to use JavaScript to get your widget
Starting with HTML
The project here is a weather map. The start point of each project is different, but the features of this widget must be listed first.
Feature list:
It should have a map radar that shows a region.
It should have the current temporary map.
It should have a temporary map of yesterday.
It should have a temporary map for tomorrow.
The map size can be adjusted.
Add background
Create CSS for the widget Structure
Body {
Margin: 0;
}
# Mapimage {
Position: absolute;
Top: 55px;
Left: 16px;
}
. Backgroundimage {
Position: absolute;
Top: 0px;
Left: 0px;
}
Reference Method
<Style type = "text/CSS">
@ Import export weathermaps.css ";
</Style>
Add menu
How it works
Write onclick Event Response in Js. Change the image reference content.
Create widget
Create info. plist
<? XML version = "1.0" encoding = "UTF-8"?>
<! Doctype plist public "-// Apple Computer // DTD plist 1.0 // en"
"Http://www.apple.com/dtds/propertylist-1.0.dtd">
<Plist version = "1.0">
<Dict>
<Key> allownetworkaccess </key>
<True/>
<Key> cfbundledisplayname </key>
<String> weathermaps </string>
<Key> cfbundleidentifier </key>
<String> com. Apple. widget. weathermaps </string>
<Key> cfbundlename </key>
<String> weathermaps </string>
<Key> cfbundleappsversionstring </key>
<String>. 04 </string>
<Key> cfbundleversion </key>
<String>. 04 </string>
<Key> closeboxinsetx </key>
<Integer> 12 </Integer>
<Key> closeboxinsety </key>
<Integer> 12 </Integer>
<Key> mainhtml </key>
<String> weathermaps.html </string>
</Dict>
</Plist>
Create a project icon
Icon.png
Change folder name
Double-click to install.
Make sure it works. Install and test it.
Start developing Dashboard widgets, chapter 4, Reading Notes
