Getting Started - OwlTechnology/CommandPalette.js GitHub Wiki

##Download

Original: CommandPalette.js
Minified: CommandPalette.min.js

Optional (Recommended)

Original: CommandPalette.css
Minified: CommandPalette.min.css

or

bower install CommandPalette

##Setup Include the CommandPalette.js file in your website.
And for better styling include CommandPalette.css in your site too!

<link href="CommandPalette.css" rel="stylesheet"> <!-- Optional -->
<script type="text/javascript" src="CommandPalette.min.js"></script>

Instantiate an instance of the CommandPalette class.

var palette = new CommandPalette();   //Creates an instance of the CommandPalette
//Optional
palette.config({
     id: "paletteId",       //Element Id: Default: CommandPalette
     hotkey: "ctrl+alt+p",  //Hotkey to open palette: Default: "ctrl+shift+p"
     hidden: false          // Hidden by default until hotkey pressed
});

##Make it do things! Add some searchable commands and functions to go with them.

palette.on("Hotdog", function(){
     alert("Hotdog")
});
palette.on("MyCommand", MyCommand);

[Show an image of the pallet searching hotdog]

Or add an object and let the methods be mapped out as sub commands

palette.on("GitHub", github);

[Show a screenshot of multiple github options ex" github: push"]

##Now use it! Just enter your hotkey combination on your website and start typing.