html-element-js v0.2.2

html-element-js

NOTE: Please do not install this library for prduction because this library is very unstable.

A simple library for creating and manipulating DOM using JavaScript DOM api. See demo

Documentation

Installation

npm install --save html-element-js

or directly import into browser

path/to/html-element-js/dist/html-element.js

Usage

Import in webpack

To import all

import html from 'html-element-js';

To only import tag method

import tag from '/node-modules/dist/tag';

To only import rangeSlider

import rangeSlider from '/node-modules/dist/rangeSlider';

To only import toggler

import toggler from '/node-modules/dist/toggler';

To only import custom select

import comboBox from '/node-modules/dist/comboBox';

Create a new element

To create a span tag

const span = html.tag('span');

Creating element with options

const span = html.tag('span' ,{
  textContent: 'This is span tag',
  className: 'myspan',
  id: 'span1'
});

HTML tags

• create tag html.tag(tagName:String, options?:Object) anchor tag

Remove event listeners

Remove all EventListeners

const mydiv = html.tag('div');
mydiv.addEventListener('click', function(e){
  console.log(e);
}); //adds a event listener

mydiv.removeEvents(); //remvoes all event listener

Remove specific EventListeners

const mydiv = html.tag('div');
mydiv.addEventListener('click', function(e){
  console.log(e);
}); //adds a event listener

mydiv.removeEvents('click'); //remvoes all click event listener

see demo

Range slider

Creates range slider equivalent to input type range

const slider = html.rangeSlider({
  min: 0,
  max: 100,
  step: 2,
  value: 46
});

Properties - rangeSlider

• min number:private (minimum value of range)
• max number:private (maximum value of range)
• size string:private (size of slider)
• step string:private (step value)
• value number:public

Methods - rangeSlider

• onchange function:public
• setvalue function:public

Toggler

Creates a toggle button equivalent to input type checkbox or radio

const toggler = html.toggler({
  size: 40,
  valType: 'on/off',
  value: true
});

Properties - toggler

• size number:private (size of slider)
• valType string:private (step value, possible value 'bool' or 'on/off')
• value number:public

Methods - toggler

• onchange function:public
• setvalue function:public

ComboBox

Creates a toggle button equivalent to input type checkbox or radio

const toggler = html.select({
  spead: 2, //min 1 max any. Greater value fater opening animation. See in demo
  height: 30, //height of option
  maxheight: 300 //max height of option container.
});

options - comboBox

• spead number (spead of animation of opening select options)
• height number (height of option)
• maxheight number (max height of option container)
• select Element (Select element from DOM)

Methods - comboBox

• addOption function:public
• removeOption function:public
• setvalue funtion:public
• value function:public

ToolTip

Creates a toggle button equivalent to input type checkbox or radio

• JavaScript for single element

const domElement = document.querySelector('some-element');

html.toolTip(domElement, {
  direction: 'left',
  title: 'this is some dummy title'
});

• JavaScript direction auto

const domElement = document.querySelector('some-element');

html.toolTip(domElement, {
  direction: 'auto',
  defaultDirection: 'left',
  title: 'this is some dummy title',
  showToolTipOn: ['focus']
});

• HTML without direction attribute

<a href="https://example.com" data-title="click this link">link</a>

• HTML with direction attribute

<a href="https://example.com" data-title="click this link" data-direction="left">link</a>

• Initialize all element which has data-title attribute

toolTip.init();

options - toolTip

• direction string (direction of toolTip i.e. 'left', 'right', 'top' and 'bottom')
• title string (text in toolTip)