SVG virtual desktop library that lets you build beautiful desktop like user interfaces.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build Update build.bat Jun 20, 2018
css Moved from SVN Oct 10, 2014
dist Moved from SVN Oct 10, 2014
docs Add files via upload Jun 16, 2018
lib Moved from SVN Oct 10, 2014
references Added reference prototype Apr 10, 2016
src Update drag.js Jun 20, 2018
test Moved from SVN Oct 10, 2014
wrap Moved from SVN Oct 10, 2014
LICENSE Update LICENSE Nov 6, 2017
README.md Update and rename readme.md to README.md Jun 20, 2018
index.html Moved from SVN Oct 10, 2014

README.md

Jtop

Builld beautiful UI similar to real desktop.

Demo

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

Authors

License

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