Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lukasborawski/slctr
Slctr is a simple jQuery plugin created for selecting an area of graphic document.
https://github.com/lukasborawski/slctr
Last synced: 3 months ago
JSON representation
Slctr is a simple jQuery plugin created for selecting an area of graphic document.
- Host: GitHub
- URL: https://github.com/lukasborawski/slctr
- Owner: lukasborawski
- Created: 2013-11-27T09:12:52.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2018-11-05T13:57:49.000Z (about 6 years ago)
- Last Synced: 2024-04-15T04:24:10.618Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 414 KB
- Stars: 13
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Slctr
---
Slctr is a simple jQuery plugin created for selecting an area of graphic document and get coordinates of this selection. The view of selection is displayed as a simple transparent rectangle. Simple style is built on SASS.
### Markup
```html
...
```
All you have to do is add items to the ``#slctrBox``.
### Usage
```javascript
$('body').slctr();
```
To fire up the Slctr call plugin for ``body``.
##### Settings
```javascript
slctrBox: '#slctrBox',
insdElmnts: 'img',
globalWidth: 'undefined',
cursorDistance: 10
```
This is default settings which of course you can change.
* ``slctrBox`` - id of selected container,
* ``insdElmnts`` - type of elements contained in,
* ``globalWidth`` - if it's stay as 'undefined' plugin will automaticly calculate width from inside elements and assign it to Sltr container, if value will be defined container width will be the same as this value
* ``coursorDistance`` - distance of the cursor from the selected area
### Data
The selected coordinates is displaying as a data values of a hidden input ``#selectCoords``. To get this values use ``$selectCoordsDt`` object. Also use ``console.dir($selectCoordsDt);`` to see them at the browser console.
In addition, the selection values can be read by using the callback function.
```javascript
$('body').slctr({
callback: (e) => {
console.log(e);
}
});
```
### Style
Behind the appearance of a selected area correspond to the variables generated by SCSS file. Change it to change Slctr visual presentation.
```scss
$crctBorderColor: #b5d7bc;
```
### Preview
This is how Slctr looks like.
##### Notes
Please note that is **0.4** version. Feel free to use the plugin anywhere and any way you want. Let me know if you find a bug or if it is worth something to change.
**MIT License: [www.opensource.org/licenses/MIT](http://opensource.org/licenses/MIT "License").**