README.md

Scripting

All important plugings are included into one. Like html, date etc.

HTML

Class

Add Class

bins.node('.text').addClass('selected-text');

Check class exist

bins.node('.text').hasClass('selected-text');

Remove Class

bins.node('.text').removeClass('selected-text');

Attribute

Set Attribute

bins.node('.text').setAttr({
    'class' : 'select-text',
    'data-name' : '123' 
    ...
});

Check Attribute exist

bins.node('.text-2').hasAttr('data-name')

Get Attribute

bins.node('.text').getAttr('data-name');

Remove Attribute

bins.node('.text').removeAttr('data-name');

Animation

Show / Hide

bins.node('.text').show();
bins.node('.text').hide();

Fadein / Fadeout Option : "very-slow", "slow", "fast". Default : "fast"

bins.node('.text').fadeIn();
bins.node('.text').fadeOut();

Slideup / Slidedown Option : "very-slow", "slow", "fast". Default : "fast"

bins.node('.text-2').slideUp(); 
bins.node('.text-2').slideDown();

Toggle Option show, fade(in/out), slide(up/down). Default is show

bins.node('.text').toggle();

html/text

Get text

bins.node('.text').text() 

Set text

bins.node('.text').text('inner text') 

Get HTML : outer, inner . Set true for outer html

bins.node('.text').getHtml() 

Set Html : outer, inner . Set true for outer html

bins.node('.text').setHtml('<strong>New Html String</strong>', true) 

Append Html

bins.node('.text').append('<div class="new-created-element-append">It is a new Element, <b>append</b> </div>');
or
var newElement = document.createElement('strong');
newElement.innerText = 'Append new Element';
bins.node('.text').append(newElement);

Prepend Html

bins.node('.text').prepend('<div class="new-created-element-prepend">It is a new Element, <b>prepend</b> </div>');
or
var newElement = document.createElement('strong');
newElement.innerText = 'Append new Element';
bins.node('.text').prepend(newElement);

Set Css

bins.node('.text').css({
    'background' : '#CCC',
    'color' : 'red',
    'font-size' : '20px'
    ...
});

Empty

bins.node(".text-").empty()

Remove Element

bins.node(".text").remove()

Clone Element

let cloneNode = bins.node('.text').clone();

Node Selector

Parent Element

bins.node(".text").parent()

Next Element

bins.node(".text").next()

Previous Element

bins.node(".text").previous()

Children Elements

bins.node(".text").children()

Last of type

bins.node(".text").last()

First of type

bins.node(".text").first()

Nth of type

bins.node("#frm").eq(index)

Form Validation

<form action="" id="frm">
    <input type="text" class="required" name="name" data-name="Name" placeholder="Name"/>
    <input type="text" class="required number" name="age" data-name="Age" placeholder="Age"/>
    <input type="text" class="required email" name="email" data-name="Email" placeholder="Email"/>
    <input type="password" class="required" name="password" data-name="Password" placeholder="Password"/>
    <input type="password" class="required" name="confirm_password" data-name="Confirm Password" placeholder="Confirm Password" data-compare="password"/>
    <input type="submit" name="submit" value="Submit" id="submitBtn" />
</form>

bins.node('#frm').validation()

Event Bind

bins.node('.clickBtn').bind('click',(e)=> {
    console.log(e.target);
}) 
bins.node('.textBox').bind('change',(e)=> {
    console.log(e.target);
}) 
bins.node('.textBox').bind('focus',(e)=> {
    console.log(e.target);
}) 
...
...
...

DATE

Now

bins.date().date

Get Date

bins.date('2018-09-25').getDate()

Get Month

bins.date('2018-09-25').getMonth()

Get Year

bins.date('2018-09-25').getYear()

Get week day

bins.date('2018-09-25').getWeekDay()

Get Time

bins.date('2018-09-25').getTime()

Get Timezone

bins.date('2018-09-25').getTimeZone()

Get Timezone

bins.date('2018-09-25').getTimeZone()

Add or substract day/month/year Option param 1 = "day", "month", "year" param2 = 1 or 2 or 3 or -4 or -20 etc

bins.date(date).add('year',3)

Formating the date

bins.date().format('<format string>')

Format	Example
DDD	1st, 2nd, 3rd, 10th, 11th
DD	01, 02, 03, 10, 11, 20
MMMM	January, March, December
MM	Jan, Mar, Dec
M	01, 02, 09, 12
YYYY	2018, 2017, 1990
YY	18, 17, 90
WDD	Sunday, Monday
WD	Sun, Mon
hh	01, 02, 13, 14, 18, 20
h	01, 02, 03, 05, 08, 09
mm	08, 09, 20, 25, 45
ss	07, 09, 15, 18, 20
ap	AM, PM
Custom Format
full (WDD, DDD MMMM YYYY h:mm:ss ap)	Sunday, 1st January, 2018 05:30:20 AM
full-date (YYYY-M-DD)	2018-01-01
full-time (hh:mm:ss)	05:30:20
time (h:mm ap)	05:30 AM