itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-04 16:25:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

some rough docs for hyperscript

Browse Source
This commit is contained in:
carson 2020-06-12 15:55:15 -07:00
parent 0ac641b63f
commit dd89f21e26
1 changed files with 40 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
www/docs.md
View File

@ -27,6 +27,7 @@ title: </> htmx - high power tools for html
* [animations](#animations) * [animations](#animations)
* [extensions](#extensions) * [extensions](#extensions)
* [events & logging](#events) * [events & logging](#events)
* [hyperscript](#hyperscript)
* [configuring](#config) * [configuring](#config)
</div> </div>
@ -576,6 +577,45 @@ Htmx includes a helper method:
if you want to log everything while developing. if you want to log everything while developing.
## <a name="hyperscript"></a>[hyperscript](#hyperscript)
**NOTE: hyperscript is in very early alpha**
Htmx has a sister project named [hyperscript](https://hyperscript.org). Hyperscript is a small scripting language
designed to be expressive, makding it ideal for embedding directly in HTML, handling custom events, etc. The language
is inspired by [HyperTalk](http://hypercard.org/HyperTalk%20Reference%202.4.pdf), javascript, [gosu](https://gosu-lang.github.io/)
and others.
The language can be explored more fully on its website:
<http://hyperscript.org>
### Catching Events with Hyperscript
A primary use case of hyperscript is catching and responding to events triggered by htmx.
Here is an example with an element that is shown for 5 seconds, then removes the element:
```html
<div _="on load wait 5s then remove me">Here is a temporary message!</div>
```
Here is an example that posts all htmx errors to a server URL:
```html
<body _="on error.htmx ajax POST to /errors with body event.detail.errorDetail">
...
</body>
```
Here is an example that takes an `active` class from other tabs:
```html
<a class="tabs" _="on beforeOnLoad.htmx take .active from .tabs">
...
</a>
```
## <a name="config"></a>[Configuring htmx](#config) ## <a name="config"></a>[Configuring htmx](#config)
Htmx allows you to configure a few defaults: Htmx allows you to configure a few defaults: