Abalone Web Shell launcher demo

This page demonstrates some of the ways you can use the Abalone launcher system. The minimum external dependencies are jQuery and jQuery UI. See the source code of this page and read the README.me for more configuration info.

Targeted Demo

If you pass a selector to a container element when you declare the launcher then the terminal window will be injected into that container. 

$('pre.targeted').AbaloneLauncher({
     label: "Try it out!",
    target: "#abalone-shell",
  location: "se",
    server: "http://localhost:9000",
});

Inline Demo

Declare the target as inline and the terminal will be appended to the container element that you attached the launcher to. 

$('pre.inline').AbaloneLauncher({
   label: "Try it out inline!",
  target: "inline",
  server: "http://localhost:9000",
});

Popup Demo

If you don't declare a target, or if you set it to popup, then you'll get a popup dialog with a terminal in it. 

$('pre.popup').AbaloneLauncher({
   label: "Try out a popup!",
   title: "Isn't this neat?",
  server: "http://localhost:9000",
});

Tab/Window Demo

Declare the target as tab and the terminal will be opened in a new tab or window, depending on browser preferences. 

$('pre.tab').AbaloneLauncher({
     label: "Try it in a new tab/window!",
    target: "tab",
  location: "se",
    server: "http://localhost:9000",
});

Trigger via a link

You can attach the launcher to any element. If it's a block element, like the prior examples, then the launcher button will be injected into it and if it's an inline element, like this then it will trigger the terminal directly. 

$('a#launcher').AbaloneLauncher({
  server: "http://localhost:9000",
});

Workspace