从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
主界面, tab导航栏:
html中增加工具栏和一些项目
<div #tabBar> <div .tab>首页</div> <div .tab>上课</div> <div .tab>管理</div> <div .tab>记录</div> </div>#
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
我们回到主界面中, 把刚刚的换肤界面绑定到主界面的皮肤按钮上
首先, 再mainform.aardio中增加一个自定义行为myshowskin
namespace web.layout.behavior.myShowSkin { onMouseClick = function (ltTarget,ltOwner,x,y,ltMouseParams) { var frmChild = ..mainForm.loadForm("\dlg\skin.aardio"); frmChi
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
底部增加两个按键
html中增加
css中增加横向浮动和垂直居中
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
点击图片实现切换背景
为了能够动态切换背景图片, 需要把每个图片的div设置一个自定义的属性用来区分点击的是哪个图片.
html中修改, 增加了自定义的属性Lname,区分不同的节点
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
上面图片间隔好大, 感觉不自然, 好丑, 经过测试, 在css中直接定义
并不能达到效果,
这时候参考这个程序之前的代码, 需要用div再次嵌套下. 我们把每个img都放入到div中去, 然后去操作div
<div #skin-area> <div .listimg
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
为了让滚动条好看一点,细一点, 那么我们可以自定义垂直滚动条, 参考htmlayout的手册示例,
我们在css中添加如下代码:
@set small-v-scrollbar { .slider { background-color: rgba(114,150,60,0.7); } .base { width: 3px; } /* explicit declaration of scrollbar width */ } * { vertical-scrollbar: sma
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
下面在mainarea那块区域内添加皮肤列表.
<div #mainarea> <div #skin-area> </div> </div>并设置css为
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
在main节点中增加两个区域, 一个用来显示皮肤框,, 一个用来作为底部按键
先来设置下皮肤显示区
我们增加mainarea节点和main-bottom节点
<html> <link href="skin.css" rel="stylesheet" type="text/css"/> <body> <div #header command="window-caption"> <div #space>更
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
皮肤更改功能界面:
参考主界面的html和css,稍作修改即可.如下:
<html> <link href="skin.css" rel="stylesheet" type="text/css"/> <body> <div #header command="window-caption"> <div #space>更改外观</div> <div #btn-close command="window-
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
给按钮增加鼠标的各种状态:
上面为什
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
下面在顶部增加窗体的最小化和关闭按钮
html中增加这三个功能的div
<html> <link href="main.css" rel="stylesheet" type="text/css"/> <body> <div #header command="window-caption"> <div #skin /> <div #btn-min /> <div #btn-close
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
增加界面头部拖动功能
首先, 在html中添加
以上,增加了id为header的节点, 在css中设置这个节点的属性
以上增加这个节点的背景色为红色, 这样更
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
原来界面中有个边框图片, 那么我们也弄到界面上去, 我这里不用它原来的方法, 我加入属性到body里去
body{ margin:0px; background-image:url(img/skin.png); background-repeat:expand stretch-left stretch-middle stretch-right; background-position:280 2 2 680; foreground-image:url(img/border.png); }
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
下面正式开始:
首先把html和css文件关联起来, html里用link语句
<html> <link href="main.css" rel="stylesheet" type="text/css"/> <body> hello aardio123456 </body> </html>如果记不住那么长的link语句, 那么还有另外一种方式
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
由于用htmlayout来做界面, 那么需要把窗体设置为无边框
设置完成后, 界面不能再被调整大小了, 那么在mainform.aardio中需要加入
import win.ui.resizeBorder; win.ui.resizeBorder(mainForm);
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
如题:
参考之前别人发的瑜伽那个htmlayout的代码 , 一步一步从零开始手打出来, 看看一个完整的hL界面是怎么写出来的.
当然, 过程中不会完全和原来的代码一样, 中间如果有其他的想法或者简单方式, 我都会去试一下, 力争最简化实现同样界面.
示例的工程源码如下: (只要下面帖子里更新了,就会更新这个分享的zip文件)
链接：https://pan.baidu.com/s/1Bg
VS生成com组件ocx
添加属性
属性名是对外显示的接口名, 变量名会在程序里自动生成的名字, 可以相同也可以不同, 通知函数可以不写,需要的话可以写
VS生成com组件ocx
利用visual studio和c++来生成ocx控件
以下测试参考帖子:https://blog.csdn.net/longhuahaha/article/details/8556964
vs2015关键步骤如下:
上面的帖子里说的很详细了, 为了生成一个干净的ocx, 那么在
vs生成dll的学习
那么是不是可以直接把上面生成的Thraddll中多线程函数和CallbackDll联合起来使用呢?
当然也是可以的, 在aardio中示例如下:
aar里将两个dll进行关联, 然后就可以愉快的进行使用了.
import win.ui; /*DSG{{*/ var winform = win.form(text="aardio form";right=507;bottom=346) winform.add( button={cls="button";text="Button";left
vs生成dll的学习
C++编写dll : 如何生成dll中的回调函数
首先在cpp中声明个函数指针
设置外部函数指针给上面的函数指针
使用刚刚重置后的函数
CPP代码如下:
#include "stdafx.h" int (*fcallback)(int data); voi