https://github.com/coderitual/jtop

SVG virtual desktop library that lets you build beautiful desktop like user interfaces.
https://github.com/coderitual/jtop

animation css desktop effects html javascript library svg ui ux

Last synced: 6 days ago
JSON representation

SVG virtual desktop library that lets you build beautiful desktop like user interfaces.

• Host: GitHub
• URL: https://github.com/coderitual/jtop
• Owner: coderitual
• License: mit
• Created: 2014-10-10T19:57:44.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2018-06-20T11:47:55.000Z (over 6 years ago)
• Last Synced: 2024-10-18T21:50:42.943Z (19 days ago)
• Topics: animation, css, desktop, effects, html, javascript, library, svg, ui, ux
• Language: JavaScript
• Homepage: http://coderitual.github.io/jtop/
• Size: 16.3 MB
• Stars: 114
• Watchers: 6
• Forks: 15
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Jtop

Builld beautiful UI similar to real desktop.

![Demo](docs/hero.png)

## Getting Started

See the **[live version](http://coderitual.github.io/jtop/ "jtop")**.

## 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

```js

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](https://developer.mozilla.org/pl/docs/Web/SVG) - Custom graphics and effects

* [require.js](http://requirejs.org/) - Module Loader

* [js-signals](http://millermedeiros.github.io/js-signals/) - Pub/Sub system

* [underscore.js](https://underscorejs.org/) - Functional programming helpers

## Authors

* **Mike Skowronek** - *Initial work* - [coderitual](https://twitter.com/coderitual)

## License

Jtop is available under the MIT license. See the [LICENSE](LICENSE) file for more info.