Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 19 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 (about 1 month 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.