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

编程语言 Mr.R 1年前 (2016-11-20) 1109次浏览 已收录 11个评论 扫描二维码

【Mr.R 出品】05:HTMLayout 纯 CSSS! TIPS 弹窗 自动显隐 - R 站|R 大技术站 - 1

【Mr.R 出品】05:HTMLayout 纯 CSSS! TIPS 弹窗 自动显隐 - R 站|R 大技术站 - 2

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

import win.ui;
/*DSG{{*/
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>
<html>
<head>
    <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>
</head>
<body>

	<div> 
		<button #btn value = "默认" />
		<button #btn1 value = "更换内容" />
		<button #btn2 value = "更换图标" />
	<div>
    <div #show_msg>这是默认文字</div>
</body>
</html>
**/
 


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

下载地址

注意:本段内容须成功“回复本文”后“刷新本页”方可查看!


修仙㊀群
修仙㊁群
R 大技术站 , 版权所有,如未注明 , 均为原创,如需转载请注明来源!
喜欢 (1)
[itdiy@qq.com]
分享 (0)
发表我的评论
取消评论

表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(11)个小伙伴在吐槽
  1. sdfsdf
    dsf2018-03-31 23:22 回复 Windows 7 | Chrome 64.0.3282.140
  2. 厉害了我的哥
    asd2017-10-19 13:37 回复 Windows 7 | 搜狗浏览器 2.X
  3. 你很棒哦
    su2017-08-24 14:29 回复 Windows 10 | Chrome 60.0.3112.101
  4. 厉害了我的哥
    Vivian2017-07-24 14:12 回复 Windows 10 | Chrome 50.0.2661.102
  5. 很有学习精神
    flcwk2016-12-19 10:56 回复 Windows 10 | Chrome 50.0.2661.75
  6. 看看
    yy2016-12-16 19:01 回复 Windows 7 | Chrome 49.0.2623.75
  7. good!
    good!2016-11-30 23:26 回复 Windows 8.1 | Chrome 54.0.2840.59
  8. lihai le wo de
    lddd2016-11-26 15:18 回复 Windows 7 | Internet Explorer 8.0
  9. 厉害了我的哥
    网赚坊2016-11-24 19:57 回复 Windows 7 | Chrome 47.0.2526.108
  10. 厉害了我的哥
    word哥,牛逼了2016-11-21 20:31 回复 未知操作系统 | 未知浏览器
  11. 厉害了我的哥
    吗飒飒2016-11-20 14:56 回复 Windows 10 | Chrome 52.0.2743.116