htmlayout学习之瑜伽管理界面设计

By admin at 2019-09-04 • 0人收藏 • 1455人看过

本界面html代码来自:

https://blog.csdn.net/QQ282881515/article/details/51525985?locationNum=2&fps=1

这个是博主分享的早期作品, 再此表示下感谢先.

上面的界面是由vc和htmalyout的htm代码实现的,我打算把html的代码放到aar里进行再次整合界面

GIF.gif

目前只是实现了界面换肤功能.

mainfrom代码如下:

 import win.ui;
/*DSG{{*/
mainForm = win.form(text="aardio工程12";right=971;bottom=708;border="none")
mainForm.add()
/*}}*/

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

namespace web.layout.behavior.myShowSkin {
	onMouseClick = function (ltTarget,ltOwner,x,y,ltMouseParams) {	
		var frmChild = ..mainForm.loadForm("\窗体\skin.aardio");
		frmChild.show();
     }  
}


var wbLayout = web.layout( mainForm );

wbLayout.go("\layout\index.htm");

if(_STUDIO_INVOKED){
	import web.layout.debug;
	wbLayout.attachEventHandler( web.layout.debug );
} 

subscribe("改变皮肤",function(flag){
    var ltEleBody = wbLayout.querySelector("body");
	ltEleBody.style["background-image"]="url(images\skin\"++flag++"\skin.png)";
} )


import win.ui.resizeBorder;
win.ui.resizeBorder(mainForm);


mainForm.show() 
win.loopMessage();

皮肤选择界面代码吐下:

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=631;bottom=499;border="none")
winform.add()
/*}}*/

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

namespace web.layout.behavior.myselect {
	onMouseClick = function (ltTarget,ltOwner,x,y,ltMouseParams) {
		var cmd = ltTarget.skin or ltOwner.skin;
		var wbLayout = ltOwner.getLayout();
        var ltEleBody = wbLayout.querySelector("body");
		ltEleBody.style["background-image"]="url(..\images\skin\"++cmd++"\skin.png)";
		..publish("改变皮肤",cmd) 
     }  
}

var wbLayout = web.layout( winform );
wbLayout.go("\layout\skin\index.htm");

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

完整工程:

链接:https://pan.baidu.com/s/1jJE8DW1GedNBN2DgduqVoQ 

提取码:gfm7 


后面会慢慢增加其他交互功能, 更新帖子会在楼下继续;


登录后方可回帖

登 录
信息栏
公告:
个人博客
专注分享
谢谢合作!

本站域名:HtmLayout.Cn
aardio可以快速开发上位机,本站主要记录了学习过程中遇到的问题和解决办法及aardio代码分享

这里主要专注于aardio学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.

Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
本 站 主 站:Stm32cube中文网
Sciter中文在线文档Sciter在线学习文档
空间赞助:才仁机械
打赏本站
Loading...