mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-28 21:41:40 +00:00
74 lines
2.5 KiB
HTML
74 lines
2.5 KiB
HTML
<html lang="en">
|
|
<head>
|
|
<title>HTMx - Teaching HTML new tricks</title>
|
|
<style type="text/css">body{margin:40px auto;max-width:740px;line-height:1.6;font-size:18px;color:#444;padding:0 10px;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif}h1,h2,h3{line-height:1.2}h1{text-align: center; font-size: 4em}</style>
|
|
</head>
|
|
<body>
|
|
<h1></> HTM<sub>x</sub></h1>
|
|
<section>
|
|
<p>HTMx is a set of extensions to HTML that allows you to web applications that would normally require javascript
|
|
with only HTML attributes. It fills a gap in functionality that has been inexplicably left out of
|
|
standard HTML, and allows you to use the full range of HTTP and HTML expressiveness originally
|
|
envisioned for the web.</p>
|
|
<p>Here is a simple example of HTMx in action:</p>
|
|
<pre><button hx-get="/example" hx-target="#myDiv">Click Me</button></pre>
|
|
<p>This example issues an AJAX request to <code>/example</code> when a user clicks on it, and swaps the response
|
|
HTML into the element with the id <code>myDiv</code></p>
|
|
<p>HTMx was inspired by <a href="http://intercoolerjs.org">intercooler.js</a>, and aims to be a minimalist &
|
|
dependency free implementation of the same concept.</p>
|
|
</section>
|
|
<section>
|
|
<h2></> Attributes</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Attribute</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>hx-get</td>
|
|
<td>Issues an HTTP GET to the given URL</td>
|
|
</tr>
|
|
<tr>
|
|
<td>hx-target</td>
|
|
<td>Specifies the target element that should be swapped</td>
|
|
</tr>
|
|
<tr>
|
|
<td>hx-swap-style</td>
|
|
<td>Specifies how target element should be swapped: innerHTML, outerHTML, append</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
<section>
|
|
<h2></> Events</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Event</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
<section>
|
|
<h2></> HTTP Headers</h2>
|
|
<h3>Request Headers</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Header</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
</body>
|
|
</html> |