npm.io
0.0.3 • Published 7 years ago

operation-utils

Licence
ISC
Version
0.0.3
Deps
6
Size
70 kB
Vulns
0
Weekly
0

operation-utils

operation-utils module is a basic module for operation needs .

Because of usage of dom operation , this module could be used normally .


Modules

1 TopMessage
Use Pattern :
	TopMessage(<options>).pushMessage(messageString , <typeName>) 
TopMessage would offer light message prompt from top ,
which contains info 、success、error and warning topics .

At the same time , you could define personal options to reset 
the style of each component and running time .

You could use like these : 
How to use
	import { TopMessage } from "operation-fun" ;
	let tm = TopMessage({ 
		closeTime : 1500 , 
		messageIcon : { style : {} } ,
		messageConstructor : { style : {} }
	}) ;
	tm.pushMessage("info" , "info") ;
	tm.pushMessage("success" , "success") ;
	tm.pushMessage("error" , "error") ;
	tm.pushMessage("warning" , "warning") ;

2 RightMessage
Use Pattern :
	RightMessage(<options>).pushMessage(title , message , <link> , <target>) ;
RightMessage could offer you some notice from right way .
How to use
	import { RightMessage } from "operation-utils" ;
	let rm = RightMessage({
		autoClose : true ,
		closeTime : 3000 ,
		titleContainer : { style : {} } ,
		itemContainer : { style : {} }
	}) ;
	rm.pushMessage("Topic" , "Please notice your message from this way." , "//www.baidu.com" , "_blank") ;

3 ScrollIds
Use Pattern
	ScrollIds(<option>).setScrollMessage(domIdSelector , list)
ScrollIds module would offer a vertical scolling infos .
Through setting option , you could reset style 、 running time and 
icon render function .

If you want to clear scroll container , you could use clearScroll 
function to do it .
How To Use
	import { RightMessage } from "operation-utils" ;
	let sl = ScrollIds({
		scrollTime : 2000 ,
		renderIcon : function(){} ,
		height : "30px" ,
		width : "150px" ,
		mainContainer : { style }
	}) ;
	let list = [{text : "message one"} , {text : "message two"}] ;
	sl.setScrollMessage("my-scroll" , list) ;
	setTimeout(() => {
		sl.clearScroll("my-scroll") ;
	} , 30000) ;

4 Toast
Use Pattern
	Toast(<option>).pushMessage(message) ;
Toast module offer a light message notice . 
Through option , you could set closeTime and wether to show backgroud .

But remeber , you could only push one message in 4000 ms .
How To Use
	import { Toast } from "operation-utils" ;
	let ts = Toast({
		closeTime : 3000 ,
		showBackground : true ,
		backgroundContainer : { style : {} } ,
		contentContainer : { style : {} }
	}) ;
	ts.pushMessage("网络错误") ;

5 BottomBanner
Use Pattern
	BottomBanner(<option>)setBottomBanner(<setting>) ;
BottomBanner would offer you a bottom banner transfor .
You could use options.defaultActive to control the default controller ,
and this option could only be main or sub .

But remeber , i assumed that you would only has one bttom banner 
in one page .
How To Use
	import { BottomBanner } from "operation-utils" ;
	let bb = BottomBanner({
		mainLink : "" , // main img link 
		subLink : "" ,	// sub controller link
		defaultActive : "main"
	}) ;
	bb.setBottomBanner({
		jumpLink : "//www.baidu.com" ,
		jumpTarge : "_blank"
	}) ;

6 Banner (plan)

LINCESE

MIT

Keywords