Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
181 lines (150 sloc) 5.46 KB
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="">
Steal CSS and other styling for example page from spin.js
Please refer to for license.
<link rel="stylesheet" type="text/css" href="assets/main.css"/>
<link rel="stylesheet" type="text/css" href=",700">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<!-- Load CSS & JS for icongrid -->
<link rel="stylesheet" type="text/css" media="all" href="icongrid/icongrid.css"/>
<script type="text/javascript" src="icongrid/base32.js"></script>
<script type="text/javascript" src="icongrid/icongrid.js"></script>
<div id="logo">
<a id="ribbon" href=""></a>
<div id="content">
<div id="download"><a href="icongrid.js">Download</a></div>
<div class="container">
<div class="dashboardclipper" id="clipper" style="width: 400px; height: 300px;"></div>
<P><INPUT TYPE="BUTTON" NAME="Add Item" Value="Add Item" onClick='addFooItem({});'></P>
<h2>User Features</h2>
<li>Direct-manipulation interface</li>
<li>Drag or flick the page, or click the page indicator to switch pages</li>
<li>Click icons to invoke them</li>
<li>Press and hold icons to move them, even between pages</li>
<li>Press, hold, and let go without moving to delete items</li>
<li>The icon positions are saved automatically</li>
<h2>Developer Features</h2>
<li>Asynchronous API</li>
<li>Works on desktop and touch devices</li>
<li>Firefox, Safari, Chrome</li>
<li>Firefox Mobile, Mobile Safari</li>
<li>Not currently working perfectly with IE 8</li>
<li>Multi-page, smooth scrolling</li>
<li>Any size, any number of rows and columns</li>
<li>Multiple grids per webpage</li>
<li>Represent arbitrary heterogeneous objects</li>
<li>Drag and drop to re-arrange (remembers position on reload!)</li>
<p>View the source of this page to see how it works</p>
<p id="contact">
<a href="">MPL 1.1/GPL 2.0/LGPL 2.1</a>
Author: <b><a href="">Dan Walkowski</a></b>
<div id="footer">
<a class="mozilla" href="">Mozilla Labs</a>
<a class="github" href="">Hosted on GitHub</a>
<script type="text/javascript">
var myDash;
var myLayout;
var fruit_datasource;
var fooCounter = 1;
function addFooItem(theItem) {
var guid = "Foo "+ fooCounter++;
theItem.itemTitle = guid;
myDash.addItemToGrid(guid, theItem);
$(document).ready(function() {
fruit_datasource = {
fruitlist: {
strawberry: {
itemTitle: "Strawberry",
itemImgURL: "images/strawberry.png"
watermelon: {
itemTitle: "Watermelon",
itemImgURL: "images/watermelon.png"
apple: {
itemTitle: "Apple",
itemImgURL: "images/apple.png"
banana: {
itemTitle: "Banana",
itemImgURL: "images/banana.png"
grape: {
itemTitle: "Grape",
itemImgURL: "images/grape.png"
orange: {
itemTitle: "Orange",
itemImgURL: "images/orange.png"
papaya: {
itemTitle: "Papaya",
itemImgURL: "images/papaya.png"
pineapple: {
itemTitle: "Pineapple",
itemImgURL: "images/pineapple.png"
//gets the initial list of items. ideally only called at start
getItemList: function(callback) {
var list = this.fruitlist;
// Add special one
list["about:icongrid"] = {};
openItem: function(itemID) {
if (itemID == "about:icongrid")"");
else"" + itemID);
userRemovedItem: function(itemID, callback) {
delete this.fruitlist[itemID];
if (callback){
// if all your items have 'itemImgURL' and 'itemTitle' properties, then you don't need to implement these.
// These get called when an item doesn't have the right properties.
// Note that you can pass in data URIs for icons
getItemImgURL: function(itemID) {
if (itemID == "about:icongrid") return ""
getItemTitle: function(itemID) {
if (itemID == "about:icongrid") return "About IconGrid";
var hostElement = $("#clipper");
myLayout = new GridLayout(hostElement.width(), hostElement.height(), 3, 2);
myDash = new IconGrid("mydash", hostElement, fruit_datasource, myLayout);