United Federation of Planets
Using the System:
To use the system you only need to include a few things.- Jquery
- 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.
<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>
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.
// Javascript Here
</script>
Now we will call the plugin and add some options.
<script type="text/javascript">
$.lcars();
</script>
$.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 |