Create Interacitve Declarative UIs In jQuery - jqDeclare

Create Interacitve Declarative UIs In jQuery - jqDeclare

The jqDeclare library helps developers to create React-style interactive, declarative web interfaces in jQuery.

The library allows you to dynamically update the UI according to the state. Without the need of manipulating the DOM directly.

1. To get started, include the jqDeclare plugin after jQuery.

<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/jquery.declare.js"></script>

2. Create an alert popup along with a button. In this example, when you click the button it displays an alert popup:

$("#example").declare(function (name) {
  return ["button", {"click": function(ev) { alert("Hello " + name); }}, "Say hello"];
}).render("jQueryScript");

3. Full JavaScript syntax:

// jQuery object
$("#example").declare($("<p>Hello World!</p>").click(callback));
// Or jqDeclare definition
$("#example").declare(["p", {"click": callback}, "Hello World!"]);
// function
$("#example").declare(function(data) {
  // ..
}).render(data);

This awesome jQuery plugin is developed by chr15m. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 17.06.2019
  • Source