Imagine you are building an interactive page that does simple DOM manipulations in response to user interactions.
You want to add a css class to some tag when a user hovers on some other tag. Here are the ways you may do it:
WHY USE No.js?
3. It is very intuitive and easy to understand. With a near english syntax.
WHAT No.js DOESN'T DO
npm install nojsor download here
Then link it to the bottom of your web page like so:
Or you can link directly to the remote distribution like so:
Every html tag that includes No.js tag attributes must also include the attribute no-js
All tag attributes take the form:
on-[eventType]-[action]-[propertyType]="[target] [propertyName(optional)] [propertyValue(optional)]"
2. action can either be add, remove, set, reset, toggle or switch
3. propertyType can be attribute, class, id, text, value or dom
Here is a list of all possible tag instructions:Remove/Set attributes
on-[eventType]-set-attribute="[target] [attributeName] [attributeValue]"
on-[eventType]-set-value="[form input target] [value]"
on-[eventType]-reset-value="[form input target]"
Target the current tag In the situation where the target element is the same as the origination element, you simply add the -self suffix to the attribute and exclude the target from the arguments like so.
This is a new library and has plenty room for improvement. Please report issues here.
Also feel free to send in Pull Requests. :)
Is this project something you like? Feel free to STAR it on GITHUB or share it on twitter. It would mean a ton! :)Tweet