easy-dom

Easy-Dom js library for convenient operation of dom


test test test

中文 Version Log Online Use

[TOC]

0. Installation and use

0.1 npm installation

npm i easy-dom-util

use

import $ from'easy-dom-util';

let el = $.create('div'); // returns an element of type Ele, which encapsulates the method of dom operation
...

0.2 script tag introduction

<script src="https://cdn.jsdelivr.net/npm/easy-dom-util"></script>
<!-- or -->
<!-- <script src="https://cdn.jsdelivr.net/npm/easy-dom-util@x.x.x"></script> -->
<script>
    var el = EasyDom.create('div');
</script>

1. Ele object

easy-dom encapsulates the dom element, and each dom element will be encapsulated into an Ele element

Most of the methods on the Ele element support chained calls. The Ele element has the following methods for use:

A list of methods, used in detail below:

Method Parameters Return Value Description
dom - HTMLElement Return the corresponding native dom element
attr json/name,value/– Ele/string/Ele Set or get element attributes
data json/name/null/–,value/null/– any Temporarily store and manipulate some data on dom elements
hasAttr string boolean Determine whether there is an attribute
rmAttr string Ele/string/Ele Delete attribute
style json/name,value Ele/string/Ele Set or get element style
text [string] string/Ele Set or get element innerText
value [string] string/Ele Set or get element value
html [string] string/Ele Set or get element innerHTML
empty - Ele Empty element content
cls [string],[withPrefix=boolean] string/Ele Set the class of the element or get the class name of the element
id [string] string/Ele Set the id of the element or get the id of the element
click function Ele Set element click event
on json/name,func Ele Set the event of the element
render {html,method={},result=null} Ele Render element
addClass string Ele Add class to element
rmClass string Ele Remove a class
hasClass string boolean Determine whether there is a class
replaceClass string,string Ele Replacement class
append …Array[dom/Ele] / Array[dom/Ele] Ele Insert child node to element
appendSingle dom/Ele Ele Insert child node to element
insert index, …Array[dom/Ele] / Array[dom/Ele] Ele Insert child at specified position
prepend …Array[dom/Ele] / Array[dom/Ele] Ele Head Insert Child
before …Array[dom/Ele] / Array[dom/Ele] Ele Insert sibling elements in front of elements
after …Array[dom/Ele] / Array[dom/Ele] Ele Insert an element of the same level after the element
remove int/Ele/– Ele/– Delete child nodes according to position or ele element, or delete itself
parent [index] Ele/null Get the parent element or the nth level parent element of an element
index - number Get the position of the element in the parent element
child [index] Ele/Array[Ele]/null Get how many or all child elements
next [index] Ele/null Get the previous or previous nth element of an element
prev [index] Ele/null Get the next or last nth element of an element
exe function(dom){} Ele Use Ele as this to execute a method, and the callback parameter is the corresponding dom element
src string Ele Set the src attribute of dom
query selector Array[Ele] Query all children of an element based on the css selector
name string Ele Add name to element or query element based on name
hide - Ele hide elements
show [display] Ele Display element
setVisible [visible],[display] Ele Display element

Some api usage examples:

Basic use

let el = $.create('div')
    .cls('easy-dom')
    .text('easy-dom')
    .click(()=>{
        alert('click')
    })

emmet style

let el = $.create('div#app.cls1.cls2[attr1=1][attr2]')

render method

el.render({
    method:{
        alert(text){
            // this: {el,bindEl,self,method}
            console.log(this);
            window.alert(text);
        }
    },
    result(el){
        console.log(el.div1,el.div2);
    },
    // Using the es6-string-html plugin in vscode will make the following html with syntax highlighting
    html:/*html*/`
        <div @el='div1' @event=alert('test')></div>
        <div @el='div2'></div>
    `
})

.data() usage

el.data(); // Get data object
el.data(null); // Clear the data object
el.data('name','test'); // set a data
el.data('name'); // Get a data
el.data('name', null); // remove a data
el.data({ // batch operation
    name: null, // remove a data
    age: 12 // set a data
});

The only attribute of the Ele element is .el, get the corresponding dom element

2. api list

api list

api Parameters Return value Description
create string Ele Generate an Ele element based on tag
query selector[,boolean] Ele/NodeList/null Query element, the bool parameter behind indicates whether to query all elements, otherwise only the first one is queried
checkDom string/selector/HTMLElement HTMLElement/NodeList Get dom element
classPrefix string[,function] - Add a default prefix to the class name. If a callback function is used as a parameter, the prefix will be cleared after the callback is completed, otherwise please manually call clearClassPrefix to clear
clearClassPrefix - - Clear class name prefix
addCommonStyle object/name,value - Add css variables and common styles
reportStyle {function, id =’el-style’, usePool = false} - Report css style
initStylePool - - Initialize style pool
registTouchEvent {el[dom/Ele/selector],touchStart,touchMove,touchEnd} - Touch event package on mobile terminal, compatible with pc terminal
windowSize - {width:height} Get browser size
version Attributes - easy-dom version information

Detailed use

$.classPrefix('el-test-');
$.create('div').cls('1') // class = el-test-1
$.clearClassPrefix();
// or
$.classPrefix('el-test-',()=>{
    $.create('div').cls('1') // class = el-test-1
});

Style related

$.addCommonStyle({
    fontSize: '12px',
    textCenter:'text-align:center;'
})

$.reportStyle({
    func:initStyle,
    id:'MyStyle' // id of style tag
}); // Do not use the style pool, the style will be added to the head immediately

// or
$.reportStyle({
     func:initStyle,
     id:'MyStyle', // id of style tag
     usePool: true
}); // Use the style pool, the style will be added to the head after calling initStylePool. When there are many scattered styles, it is recommended to use the style pool
$.initStylePool();

function initStyle(common){ // common is a common style
     // Using the es6-string-css plugin in vscode will make the following css syntax highlighting
     return /*css*/`
         .el-test-1{
             color:#f44;
             font-size:${common.fontSize};
         }
         .el-test-text{
             ${common.textCenter}
             color:#222;
         }
     `
}

registTouchEvent

$.registTouchEvent({
     el:'dom/Ele/selector',
     touchStart(touchList){
     },
     touchMove(touchList){
     },
     touchEnd(touchList){
     },
});

tacl-ui

A set of simple ui components for taost, confirm, loading, alert, drag


Online use

[TOC]

0. Installation and use

0.1 npm installation

npm i tacl-ui

use

import {tool, toast, confirm, alert, loading, drag} from'tacl-ui';
// or
import TaclUI from'tacl-ui';
// TaclUI = {tool, toast, confirm, alert, loading, drag}

// do something ...

0.2 script tag introduction

<script src="https://cdn.jsdelivr.net/npm/tacl-ui"></script>
<!-- or -->
<!-- <script src="https://cdn.jsdelivr.net/npm/tacl-ui@x.x.x"></script> -->
<script>
    TaclUI.toast('Hello world!')
</script>

1. api

1.1 tool

Expose the easy-dom tool

1.2 toast

Pop up a toast

// simple call
toast(text[, time, position]);
toast('a hint')

// json call
toast({
    text:'A prompt',
    // Other parameters
})

// new method All components in tacl are an instance by default, you can use the new method to create a new instance
const close = toast.new(...);

parameter list

declare interface ToasterOpts {
    text?: string;
    time?: number;
    position?:'top'|'middle'|'bottom';
    parent?: DomEle;
    onhide?(): void;
    onopen?(): void;
    contentHtml?: boolean;
    showClose?: boolean;
    customClass?: string;
    button?: {// add a small button
        text: string;
        onclick(): void;
    }
}

1.2 confirm

A confirm confirmation box pops up

// simple call
confirm('Whether to confirm')
confirm('whether to confirm','confirm box')

// json call
confirm({
    text:'Are you sure?',
    title:'Confirmation box',
    confirmText:'confirm',
    cancelText:'cancel',
    cancelBtn:false, // Do you need a cancel button
    theme:'default', //
}).then((result)=>{
    if (result) {
        
    } else {

    }
})

// new
confirm.new(...).then((result)=>{})

parameter list

declare interface ConfirmerOpts {
    text?:string;
    title?:string;
    confirmText?:string;
    cancelText?:string;
    cancelBtn?:boolean;
    closeBtn?:boolean;
    parent?: DomEle;
    theme?: confirmStyle;
    onhide?(): void;
    onopen?(): void;
    customEl?: DomEle;
    customClass?: string;
    contentHtml?: boolean; // default false
    custom?(box: Ele, $: ToolStatic): void;
    type?: confirmType; // default confirmType.confirm
    onGetCloseMethod?(fn: void): void; // Get the closed function when user new creates a new pop-up box
    clickConfirmClose?: boolean; // default true
    clickCancelClose?: boolean; // default true
    onconfirm?(): void;
    oncancel?(): void;
}

enumerate

declare type confirmResultType ='confirm' |'cancel' |'close';

declare type confirmType ='confirm' |'alert' |'pop';

declare type confirmStyle ='yellow2' |'yellow' |'default';

1.3 alert

Pop up an alert

// simple call
alert('success')
alert('success','success title')

// json call
alert({
    text:'Success',
    title:'Success Title',
    confirmText:'confirm',
    theme:'default', //
}).then(()=>{

})

// new
alert.new(...).then((result)=>{})

parameter list

Same as confirm

1.4 pop

Pop up a pop-up box

// simple call
pop('Are you sure?')
pop('Are you sure?','Confirmation box')

// json call
pop({
    text:'Are you sure?',
    title:'Confirmation box',
    confirmText:'confirm',
    cancelText:'cancel',
    cancelBtn:false, // Do you need a cancel button
    theme:'default', //
}).then((result)=>{
    if (result) {
        
    } else {

    }
})

// new
pop.new(...).then((result)=>{})

parameter list

Same as confirm

1.5 loading

Pop up a loading

// simple call
loading(text[,time]);
loading();
loading('Loading...');
loading('Loading...', 1000);

loading.close(); // Manually close

// json call
loading({
    text:'Success',
    time:1000
})

const close = loading.new(...);

parameter list

declare interface LoadingerOpts {
    text?:string;
    time?:number|null;
    parent?: DomEle;
    backgroundOpacity?: number;
    onopen?(): void;
    onhide?(): void;
}

1.6 drag

Generate a draggable element, compatible with pc and mobile

let el = drag({
    el,
    parent,
    enableDrag = true,
    onClick = df,
    onSideChange = df,
    zIndex = 100,
    aside = false,
    preventDefault = true,
    reinitPosition = false,
    margin = 3, // upper right lower left or just pass in a number
})

parameter list

| Parameter | Must | Type | Default Value | Description | | :–: | :–: | :–: | :–: | :–: | | el | Yes | dom/Ele/selector | - | Elements to be dragged | | parent | No | dom/Ele/selector | - | Specify a parent element, so that the drag can only be carried out in the parent element, and the parent element needs to set the position style | | enableDrag | No | boolean | true | Whether it can be dragged or not | | onClick | No | function | function(){} | Click event | | aside | no | boolean | false | whether to be adsorbed on both sides | | onSideChange | No | function | function(isLeft){} | Only takes effect when aside=true, and triggers when the suction side changes | | zIndex | No | number | 100 | z-index of the dragged element | | preventDefault | No | boolean | true | Whether to prohibit the default event behavior | | margin | No | number/Array[top,right/bottom/left] | 3 | Top, bottom, left, and right margins | | reinitPosition | No | boolean | false | Whether to change the position of the drag according to the orientationchange and resize events, it needs to be turned on when the drag is full screen |

declare interface DragParameters {
    el: Ele|HTMLElement|string;
    parent?: Ele|HTMLElement|string;
    onClick?: (event: Event, endX: number, endY: number) => {};
    onSideChange?: (isLeft:boolean) => {};
    zIndex?: number;
    enableDrag?:boolean;
    delay?:number;
    aside?:boolean;
    preventDefault?:boolean;
    reinitPosition?:boolean;
    margin?:number|Array<number>;
    onDragStart?: (event: Event, x: number, y: number) => {};
    onDragMove?: (event: Event, x: number, y: number) => {};
    onDragEnd?: (event: Event, x: number, y: number) => {};
}

declare class Drag {
    constructor(parameters: DragParameters);
    setPosition(left: number, top: number): void;
    initPosition(): void;
    getParentSize(): {width: number, height: number};
    aside: boolean;
    sideLeft: boolean;
    enableDrag: boolean;
    preventDefault: boolean;
    left: number|string;
    top: number|string;
    margin: Array<number>;
}

Remarks: Regarding preventDefault, preventDefault=true can prohibit the dragging of the browser on the mobile terminal to cause the page to move, and there is a blank at the top But this attribute will also prohibit the click event of the child element, which can be circumvented by the target attribute of the event in the onClick event Both methods have their pros and cons

Attribute list

preventDefault, enableDrag, aside

The use is the same as the parameter list, and the properties can be dynamically modified after generation