launchpad
Mac OSX launchpad style javascript library
Installation
Using bowerbower install launchpad
Usage
Basic usage
<script> launchpad.setData([ { icon:"http://images.apple.com/v/osx/c/images/better-apps/icon_photos_large_2x.png", link: "http://www.apple.com/osx/apps/#numbers", label: "Photos" }, { icon:"http://images.apple.com/v/mac/shared/built-in-apps/e/images/numbers_icon_large_2x.png", link: "http://www.apple.com/osx/apps/#numbers", label: "Numbers" }, { icon:"<i class=\"fa fa-leaf\"></i>", link: "https://fortawesome.github.io/Font-Awesome/", label: "Font-Awesome" }, { icon:"http://images.apple.com/v/osx/c/images/better-apps/icon_photos_large_2x.png", link: "http://www.apple.com/osx/photos/", label: "Photos" } ]); </script>
Make app groups
Apps can also be grouped. Simply make a group element in the data array, specifying group (the label of the group) and apps (the apps array).<script> launchpad.setData([ { group: 'Entertainment', apps: [ { icon:"http://images.apple.com/v/osx/c/images/better-apps/icon_photos_large_2x.png", link: "http://www.apple.com/osx/apps/#numbers", label: "Photos" }, { icon:"http://images.apple.com/v/mac/shared/built-in-apps/e/images/numbers_icon_large_2x.png", link: "http://www.apple.com/osx/apps/#numbers", label: "Numbers" }, ] }, { group: 'Work', apps: [ { icon:"http://images.apple.com/v/mac/shared/built-in-apps/e/images/numbers_icon_large_2x.png", link: "http://www.apple.com/osx/apps/#numbers", label: "Numbers" }, { icon:"http://images.apple.com/v/mac/shared/built-in-apps/e/images/keynote_icon_large_2x.png", link: "http://www.apple.com/mac/keynote/", label: "Keynote" }, ] }, { icon:"http://images.apple.com/v/mac/shared/built-in-apps/e/images/numbers_icon_large_2x.png", link: "http://www.apple.com/osx/apps/#numbers", label: "Numbers" }, { icon:"http://images.apple.com/v/mac/shared/built-in-apps/e/images/keynote_icon_large_2x.png", link: "http://www.apple.com/mac/keynote/", label: "Keynote" } ]); </script>