【Mr.R出品】05:HTMLayout 纯CSSS! TIPS弹窗 自动显隐

本文索引

【Mr.R出品】05:HTMLayout 纯CSSS! TIPS弹窗 自动显隐 - R站|学习使我快乐! - 1

【Mr.R出品】05:HTMLayout 纯CSSS! TIPS弹窗 自动显隐 - R站|学习使我快乐! - 2

特性:纯 CSS & CSSS!打造;
支持更换图标、文字等;
自动显示 2 秒后自动隐藏;
非常适合做提示信息框;

import win.ui;

mainForm = win.form(text="tipsbox by Mr.R";right=759;bottom=469;)
mainForm.add()


import web.layout; 
import web.layout.behavior.windowCommand;

wbLayout = web.layout( mainForm )  
wbLayout.html = 
<!doctype html>
<style type="text/css">
    html,body{ height:100%; margin:0; } 
    body widget { size:*;   }
    body{size-changed!:
            $1(#show_msg).fade = "true" ,
            $1(#show_msg):value = self.box-border-width() + "," + self.box-border-height();}
    #show_msg{
            position: absolute;
    		top:50%%;left:50%%;                 
    		width: calc(text-width(self:value)); 
    		max-width:400px;                    
			height:85px;line-height:85px;
			padding:0 30 0 80;
			flow:horizontal;	
			background:#ccc;
			border-radius:15px;
			foreground-image:url(res\fill.png);
			foreground-repeat:no-repeat;
			foreground-position:30px 50%;			
			color:2c2c2c;font-size: 18px;
			display:none;opacity: 0;
			overflow: hidden;}
#show_msg[tips = "yes"]{   
	foreground-image:url(res\fill_w.png);  
}
#show_msg[fade = "true"]{
	assigned!: 
		self::opacity = 0.01, 
		self::display = "block", 
		self.start-animation();
	animation-step!: 
		self::opacity < 1.0 ? ( self::opacity = self::opacity + 0.1, return 15 )# ( self.fade = "close", return cancel ); } #show_msg[fade = "close"]{ assigned!: self.start-timer(2000); timer!: self::opacity = 1.0, self::display = "block", self.start-animation(); animation-step!: self::opacity > 0 ?
    	( self::opacity = self::opacity - 0.1, return 15)#
   	 (self.fade = none,self::display ="none",self::opacity =9,return cancel);
}

button {width:48px;height:28px;border:1px solid #999;background:#fff;border-radius: 5px;padding:0 8 0 8;margin:10px;}
#btn{click!:  $1(#show_msg).fade = "true" ,$1(#show_msg).tips = none;}
#btn1{click!: $1(#show_msg).fade = "true" ,$1(#show_msg):value = "提示内容";}
#btn2{click!: $1(#show_msg).tips = "yes" , $1(#show_msg).fade = "true" ,$1(#show_msg):value = "厉害了我的哥";}
    </style>

 

 

 

这是默认文字

 

 



mainForm.show() 
return win.loopMessage(); 

下载地址

隐藏内容,您需要满足以下条件方可查看
End
编程语言

【Mr.R出品】零基础学aarido编程:04 HTMLayout – 精仿网易云音乐UI 制作心得

2016-11-19 14:07:11

编程语言

【Mr.R出品】06:HTMLayout 之CSS 最基本的概念,新手必备!

2016-11-21 20:21:15

19 条回复 A文章作者 M管理员
  1. 不错

  2. 学习

  3. 看看

  4. 厉害厉害

有新私信 私信列表
搜索