common-ui-asdiver

v1.0.11

Published

2 years ago

for study

Downloads

0High
0Medium
0Low

asdiver

common-ui-asdiver

a simple UI Library for study。

Installing

Using npm:

$ npm install common-ui-asdiver

Example

At present, there are only rotation charts

Suppose you need one rotation at a dom just set size and give it to package

<body>
  <div class="total">

  </div>
</body>

<style>
/* The recommended size is the same as the reserved image */
  .total{
    width: 600px;
    height: 400px;
    background-color: pink;
  }
</style>

use->

const UI = require("common-ui-asdiver")
const retation = new UI.Rotation(".total",
//source imgs
[{
  src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665314220&t=dc9d86b9b54d484143dd424bf5447b01",
  clickFunction:(e)=>{
  console.log(e);
  }
},{
  src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665452390&t=60a46609e614183e2d972f32f4ad50b0",
  clickFunction:(e)=>{
  console.log(e);
  }
},{
  src:"https://imgcps.jd.com/ling4/100037199897/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa1b/ec752cb5/cr/s/q.jpg",
  clickFunction:(e)=>{
  console.log(e);
  }
}],{
//about move set up（required）
move:{
  //speed
  moveTime:"0.5s",
  // is auto move
  autoMoveOpen:true,
  //the direction of auto move ,negative to left, positive number to right
  autoMoveDirection:1,
  //movement interval
  autoMoveTime:2000,
  //slide move in mobile terminal (warning : user active movement only be one mode,it means touchMove and buttonStyle just choose one)
  touchMove:true

},
//buttonType (is optional. Without this attribute, it means that it is not used)
// buttonStyle:{
//   //whether to display when the mouse is not on the box
//   mouseOutDisplay:true,
//   //button size
//   height:"30px",
//   width:"21px",
//   //button color
//   buttonColor:"yellow",
//   LeftButtonDomFunc(buttonDom){
//     const img =  document.createElement("img")
//     buttonDom.appendChild(img)
//     //...
//   },
//   RightButtonDomFunc(buttonDom){
//     const img =  document.createElement("img")
//     buttonDom.appendChild(img)
//     //...
//   }
// },
//The button list at the bottom (is optional. Without this attribute, it means that it is not used)
dotStyle:{
  //color when not selected
  unSelectColor:"black",
  //color when selected
  selectColor:"yellow",
  //button transparency
  opacity:0.5,
  //size of button
  size:"20px",
  //style of button
  borderRadius:"50px",
  //spacing
  margin:"0px 5px",
  //provide dom to height customization, you can even change the default style
  dotDomFunc(dotDomTotal){
    dotDomTotal.style.bottom = "5px"
    dotDomTotal.childNodes.forEach(element => {
      element.style.transition =  `width 0.5s ease-in-out`;
    });
  },
  //if you want have a prettier transition when dot been checked , I suggest add transition in dotDomFunc,this provide a case
  //Called when select
  selectFunc(dotDom){
    dotDom.style.width = "60px"
  },
  //Called when unSelect
  unSelectFunc(dotDom){
    dotDom.style.width = "20px"
  },


}
})

than work.

If you want to abandon this rotation,especially when vue switch router onBeforeUnmount. (in fact, I need release package for vue,this is the last word)

//it will clear dom element and automove interval
retation.abandon()

let me know if you have any questions.

heistory

1.0.10

add abandon function to clear itself

1.0.6 - 1.0.9

fix bug

1.0.5

buttonStyle change to not required

add move.touchMove (mobile terminal)

rich dotStyle

1.0.4

add dotStyle.dotDomFunc and buttonStyle.LeftButtonDomFunc / RightButtonDomFunc to provide height customization, you can even change the default style

1.0.3

Info property
ButtonType change to buttonStyle, dots change to dotStyle.
Source code notes user jsdoc （chinese）
other patch...

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

common-ui-asdiver

Installing

Example

heistory