js2uix is a Javascript Module that combines Dom Control function and Component production function. Simple implementation of the existing Dom Control function, and additional component production is possible.
* Name : js2uix * Developer : JH.Yu * Email : deshineplus@icloud.com * Language : Javascript(ES5) * Copyright : 2018 JH.Yu (js2uix) * GitHub : https://github.com/js2uix/js2uix * License : https://github.com/js2uix/js2uix/blob/master/LICENSE * Create Dom Control Module (html dom control, component, ui creation tool) 1. js2uix() 2. js2uix.Component() 3. js2uix.UI [Notice] Does not support IE 8 and lower versions!!
js2uix(param): The value of the parameter is'string','object','function'
Example of use:
import js2uix from 'js2uix';
or
const js2uix = require('js2uix');
js2uix('div') : Select the entire div tag.
js2uix('.class') : Select Node with class name.
js2uix('#id') : Select Npde with id name.
js2uix('<div></div>') : Create a new div tag.
js2uix(callback) : In case of callback function, callback can be executed after html load is completed.
js2uix selector basically uses built-in functions through method chaining.
Example of use:
js2uix('div').addClass('test1').removeClass('test1')
Independent component object can be created through the js2uix module.
Component objects for each function can be created/managed, and screens can be rendered by combining each object.
Example of use:
[Content.js]
var Content = js2uix.Component({
super : function(){
this.state = {
name : 'js2uix'
}
},
onClick : function(){
this.setState({
name : 'js2uix-component'
})
},
render : function(){
var onClick = this.onClick.bind(this);
var test = js2uix(
'<section class="content">' +
'<div class="text '+this.state.name+'">'+this.props.content+'!</div>' +
'</section>'
);
test.addEvent('click', onClick);
return (test);
}
});
js2uix.Export('Content', Content);
Example of use:
[index.js]
var content = js2uix.Import('Content');
js2uix.Render(test.props({'content' : 'js2uix'}), '#root');
addClass: Set the class name of the selected Dom.
Example of use:
js2uix('div').addClass('test');
js2uix('div').addClass('test1 test2 test3');
addEvent: Set event on selected Dom
Example of use:
js2uix('div#test').addEvent('click', function(){ ... });
js2uix('div#test').addEvent({
'click' : function(){...},
'mouseover' : function(){...}
});
addId: Set id name of selected Dom.
Example of use:
js2uix('div').addId('test');
after: Insert Dom after selected Dom.
Example of use:
js2uix('div').after(js2uix('.test1'));
js2uix('div').after('<div>test</div>');
js2uix('div').after('test');
ajaxForm: ajax communication using Dom of selected form type.
Example of use:
js2uix('form').ajaxForm({
url : '/ajax/api',
method : 'POST',
data : {title : 'title'},
success : function(){},
error : function(){}
});
animate: Dynamic processing effect using the selected Dom.
Example of use:
js2uix('div').animate({
width : 100,
height : 200
}, 250, function(){
console.log('animate end!')
});
append: Insert Dom at the end of the selected Dom.
Example of use:
js2uix('div').append(js2uix('.test1'));
js2uix('div').append('<div>test</div>');
before: Insert Dom before the selected Dom.
Example of use:
js2uix('div').before(js2uix('.test1'));
js2uix('div').before('<div>test</div>');
js2uix('div').before('test');
children: Check the child Dom in the selected Dom.
Example of use:
js2uix('div').children();
js2uix('div').children('.child');
clone: Copy selected Dom.
Example of use:
var newDiv = js2uix('div').clone();
var deepDiv = js2uix('div').clone(true);
createDom: Create new Dom.
Example of use:
var newNode = js2uix.createDom('div', {
className : 'test',
idName : 'ids',
attributes : {
'data-id' : 'test11',
'data-name' : 'testName'
},
styles : {
'width' : 100,
'height' : 200,
'backgroundColor' : 'red'
},
content : 'hello world'
});
console.log( newNode ); //div node
css: Set style of selected Dom
Example of use:
js2uix('div').css('color', 'red');
js2uix('div').css({
'color' : 'red',
'z-index' : 1
});
empty: Delete all child elements of the selected Dom.
Example of use:
js2uix('div').empty();
extend: merge/inherit objects
Example of use:
var object1 = {test1:1, test2:2}
var object2 = {test1:1, test2:2}
js2uix.extend({}, object1);
js2uix.extend(object1, object2);
fadeIn: Flashing of selected Dom.
Example of use:
js2uix('div').fadeIn();
js2uix('div').fadeIn(250);
fadeOut: Flashing of selected Dom.
Example of use:
js2uix('div').fadeOut();
js2uix('div').fadeOut(250);
find: Find a specific Dom within the selected Dom
Example of use:
js2uix('div').find('.test1');
js2uix('div.name').find('div');
firstNode: Select the first Dom from the selected Dom
Example of use:
var first = js2uix('div').firstNode();
getAttr: Check the attribute of the selected Dom
Example of use:
js2uix('div').getAttr('data-name');
js2uix('div').getAttr();
hasChild: Check if the selected Dom has a specific child
Example of use:
js2uix('div').hasChild( '.test1' );
hasClass: Check if the selected Dom has a specific class name
Example of use:
js2uix('div').hasClass( 'test1' );
hasId: Check if the selected Dom has a specific id name
Example of use:
js2uix('div').hasId( 'test1' );
hasParents: Identify parents with a specific name among the parents of the selected Dom
Example of use:
js2uix('div').hasParents( '.parent' );
height: Set and check the height value of the selected Dom
Example of use:
js2uix('div').height( 200 );
var height = js2uix('div').height();
console.log(height) //200
hide: Display property of selected Dom none
Example of use:
js2uix('div').hide();
html: Set and return child elements of the selected Dom
Example of use:
var html = js2uix('div').html();
js2uix('div').html('test');
js2uix('div').html('test');
index: Check the index information of the selected Dom
Example of use:
js2uix('li').index();
lastINode: Select the last Dom among the selected Dom
Example of use:
var last = js2uix('div').lastINode();
left: Set and check the left value of the selected Dom
Example of use:
js2uix('div').left( 200 );
var height = js2uix('div').left();
console.log(left) //200
loaded: executed after all html is loaded
Example of use:
js2uix.loaded(function(){
console.log('load complete');
});
js2uix(function(){
console.log('load complete');
});
loop: Apply the loop of the selected Dom or specific object
Example of use:
js2uix('div').loop(function(num, node){
console.log(num, node);
});
var doms = js2uix('div');
js2uix.loop(doms, function(num, node){
console.log(num, node);
});
var array = [1,2,3,4];
js2uix.loop(array, function(num, value){
console.log(num, value);
})
nextNode: Next selection of the selected Dom
Example of use:
var next = js2uix('div.test').nextNode();
console.log(next);
not: not select of selected Dom
Example of use:
var item = js2uix('div.test').not('.test2');
console.log(item);
Offset: Check the offset of the selected Dom
Example of use:
var offset = js2uix('div.test').offset();
console.log(offset);
parent: Check the parent directly above the selected Dom
Example of use:
var parent1 = js2uix('div.test').parent();
var parent2 = js2uix('div.test').parent('.parent');
console.log(parent1);
console.log(parent2);
parents: Confirm a specific parent among selected Dom parents
Example of use:
var parent = js2uix('div.test').parents('.parent');
console.log(parent);
prepend: Insert Dom at the beginning of the selected Dom
Example of use:
js2uix('div.target').prepend(js2uix('div.test'));
js2uix('div.target').prepend('<div>test</div>');
prevNode: Previous selection of the selected Dom
Example of use:
var prev = js2uix('div.test').prevNode();
console.log(prev);
remove: Delete selected Dom
Example of use:
js2uix('div.test').remove();
removeAttr: Delete the specific attribute value of the selected Dom
Example of use:
js2uix('div.test').removeAttr('data-id');
removeClass: Delete specific class value of selected Dom
Example of use:
js2uix('div.test').removeClass('test');
removeEvent: Remove selected Dom event
Example of use:
var addEventHandler = function(){...};
js2uix('div#test').removeEvent();
js2uix('div#test').removeEvent('click');
js2uix('div#test').removeEvent('click.eventName');
js2uix('div#test').removeEvent('click', addEventHandler);
removeId: Delete the specific id value of the selected Dom
Example of use:
js2uix('div#test').removeId('test');
replace: Replace the selected Dom with a specific Dom or a generated Dom
Example of use:
js2uix('div#test').replace(js2uix('div.new'));
setAttr: Set attribute of selected Dom.
Example of use:
js2uix(select).addAttr('data-name', test);
js2uix(select).addAttr({
'data-name' : test,
'data-value' : 100
});
show: display property block of the selected Dom
Example of use:
js2uix('div#test').show();
siblingNodes: Check for adjacent sibling elements except for the selected Dom
Example of use:
js2uix('div#test').siblingNodes();
text: Set and check the text of the selected Dom
Example of use:
js2uix('div#test').text('test');
var textValue = js2uix('div#test').text();
console.log(textValue)
top: Set and check the top of the selected Dom
Example of use:
var top = js2uix('div#test').top();
console.log(top);
js2uix('div#test').top(200);
value: Set and check the value of Dom of the selected form
Example of use:
var value = js2uix('input').value();
js2uix('input').value('test');
width: Set and check the width of the selected Dom
Example of use:
var width = js2uix('div#test').width();
console.log(width);
js2uix('div#test').width(200);