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

better example

Browse Source
This commit is contained in:
Carson Gross 2023-03-31 13:53:16 -06:00
parent 2a2fc75c0a
commit c11b84120d
2 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
test/scratch/scratch.html
View File

@ -81,11 +81,6 @@ Autorespond: <input id="autorespond" type="checkbox" onclick="toggleAutoRespond(
hx-swap="innerHTML transition:true">Issue Request</button> hx-swap="innerHTML transition:true">Issue Request</button>
<h1 id="h1">--</h1> <h1 id="h1">--</h1>
<script>
this.server.respondWith("GET", "/new-content", function(xhr){
xhr.respond(200, {}, "<h1>New Content</h1>")
});
</script>
<style> <style>
@keyframes fade-in { @keyframes fade-in {
@ -126,6 +121,18 @@ Autorespond: <input id="autorespond" type="checkbox" onclick="toggleAutoRespond(
</button> </button>
</div> </div>
<script>
var originalContent = htmx.find(".slide-it").innerHTML;
this.server.respondWith("GET", "/new-content", function(xhr){
xhr.respond(200, {}, "<h1>Initial Content</h1> <button hx-get='/original-content' hx-swap='innerHTML transition:true' hx-target='closest div'>Restore It! </button>")
});
this.server.respondWith("GET", "/original-content", function(xhr){
xhr.respond(200, {}, originalContent)
});
</script>
</body> </body>
</html> </html>

19
www/examples/animations.md
View File

@ -295,12 +295,6 @@ implement this feature in the near future.
#### Demo #### Demo
<script>
this.server.respondWith("GET", "/new-content", function(xhr){
xhr.respond(200, {}, "<h1>New Content</h1>")
});
</script>
<style> <style>
@keyframes fade-in { @keyframes fade-in {
from { opacity: 0; } from { opacity: 0; }
@ -332,7 +326,6 @@ implement this feature in the near future.
} }
</style> </style>
<div class="slide-it"> <div class="slide-it">
<h1>Initial Content</h1> <h1>Initial Content</h1>
<button hx-get="/new-content" hx-swap="innerHTML transition:true" hx-target="closest div"> <button hx-get="/new-content" hx-swap="innerHTML transition:true" hx-target="closest div">
@ -340,6 +333,18 @@ implement this feature in the near future.
</button> </button>
</div> </div>
<script>
var originalContent = htmx.find(".slide-it").innerHTML;
this.server.respondWith("GET", "/new-content", function(xhr){
xhr.respond(200, {}, "<h1>Initial Content</h1> <button hx-get='/original-content' hx-swap='innerHTML transition:true' hx-target='closest div'>Restore It! </button>")
});
this.server.respondWith("GET", "/original-content", function(xhr){
xhr.respond(200, {}, originalContent)
});
</script>
#### Conclusion #### Conclusion
You can use the techniques above to create quite a few interesting and pleasing effects with plain old HTML while using htmx. You can use the techniques above to create quite a few interesting and pleasing effects with plain old HTML while using htmx.