API Cheat Sheet [element5]

Manipulating with DOM elements.

Parameters

selector:string a selector string. If selected DOM elements isn't exist, it creates DOM elements.
limit:number number of DOM elements would be created. If selected DOM elements isn't exist, it creates DOM elements with this param. It is 10 value default.

Return

Retrieves exist DOM elements or if it doesn't exist, creates and returns DOM elements.

Note When use the element5 for collecting the DOM elements, you can use selector with three following cases

Using with class selector (Ex: ".className"), It's return the list of DOM elements. If It has one selected element only, it's return a DOM element.
Using with tag selector (Ex: "li"), It's return the list of DOM elements too. If It has one selected element only, it's return a DOM element.
Using with id selector (Ex: "#wrapper"), It's return the DOM element.

With the returned list, you can use these elements like as an array with native Javascript. If you retrieved the returned DOM element, use can use this element like as an DOM element with native Javascript.

Example

import {element5 as $} from '@bapquad/element5'

let dom = $("#wrapper");

// Print the dom
console.log(dom);

In above example, we use #wrapper string like as a selector of DOM element.

Functions

`Create`

Create new a DOM element.

Parameter

selector:string - A description string in the element query format. Required

Return

Returns the DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let header = $.create("div#header");

// Print the created DOM
console.log(header);

`GetBody`

Receives the body element.

Parameter

Has no parameter.

Return

Returns the DOM element of body tag.

Example

import {element5 as $} from '@bapquad/element5'

let body = $.GetBody();

// Print the body element
console.log(body);

`GetWindow`

Retrieves the window element.

Parameter

Has no parameter.

Return

Returns the window object.

Example

import {element5 as $} from '@bapquad/element5'

let wind = $.GetWindow();

// Print the window object
console.log(wind);

`MountDevice`

Mounts the media device specification which your apps implements with.

Parameter

description:object - The description object describies the media device. Required

Return

Returns the device description object.

Example

import {element5 as $, bom5} from '@bapquad/element5'

let mobile400 = $.MountDevice({
  deviceOption: '',
  deviceType: 'screen',
  features: [ 'max-width:399px' ],
  producted: false
});
mobile400.Effects("#ttl").css('background', 'red');

`Extends`

Allow extends to add more functions for DOM element. Note, it helps to extends, but it isn't help to override.

Parameter

extensions:object - The list of extensions contains the mothods used to manipulate on the DOM elements. Required

Return

Returns the void value.

Example

import {element5 as $} from '@bapquad/element5'

$.extends({
  sayHello: function()
  {
    console.log( 'Hello! I'm an element.' )
  }
});
let dom = $.create("header#header");

dom.sayHello();

Climb Modifiers

Climbing the tree of DOM elements

`Find`

Finds the elements which be inside.

Parameter

selector:string - A selector string for searching. Required

Return

Returns the DOM element(s).

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
let result = el.Find(".menu-item");

// Print the find result
console.log(result);

`FirstChild`

Finds the first children element of DOM element.

Parameter

Has no parameter.

Return

Returns the DOM element(s).

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
let dom = el.FirstChild();

// Print the first child
console.log(dom);

`LastChild`

Finds the last children element of DOM element.

Parameter

Has no parameter.

Return

Returns the DOM element(s).

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
let dom = el.LastChild();

// Print the last child
console.log(dom);

`Next`

Retrieves the next sibling DOM element.

Parameter

Has no parameter.

Return

Returns the DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
let dom = el.Next();

// Print the next element
console.log(dom);

`Prev`

Retrieves the previous sibling dom element.

Parameter

Has no parameter.

Return

Returns the DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
let dom = el.Prev();

// Print the previous element
console.log(dom);

`Parent`

Retrieves the result parent DOM element.

Parameter

Has no parameter.

Return

Returns the DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
let dom = el.Parent();

// Print the parent element
console.log(dom);

`Parents`

Finds the parent DOM element described by selector.

Parameter

selector:string - A selector string for searching. Required

Return

Returns the DOM element(s).

Example

import {element5 as $} from '@bapquad/element5'

let el = $(".item");
let dom = el[0].Parents("#list");

// Print the dom element
console.log(dom);

Style Modifiers

Making stylesheet with DOM element.

`css`

Set css to DOM elements.

Parameter

styles:object - The object holds style. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper .layout");
el.css({
  color: "#000",
  background: "#fff"
});

`css`

Set css to DOM elements with key and value of style property.

Parameters

property:string - The name of style property. Required
value:string - The value of style property. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper .layout");
el.css("color", "#000");
el.css("background", "#fff");

`Css`

Set the css to company of DOM elements.

Parameter

styles:object - The object holds style. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper .layout");
el.Css({
  color: "#000",
  background: "#fff"
});

`Css`

Set the css to company of DOM elements with key and value of style property.

Parameters

property:string - The name of style property. Required
value:string - The value of style property. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper .layout");
el.Css("color", "#000");
el.Css("background", "#fff");

`AddContext`

Add the context which these DOM elements maybe inside the self style selector.

Parameter

context:string - The string presents the context query. Required

Return

Returns the self DOM element(s).

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
el.AddContext(".container");

`Show`

Shows the DOM element.

Parameter

Has no parameter.

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
el.Show();

`IsShow`

Checking the DOM element is whether show or not.

Parameter

Has no parameter.

Return

Returns the boolean value.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
console.log(el.IsShow());

`Hide`

Hides the DOM elements.

Parameter

Has no parameter.

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
el.Hide();

`IsHide`

Checking the DOM element is whether hide or not.

Parameter

Has no parameter.

Return

Returns the boolean value.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
console.log(el.IsHide());

`Toggle`

Toggles the DOM element between show and hide.

Parameter

Has no parameter.

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
el.Toggle();

Media Modifiers

Making style with media screen limit.

`onMedia`

Mounts the style to device.

Parameter

media:object - The device description object which you wants to mount the css into. Required

Return

Returns the style rule.

Example

import {element5 as $} from '@bapquad/element5'
let mobile400 = $.MountDevice({
  deviceOption: '',
  deviceType: 'screen',
  features: [ 'max-width:399px' ],
  producted: false
});
let el = $("#wrapper");
el.onMedia(mobile400).css({background: "#333"});

`onDevice`

Mounts the style to device.

Parameter

device:object - The device description object which you wants to mount the css into. Required

Return

Returns the style rule.

Example

import {element5 as $} from '@bapquad/element5'
let mobile400 = $.MountDevice({
  deviceOption: '',
  deviceType: 'screen',
  features: [ 'max-width:399px' ],
  producted: false
});
let el = $("#wrapper");
el.onDevice(mobile400).css({background: "#333"});

DOM Modifiers

Manipulating the DOM elements.

`AddClass`

Add to the DOM element with a class name.

Parameter

className:string - The class name. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
el.AddClass("layout");

`PushClass`

Push a class name to the list of classes of DOM element.

Parameter

className:string - The class name. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
el.PushClass("layout");

`ShiftClass`

Shifts a class name from the list of classes of DOM element.

Parameter

className:string - The class name. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
el.ShiftClass("layout");

`RemoveClass`

Removes a class name from DOM element.

Parameter

className:string - The class name. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
el.RemoveClass("darken");

`HasClass`

Checks a DOM element is whether has or not a class name.

Parameter

className:string - The class name. Required

Return

Returns the boolean value.

Example

import {element5 as $} from '@bapquad/carem'

let el = $("#wrapper");
console.log(el.HasClass("layout"));

`SetId`

Set the value to the id attribute of DOM element.

Parameter

id:string - The id string. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#container");
el.SetId("main");

`HasId`

Checks DOM element is whether has or not the id.

Parameter

id:string - The id string. Required

Return

Returns the boolean value.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
console.log(el.HasId("wrapper"));

`Remove`

Removes the DOM element from the document.

Parameter

Has no parameter.

Return

Returns the deleted DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let items = $(".items");
items.forEach((el, id) => {
  el.Remove();
});

`Html`

Inserts the HTML string to DOM element.

Parameter

html:string - The needle html string. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
el.Html("<p>Hello world</p>");

`Empty`

Clear the children elements be inside the DOM element.

Parameter

Has no parameter.

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
el.Empty();

`SetText`

Inserts the text string to DOM element.

Parameter

text:string - The inserted text string. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
el.SetText("Hello world");

`Text`

Inserts the text string to DOM element.

Parameter

text:string - The inserted text string. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
el.Text("Hello world");

`Prepend`

Prepends the element to before first children DOM element.

Parameter

element:DOM - The desired DOM element to prepend. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
let header = $.create("header#header");

// Prepend the header
el.Prepend(header);

`Equip`

Appends the DOM element to after the last children of the self DOM element.

Parameter

element:DOM - The desired DOM element equips. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
let header = $.create("header#header");

el.Equip(header);

`EquipBy`

Appends the self DOM element to another DOM element.

Parameter

element:DOM - The desired DOM element appends this DOM element. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
let header = $.create("header#header");

header.EquipBy(el);

`EquipEvent`

Fires when a DOM element added or removed another DOM element.

Parameter

addCallback:function - The callback function called when DOM element inserted. Required
removeCallback:function - The callback function called when the DOM element removed. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let top = $.create("h2[id=top]");
let head = $("#header");
head.EquipEvent(function(e)
{
  console.log("A DOM inserted");
},
function( e )
{
  console.log("A DOM removed");
});
top.EquipedBy(head);

`EquipBefore`

Equips the self DOM element to before the another DOM element.

Parameter

element:DOM - The DOM element. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let top = $.create("h2[id=top]");
let head = $("#header");

top.EquipBefore(head);

`EquipAfter`

Equips the self DOM element to after the another DOM element.

Parameter

element:DOM - The DOM element. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let top = $.create("h2[id=top]");
let head = $("#header");

top.EquipAfter(head);

`Clone`

Duplicates the DOM element.

Parameter

deep:boolean - The boolean value for deep. Default it be true value.

Return

Returns the cloned DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let top = $.create("h2[id=top]");
let topDup = top.Clone();

console.log(topDup);

`Add`

Appends the DOM element to after the last children of the self DOM element.

Parameter

element:DOM - The desired DOM element appends. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
let header = $.create("header#header");

el.Add(header);

`AddedBy`

Appends the self DOM element to another DOM element.

Parameter

element:DOM - The desired DOM element which this DOM appends to. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
let header = $.create("header#header");

header.AddedBy(el);

DOMLoader Modifiers

Loading any external file into your application.

`includeHTML`

Includes a html resource to page.

Parameter

Has no parameter.

Return

Returns the self DOM element.

Example

We have a index.html file with the following code.

<!-- file: index.html -->
...
<nav id="nav" w3-include-html="nav.html"></nav>
...

With the script.js file, we use this modifier to include the nav.html into the page like as following.

// file: script.js
import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.includeHTML()

Animation Modifiers

Manipulating the animation with DOM element.

`EffectedBy`

Apply the animation to DOM element.

Parameter

timeline:object - The anime timeline object. Required
duration:number - The duration of the animation. Optional
delay:number - The delay time of the animation. Optional
easy:string - The string specify how the animation play. Optional

Return

Returns the self DOM element.

Example

import {element5 as $, timeline5} from '@bapquad/element5'

let anime = timeline5.create({
  name: 'leftToRight', 
  keyframes:[
    {time: '0',   style: { transform: 'translateX(-100%)' }},
    {time: '100', style: { transform: 'translateX(0%)' }},
  ]
});
let top = $("h2");

top.EffectedBy(anime, 2000, 0, 'linear');

`Animation`

Apply the animation to DOM element.

Parameter

timeline:object - The anime timeline object. Required
duration:number - The duration of the animation. Optional
delay:number - The delay time of the animation. Optional
easy:string - The string specify how the animation play. Optional

Return

Returns the self DOM element.

Example

import {element5 as $, timeline5} from '@bapquad/element5'

let anime = timeline5.create({
  name: 'leftToRight', 
  keyframes:[
    {time: '0',   style: { transform: 'translateX(-100%)' }},
    {time: '100', style: { transform: 'translateX(0%)' }},
  ]
});
let top = $("h2");

top.Animation(anime, 2000, 0, 'linear');

`Run`

Apply the animation to DOM element.

Parameter

timeline:object - The anime timeline object. Required
duration:number - The duration of the animation. Optional
delay:number - The delay time of the animation. Optional
easy:string - The string specify how the animation play. Optional

Return

Returns the self DOM element.

Example

import {element5 as $, timeline5} from '@bapquad/element5'

let anime = timeline5.create({
  name: 'leftToRight', 
  keyframes:[
    {time: '0',   style: { transform: 'translateX(-100%)' }},
    {time: '100', style: { transform: 'translateX(0%)' }},
  ]
});
let top = $("h2");

top.Run(anime, 2000, 0, 'linear');

`Play`

Apply the animation to DOM element.

Parameter

timeline:object - The anime timeline object. Required
duration:number - The duration of the animation. Optional
delay:number - The delay time of the animation. Optional
easy:string - The string specify how the animation play. Optional

Return

Returns the self DOM element.

Example

import {element5 as $, timeline5} from '@bapquad/element5'

let anime = timeline5.create({
  name: 'leftToRight', 
  keyframes:[
    {time: '0',   style: { transform: 'translateX(-100%)' }},
    {time: '100', style: { transform: 'translateX(0%)' }},
  ]
});
let top = $("h2");

top.Play(anime, 2000, 0, 'linear');

`Motion`

Use to assign the animation with motions like as sprite or scroller.

Parameter

anime:object - The desired anime object. Required

Return

Returns the DOM element.

Example

import {element5 as $, motion5} from '@bapquad/element5'

let number = motion5.Sprite(100, 100, "number.png");
let player = $.create("p#player").motion(number);

$.GetBody().add(player);

Data Modifiers

Manipulating the DOM's data.

`JSonString`

Converts the object to JSON string.

Parameter

json:object - The object which would be converted to JSON string. Required

Return

Returns the JSON string.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("h2");
let dataStr = nav.JSonString({ 
  width: '320', 
  height: '240' 
});

`ParseJSON`

Converts the JSON string to an object.

Parameter

value:string - The desired json string wanted to convert. Required

Return

Returns the JSON object.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("h2");
let dataStr = nav.JSonString({
  width: '320', 
  height: '240' 
});
let data = nav.ParseJSON(dataStr);

`AddData`

Adds data to DOM element.

Parameter

name:string - The key name of data. Required
value:string - The value of data. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.AddData("username", "Philips Trevor");

`SetData`

Sets data to DOM element.

Parameter

name:string - The key name of data. Required
value:string - The value of data. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.SetData("username", "Philips Trevor");

`GetData`

Retrieves the data from a DOM element.

Parameter

name:string - The key name of data. Required

Return

Returns the data value.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.SetData("username", "Philips Trevor");

// Print the data value
console.log(nav.GetData("username"));

`DeleteData`

Deletes data from a DOM element.

Parameter

name:string - The deleted data name. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.SetData("username", "Philips Trevor");
nav.DeleteData("username")

// Print the data value
console.log(nav.GetData("username"));

`SetBackData`

Set data to DOM element by using DOM attribute has the data- prefix.

Parameter

name:string - The key name of data. Required
value:string - The value of data. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.SetBackData("role", "Navigation");

`GetBackData`

Retrieves the data from the DOM element with the DOM attribute has the data- prefix.

Parameter

name:string - The key name of data. Required

Return

Returns the data value.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.SetBackData("role", "Navigation");

// Print the data value
console.log(nav.GetBackData("role"));

`SetProperty`

Sets a property member to DOM element.

Parameter

name:string - The name of needle property. Required
value:string - The value of needle property. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.SetProperty("role", "Navigation");

`AddProperty`

Adds a property member to DOM element.

Parameter

name:string - The name of needle property. Required
value:string - The value of needle property. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.AddProperty("role", "Navigation");

`ModifyProperty`

Modifies property member of DOM element.

Parameter

name:string - The name of needle property. Required
value:string - The value of needle property. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.AddProperty("role", "Navigation");
nav.ModifyProperty("role", "Main Menu");

`GetRestorePropertyValue`

Retrieves the value of property member when changed by ModifyProperty method.

Parameter

name:string - The name of needle property. Required

Return

Returns the property value.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.AddProperty("role", "Navigation");
nav.ModifyProperty("role", "Main Menu");

// Print the property value
console.log(nav.GetRestorePropertyValue("role"));

`HasProperty`

Checks the DOM element is whether has or not a property member in the DOM element.

Parameter

name:string - The name of needle property. Required

Return

Returns the boolean value.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.AddProperty("role", "Navigation");

// Print the property checking
console.log(nav.HasProperty("role"));

`RemoveProperty`

Removes a property member from the DOM element.

Parameter

name:string - The name of property is deleted. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.AddProperty("role", "Navigation");
nav.RemoveProperty("role");

// Print the property checking
console.log(nav.HasProperty("role"));

`AddMethod`

Adds a method function to DOM element.

Parameter

name:string - The name of method. Required
arguments:list - The list of arguments. Oprional
body:string - The body of method. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.AddMethod("getRole", 'return "Navigation";' );

// Print the result
console.log(nav.getRole());

`AddFunction`

Adds a method function to DOM element.

Parameter

name:string - The name of function. Required
arguments:list - The list of arguments. Oprional
body:string - The body of function. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.AddFunction("getRole", 'return "Navigation";' );

// Print the result
console.log(nav.getRole());

`AddEvent`

Adds an event handle to DOM element.

Parameter

eventType:string - The type of event. Required
callback:function - The callback function called when the event fires. Required
useCapture:boolean - A Boolean indicating whether events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element'

let nav = $("#nav");
nav.AddEvent("click", function(e)
{
  e.preventDefault();
});

`FireEvent`

Trigges an event handle to DOM element.

Parameter

eventType:string - The event type will be trigged. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.AddEvent("click", function(e)
{
  e.preventDefault();
});

// Trigge the event handle
nav.FireEvent("click");

`RemoveEvent`

Removes an event handle from the DOM element.

Parameter

eventType:string - The event type is removed. Required
name:function - The name of function is removed. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

function play() 
{
  console.log("click! me");
}

$("button#play").addEvent("click", play, false);
$("button#play").removeEvent("click", play);

`On`

Adds an event handle to DOM element.

Parameter

eventType:string - The type of event. Required
callback:function - The callback function called when the event fires. Required
useCapture:boolean - A Boolean indicating whether events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element'

let nav = $("#nav");
nav.On("click", function(e)
{
  e.preventDefault();
});

`Off`

Removes an event handle from the DOM element.

Parameter

eventType:string - The event type is removed. Required
name:function - The name of function is removed. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

function play() 
{
  console.log("click! me");
}

$("button#play").on("click", play, false);
$("button#play").off("click", play);

`Attr`

Adds a HTML attribute into the DOM element.

Parameter

params:list - The list of parameters. Required

Return

Return the self DOM element.

Example

You can use pair of name and value syntax. By example

import {element5 as $} from '@bapquad/element5'

let paragraph = $.create("p");
paragraph.attr("id", "newLine");

Or you can use the options object syntax.

import {element5 as $} from '@bapquad/element5'

let paragraph = $.create("p");
paragraph.attr({
  "id": "newLine", 
});

UIX Modifiers

Manipulation with User Interface Experiences.

`Draggable`

Enables the DOM element to draggable element.

Parameter

home:boolean - The flag specifies the drag mode to free position or return to holder position when the drag method has done.

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.Draggable(false);

`EnterFullscreen`

Sets the DOM element in the fullscreen mode. If targetElement is undefined value, it would be applied to the self DOM element, and it would be applied to targetElement else.

Parameter

target:DOM - A DOM element. Optional

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
el.EnterFullscreen();

`EscapeFullscreen`

Sets the DOM element escape from the fullscreen mode. If targetElement is undefined value, it would be applied to the self DOM element, and it would be applied to targetElement else.

Parameter

target:DOM - A DOM element. Optional

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
el.EscapeFullscreen();

`ToggleFullscreen`

Sets the DOM element enter in or escape from the fullscreen mode. If targetElement is undefined value, it would be applied to the self DOM element, and it would applied to targetElement else.

Parameter

target:DOM - A DOM element. Optional

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let el = $("#wrapper");
el.ToggleFullscreen();

`onDragStart`

Fires the event when the drag started.

Parameter

handle:function - The handle function is excuted when the event fires. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.onDragStart(function(e)
{
  e.preventDefault();
});

`onDragOver`

Fires the event when the drag over.

Parameter

handle:function - The handle function is excuted when the event fires. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.onDragOver(function(e)
{
  e.preventDetault();
});

`onDragEnd`

Fires the event when the drag end. User mouse up or end touch on the screen.

Parameter

handle:function - The handle function is excuted when the event fires. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.onDragEnd(function(e)
{
  e.preventDefault();
});

`Droppable`

Enables a DOM element become to a droppable element.

Parameter

handle:function - The handle function is excuted when the event fires. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.Droppable(function(e)
{
  e.preventDefault();
});

`onDrop`

Enables a DOM element become to a droppable element.

Parameter

handle:function - The handle function is excuted when the event fires. Required

Return

Returns the self DOM element.

Example

import {element5 as $} from '@bapquad/element5'

let nav = $("#nav");
nav.onDrop(function(e)
{
  e.preventDefault();
});

Bapquad Games since 2015