andros/FFNM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Andros Fenollosa 2020-06-29 19:55:01 +02:00 committed by GitHub
parent 81cfaacbbd
commit 7fcdffce42
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 78 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
README.md
View File

@ -1,2 +1,78 @@
# FFNM # FFNM (Front-End for the next master)
Front-End for the next master
Simple plugin to avoid writing Javascript in trivial tasks.
---
## Spanish/Español
### Instalar
Añade a tu `<head>` la siguiente etiqueta.
```html
<script defer src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.0.0/ffnm.min.js"></script>
```
### Ejemplos de uso
#### Clic
##### Añadir la clase `show` al selector `#menu` cuando sea pulsado el botón.
```html
<button i-click="class:add('show', '#menu')">abrir</button>
```
##### Quitar la clase `show` al selector `#menu` cuando sea pulsado el botón.
```html
<button i-click="class:remove('show', '#menu')">cerrar</button>
```
##### Intercambiar la clase `show` al selector `#menu` cuando sea pulsado el botón.
```html
<button i-click="class:toggle('show', '#menu')">ver</button>
```
#### Scroll
##### Añadir la clase `down` al `nav` cuando el usuario haga scroll hacia abajo.
```html
<nav i-scroll-down="class:add('down', this)"></nav>
```
##### Quitar la clase `down` al `nav` cuando el usuario haga scroll hacia arriba.
```html
<nav i-scroll-up="class:remove('down', this)"></nav>
```
#### Hover
##### Añadir la clase `tadam` al selector `#menu` cuando el usuario haga `hover` sobre el botón.
```html
<button i-hover="class:toggle('tadam', '#menu')">sorpresa!</button>
```
#### Clases sin eventos
##### Añadir la clase `show` al selector `#menu`
```javascript
class:add('show', '#menu')
```
##### Quitar la clase `show` al selector `#menu`
```javascript
class:remove('show', '#menu')
```
##### Intercambiar la clase `show` al selector `#menu`
```javascript
class:toggle('show', '#menu')
```