- Buttons
- CSS
- Debugger
- Mobile
- On jQuery
- Old System

# LCARS jQuery Plugin Website System v2

Developed by Josh Messer

Set-Up | Mark-Up
Download | More Help

The LCARS Website System Plugin for Jquery is developed by Josh Messer AKA (Garrett00 on Trek BBS).
This Plugin is Licensed under GNU General Public License v3 this means you are free do to with this as you please.

I have been a Star Trek fan for a long time. After looking around the internet I never found anything that would let me make a LCARS sytle website quick and easy. So I just decided to make my own!

### United Federation of Planets

## Using the System:

To use the system you only need to include a few things.

1. Jquery
2. Jquery LCARS Plugin

How to add System to your website.
// Include Jquery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
// Include LCARS JS
<script type="text/javascript" src="jquery.lcars.js"></script>
After that all you need to do is decalare your options for the page.

## Plugin Options:

The Plugin options are really simple. First you need to open a script tag.

<script type="text/javascript">
// Javascript Here $(function(){
// Javascript Here
});
</script>
After you've done that go ahead and add the Jquery on DOM shortcut code.

Now we will call the plugin and add some options.

<script type="text/javascript">
$.lcars();
</script>

That is the bare bones most basic way to create a LCARS website page with this plugin. Here are all of your options.

    $.lcars({
    	screen: 'split', // Screen Types = Full, Panel, Split
    	title: 'Main Title',
    	subTitle: 'Sub Title',
    	colors: { // defind your colors
    		color1: 'orange',
    		color2: 'purple'
    	},
    	content: {
    		padding: '0', // padding: top, right, bottom, left
    		ele: '#content'// The element for your main content area
    	},
    // define the element for your side buttons
    	sidePanel: '#side-panel',
    // define the upper content area (only in Split screens)
    	upperContent: '#upper-content',
    // The directory where the CSS file is kept
    (relative to the file LCARS.js is being called from)
    	css: 'src/',
    	debug: true // defaults to false
    });

I know this looks complex and it can be for newbies. But all you really need to do is copy what's above into to <head> of your page.

Options Table
Name | Attrs | Default | Description
screen | full, panel, split | full | The screen type you want the page to be.
title | string | [nothing] | The name of your page (only for panel)
subTitle | string | [nothing] | The sub name of your page (only for panel)
colors | color1, color2 | orange, purple | The colors for your page.
content | padding, ele | 0, '#content' | The padding for your content area PLUS a selection for the content element.
sidePanel | element | '#side-panel' | Selector for your side panel (AKA where the links are)
upperContent | element | '#upper-content' | Selector for your upper content (only for split page)
css | foler location | [nothing] | The location of the lcars.jquery.css file relative to the web page
debug | boolan | false | Turn on or off debuging