Jtop

Builld beautiful UI similar to real desktop.

Getting Started

Features

✊ Drag & drop for desktop elements
📦 Basic elements included: Icon, Panel, Tooltip, Menu
📝 SVG Text with drop shadow and ellispis
✏️ Inline text editing (Panels)
↕️ Resizable elements

Example

const desktop = jtop.init('jtop', {
  scrollView: {
    initY: 25
  }
});

const tooltop = desktop.tooltip({
  offsetLeft: 30,
  offsetTop: -120
});

const menu = jtop.popupmenu().addMenuElement(
  'open project',
  null,
  sender => {
    console.log(`open project ${sender.title}`);
  },
  'edit-item'
);

const icon = desktop
  .icon({ title: 'Icon', image: 'test/images/db.png', gridX: 1, gridY: 1 })
  .menu(cMenuProject)
  .tooltip(iconTooltip);

For more, visit the example page inside test directory and look into main.js.

Built With

SVG - Custom graphics and effects
require.js - Module Loader
js-signals - Pub/Sub system
underscore.js - Functional programming helpers

Authors

Mike Skowronek - Initial work - coderitual

License

Jtop is available under the MIT license. See the LICENSE file for more info.