JSLess

What is JSLess?

JSLess is a framework that allows you, in a clean and extensible way, to use complex JavaScript/jQuery behaviors without ever having to write or understand JavaScript code.

The primary objective of JSLess is to make developing the user interface easy in a team environment with a programmer and designer. For example, a designer with limited/no JavaScript knowledge can easily implement these behaviors within HTML pages and the JavaScript developer can create custom behaviors for that designer to use.

Let the designers focus on designing and let the programmers focus on programming!

Getting Started

• Download the latest release.
• Clone the repo: git clone https://github.com/realstrategoes/JSLess.git.
• Install with Bower: bower install jsless.
• Download the NuGet Package

Add this at the bottom of your page, before the ending body tag.

<script type="text/javascript">//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js</script>
<script type="text/javascript">js/jsless.min.js</script>
<script type="text/javascript">
  $(document).ready(function () {
    $("body").jsless({});
  });
</script>

Also, give your containing DIV a widget ID, preferably a unique ID such as Guid.NewGuid(). For example, <div data-jsless-widget="myWidget">. This is defines the scope when submitting forms as well as other actions by JSLess.

Features

####Behaviors/Methods Behaviors are complex (or simple) actions that change the HTML DOM in some manner.

Execute name = "execute" is a behavior that executes a function with the specified parameters. Essentially, you can put any jQuery method or function (i.e. .hide(), .show(), .animate()) inside method = "". Third-party plugins also work. For example, Bootstrap has a Tooltip plugin that can be called with JSLess by setting method = "tooltip"

####Defaults for Execute

• name = "execute"
• method = null
• event = "click"
• eventSource = selector
• target = selector
• params = []
• delay = -1
• object = jQuery

####JSLess Custom Functions A third file is included when downloading the JSLess library, jsless.example.js. This contains a few "stock" custom behaviors and allows you to add more to it. When placing this file in your directory, change the name of the file to a custom name (jsless.yourSite.js) so you can customize it.

JSLess custom can be used for many reasons...

• To create custom behaviors that cannot be achieved with Execute
• For use with behaviors that are used many times in your application
• Or use it however you want!

A few basic example are included by default in the jsless.example file.

• .show()
• .hide()
• plus1 (a function which adds 1 to a target)
• htmlnext (useful for single page apps - further explaination to come)

(We hope to have a place for people to post their custom behaviors soon.)

Examples

NOTE: The example below are using ASP.NET Razor syntax, therefore JSLess statements in your markup can be rendered correctly. Otherwise, a JSLess statement can be rendered using a JSON format:

<a data-jsless="[{ name:'htmlform', url:'/Profile/Edit', method = 'POST', onSuccess = '#myTarget', onFail = '#failTarget' }]"></a>

###Execute

Execute | .toggle()

<button type="button" 
  data-jsless="@(new object[] { new { name = "execute", method = "toggle", target = ".create-discussion" } }.ToJsonObject())">
toggle btn </button>

Optionally, if you want to animate your method/function and you're using jQuery UI, you can add @params = new object[] { "linear" } after target, which specifiies the easing animation to apply. In this case linear is the effect.

Execute | .animate()

<span 
  data-jsless="@(new object[] { new { name = "execute", method = "animate", @event = "load", target = new { target = "html,body", scope = "document" }, @params = new object[] { new { scrollTop = "0" } } } }.ToJsonObject())">
</span>

Execute | Bootstrap Tooltip

<div 
  data-jsless="@(new object[] { new { name = "execute", @event = "load", method = "tooltip", target = ".myTooltipClass" } }.ToJsonObject())">
</div>

(Notice: the @event = "load", which will execute the method when the page loads. Similar to document.ready() in jQuery)

###Custom Behaviors

Custom Functions (jsless.example.js) | show, hide, etc. .show()

<button type="button"
   data-jsless="@(new object[] { new { name = "show", target = ".hiddenDiv" } }.ToJsonObject())">
   show the div!
</button>

.show() & .hide()

<button type="button"
   data-jsless="@(new object[] { new { name = "show", target = ".hiddenDiv" },
   data-jsless="@(new object[] { new { name = "hide", target = ".visibleDiv" } }.ToJsonObject())">
   show this hide that!
</button>