Javascript is required to view this page!

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

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
</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