利用cwinstr.ocx操作GPIB设备
回复#3 @雄鹰 :
我没有, 你可以到NI官方看看 , 下载它的nistudio里面就包含了这个控件, 也许里面有文档, 希望不大, 你也可以找个labview的同事, 用软件打开看看里面的接口的定义和解释
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
后面有别的事, 会更新的慢很多, 也有可能几天不更一下
言归正传:
接上文, 菜单我们已经弄出来了, 不知道你有没有考虑过怎么去获取到我点了哪个菜单, 并且或获取我是从哪个table的tr行点的右键, 如果这些都获取不到, 那么就不能进行交互了
获取右键菜单很简单, 在aardio中执行下面代码
wbLayout.onMenuItemClick = function (ltTarget,ltOwner,reason,behaviorParams) { //获取选中的
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
表格中增加右键菜单:
首先在html中定义右键菜单列表, 并设置它的名字为tableMenu
<menu.context #tableMenu> <li id="i1">编 辑</li> <li id="i2">删 除</li> <li id="i3">插 入</li> <li id="i4">新 增</li> </menu>之后在css属性里, 在
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
table中加入动态鼠标交互:
首先, 加入鼠标hover单元行变色
#tab-style > tr:hover { background-color:rgba(0,88,55,0.2); //color:red; }再加入,鼠标点击选中单行, 注意排除掉 表头
#tab-style > tr:not(:first-child) { active-on!: $1(#tab
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
试着增加一下模拟数据， 看看效果如何
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
下面继续添加内容:
注意: 为了以后更好的维护, 每次分行的时候, 最好用div给套一层, 也便于样式管理
添加一个表格
<div #pageTable> <table #tab-style> <tr> <td>序号</td> <td width=150>Yoga馆</td> <td width=120>时间段</td> <td w
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
给pageArea内容区增加个列表:
新建个lesson.html和lesson.css文件
并添加一个pageBar工具条
<style type="text/css"> @import "lesson.css"; </style> <div #pageBar> </div>定义下pageBar的css样式
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
tabs的页面其实可以和aardio的tabs一样, 直接引用其他页面.
要用到include功能, 例如下面我第二个选项卡里引用two.html这个页面
<div #tabArea> <div .page>首页----页面演示</div> <div .page><include src="two.html" > Miss lesson.htm</include></div> <div
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
html中增加tab页:
<div #tabArea> <div .page>首页----页面演示</div> <div .page>上课记录----页面演示</div> <div .page>管理人员----页面演示</div> <div .page>信息记录----页面演示</div> </div>主要是对css的设置:
从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面
参考之前的csss!时间写法, 把checked状态写好
从零开始用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界面之仿瑜伽管理界面
给按钮增加鼠标的各种状态:
上面为什