Jtop

Builld beautiful UI similar to real desktop.

Getting Started

See the live version.

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.