go语言使用go-sciter创建桌面应用(六) Element元素操作和Event事件响应
详细的文档请看下面两个链接：
https://sciter.com/docs/content/sciter/Element.htm
https://sciter.com/docs/content/sciter/Event.htm
demo8.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tiscript脚本学习</title>
<style>
#mouse {
border: 1px solid #ccc;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</div>
<div id="form">
ID: <input type="text" name="id" value="001"><br>
姓名：<input type="text" name="name"><br>
性别：<input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1">女
<button id="btn1">按钮</button>
<button id="btn2">定时</button>
</div>
<div id="event">
<input type="text" id="ipt"><br>
<input type="text" id="ipt2"><br>
<button id="btn3">单击</button>
<br>
<button id="btn4">双击</button>
<br>
<select id="sel">
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
</select>
<div id="mouse"></div>
</div>
<script type="text/tiscript">
//类似jquery的ready();
self.ready = function() {
testDom();
testEvent();
}; //测试Dom操作
function testDom() {
//选择元素，不要加引号
var box = self.$(#box);
//效果同上，注意要加引号
var box2 = self.select("#box");
//选择多个元素
var lis = self.$$(#box > ul > li);
stdout.println(lis.length);
//同上
var lis2 = self.selectAll("#box > ul > li");
stdout.println(lis2.length);
//first表示元素的第一个子元素
stdout.println(lis.first.text);
//last表示元素的最后一个子元素
stdout.println(lis.last.text); var li = self.$(#box > ul > li:nth-child(1));
//next表示下一个兄弟元素
stdout.println(li.next.text); //访问元素的属性
stdout.println(box.attributes["id"]);
//设置元素的属性
box.attributes["status"] = "open"; //设置元素的样式
li.style["background"] = "#f00"; //判断元素是否可见
var li2 = self.$(#box > ul > li:nth-child(2));
li2.style["display"] = "none";
if(!li2.isVisible) {
stdout.println("li2不可见");
} //遍历元素
for(var child in lis) {
stdout.println(child.text);
} //动态创建元素
var li4 = new Element("li");
//将li元素追加到ul元素内部
$(#box > ul).append(li4);
//设置元素的文本
//注意这里需先将元素添加到dom树上，然后再设置元素文本
li4.text = "444"; //这里直接追加html内容，不要加引号
$(#box > ul).$append(<li>555</li>);
$(#box > ul).$prepend(<li>000</li>);
//外部追加
$(#box).$after(<div>after</div>);
$(#box).$before(<div>before</div>); //删除元素
$(#box > ul > li:nth-child(4)).remove(); //设置元素的状态
//设置只读
$(input[name='id']).setState(Element.STATE_READONLY);
//设置焦点
$(input[name='name']).setState(Element.STATE_FOCUS);
//设置选中
$(input[name='sex'][value='1']).setState(Element.STATE_CHECKED);
//设置禁用
$(#btn1).setState(Element.STATE_DISABLED); //定时器
var cnt = 5;
$(#btn2).timer(1000, function() {
if(cnt == 0) {
//返回false则停止定时器
return false;
}
this.text = "第" + cnt + "次";
cnt--;
return true;
});
} //测试元素事件
function testEvent() {
//单击事件
$(#btn3).onClick = function() {
stdout.println("btn3被点击了");
};
//双击事件
$(#btn4).on("dblclick", function() {
stdout.println("btn4被双击了");
});
//按键弹起
$(#ipt).on("keyup", function() {
stdout.println(this.value);
});
//value值改变时
$(#sel).on("change", function() {
stdout.println(this.value);
}); //移除事件函数
$(#btn4).off("dblclick");
//或者如下
$(#btn4).unsubscribe("dblclick"); //判断事件类型和按键码值
$(#ipt2).on("keyup", function(evt) {
//evt.type表示事件类型
//evt.keyCode表示键码值
if(evt.type == Event.KEY_UP && evt.keyCode == Event.VK_RETURN) {
stdout.println("你回车了");
}
}); //鼠标移动事件
$(#mouse).on("mousemove", function(evt) {
var str = "";
str += "相对于div本身的 x:" + evt.x + " y:" + evt.y + "<br>";
str += "相对于根元素html本身的 x:" + evt.xRoot + " y:" + evt.yRoot + "<br>";
str += "相对于window窗口本身的 x:" + evt.xView + " y:" + evt.yView + "<br>";
this.html = str;
});
} </script>
</body>
</html>
由于html中使用了tiscript，所以如果要调试，只能使用sciter-sdk中自带的调试工具，进行调试。
在sciter-sdk下找到bin\64\sciter.exe和inspector.exe这两个文件，拷贝到你指定的位置，注意这两个文件要放在一起。
双击打开sciter.exe文件
注意只能调试静态页面，go中定义的方法和函数，没法调用显示。
了解了上面的的Element操作和Event事件处理，我们简单写个小例子：
demo7.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tiscript脚本学习</title>
</head>
<body>
<form action="">
<table>
<tr>
<td>用户名：</td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="pwd">
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="love" value="0">看书
<input type="checkbox" name="love" value="1">打球
<input type="checkbox" name="love" value="2">旅游
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<select name="sex">
<option value="-1">请选择</option>
<option value="0">男</option>
<option value="1">女</option>
</select>
</td>
</tr>
<tr>
<td>简介：</td>
<td>
<textarea name="desc" cols="30" rows="5"></textarea>
</td>
</tr>
</table>
</form>
<button id="btn1">注册</button>
<script type="text/tiscript">
$(#btn1).on("click", function() {
//获取文本框中的值
var name = $(input[name='name']).value.trim();
if(name.length == 0) {
//弹出警告框
view.msgbox(#warning, "用户名不能为空");
return false;
} //获取文本框中的值
var pwd = $(input[name='pwd']).value.trim();
if(pwd.length == 0) {
//弹出警告框
view.msgbox(#warning, "密码不能为空");
return false;
} //这里使用$$返回所有，$只是返回第一个满足选择器的元素
var ipt = $$(input[name='love']);
var love = [];
for(var child in ipt) {
//获取元素的状态，判断是否选中
if(child.getState(Element.STATE_CHECKED)) {
love.push(child.value);
}
} //获取select下option，先选取select，然后再$$找查它的子元素
var opt = $(select[name='sex']).$$(option);
var sex = 0;
for(var child in opt) {
//判断元素是否选中
if(child.getState(Element.STATE_CHECKED)) {
sex = child.value;
}
} //获取简介
var desc = $(textarea[name='desc']).value.trim(); //表单数据
var formData = {
"name": name,
"pwd": pwd,
"love": love,
"sex": sex,
"desc": desc
}; //我们把从表单中的数据获取，并转成json字符串
//调用go中定义的函数reg，这样go中就可以获取到ui中的数据了。
view.reg(JSON.stringify(formData));
});
</script>
</body>
</html>
demo7.go代码如下：
package main; import (
"github.com/sciter-sdk/go-sciter/window"
"github.com/sciter-sdk/go-sciter"
"log"
"fmt"
) func defFunc(w *window.Window) {
//注册dump函数方便在tis脚本中打印数据
w.DefineFunction("dump", func(args ...*sciter.Value) *sciter.Value {
for _, v := range args {
fmt.Print(v.String() + " ");
}
fmt.Println();
return sciter.NullValue();
});
//注册reg函数，用于处理注册逻辑，这里只是简单的把数据打印出来
w.DefineFunction("reg", func(args ...*sciter.Value) *sciter.Value {
for _, v := range args {
fmt.Print(v.String() + " ");
}
fmt.Println();
return sciter.NullValue();
});
} func main() {
w, err := window.New(sciter.DefaultWindowCreateFlag, sciter.DefaultRect);
if err != nil {
log.Fatal(err);
}
w.LoadFile("demo7.html");
w.SetTitle("tiscript脚本学习");
defFunc(w);
w.Show();
w.Run();
}
运行结果如下：
拿到了前端UI传入的json数据，后端go就可以通过解析该json，来进行相应处理，比如存入mysql数据库等等。
go语言使用go-sciter创建桌面应用(六) Element元素操作和Event事件响应的更多相关文章
- go语言使用go-sciter创建桌面应用(二) ui元素查找，增加，删除，修改
我们可以通过go-sciter给我们提供的方法,方便的对html,css编写的UI界面进行增删改查. demo3.go代码如下: package main; import ( "github ...
- go语言使用go-sciter创建桌面应用(三) 事件处理，函数与方法定义，go与tiscript之间相互调用
sciter处理脚本tiscript,用于处理UI交互中的一些逻辑,跟js很像,但又有点区别,对前端熟悉的人应该能很快上手. tiscrip脚本文档 https://sciter.com/develo ...
- go语言使用go-sciter创建桌面应用(七) view对象常用方法，文件选择，窗口弹出，请求
view对象的详细文档请看: https://sciter.com/docs/content/sciter/View.htm demo9.html代码如下: <!DOCTYPE html> ...
- Ubuntu创建桌面快捷方式
默认情况下，ubuntu会将自动安装的软件快捷方式保存在/usr/share/applications目录下，如果我们要创建桌面快捷方式，只需要右键-复制-桌面 就Ok，如图： 上面的方法是通过系统自 ...
- Windows中创建桌面快捷方式
Windows中创建桌面快捷方式 -------------- -------------- -------------- --------------
- robot创建桌面图标（转载）
桌面ride图标,安装之后会自动创建(偶尔也会创建失败),创建桌面图标方法如下: 1. 新建快捷方式 在桌面右击鼠标,弹出的菜单选择 新建-快捷方式 ,然后在"请键入对象"的位置输 ...
- Qt之创建桌面和开始菜单快捷方式
将安装好的酷狗拷贝到C:\data目录中 1.创建桌面快捷方式 QFile::link("C:/data/KuGou.exe", QStandardPaths::writableL ...
- Swift3.0语言教程使用编码创建和初始化字符串
Swift3.0语言教程使用编码创建和初始化字符串 使用编码创建和初始化字符串 创建和初始化字符串除了可以使用上文中提到的方法外,还可以使用init(coder:)方法,此方法一般不常使用,其语法形式 ...
- Swift3.0语言教程使用指针创建和初始化字符串
Swift3.0语言教程使用指针创建和初始化字符串 Swift3.0语言教程使用指针创建和初始化字符串苹果的Swift团队花了不少功夫来支持C的一些基础特性.C语言中为我们提供了指针,Swift也不例 ...
随机推荐
- 查看Linux物理CPU个数
查看内核版本 lsb_release -a 查看物理CPU个数.核数.逻辑CPU个数 (1)具有相同core id的CPU是同一个core的超线程. (2)具有相同physical id的CPU是同一 ...
- swift视图的添加及层次变动和基本动画
// 一般的我们添加一个视图到父视图都是通过 /* let v1 = UIView(frame:CGRectMake(100,200,30,50)) self.view.addSubview(v1) ...
- puppet自动化运维
Puppet实现自动化运维 一.案例分析 1.案例概述: 随着服务器数量的增多,系统管理员任务量也逐渐增加,这时就需要简洁的.强大的框架来完成系统管理任务为实现这一目的,我们将引入一批工具,这批工具是 ...
- Java中String的intern方法，javap&cfr.jar反编译，javap反编译后二进制指令代码详解，Java8常量池的位置
一个例子 public class TestString{ public static void main(String[] args){ String a = "a"; Stri ...
- 文件上传以及JS链式结构
文件上传: 文件上传使用FileUpload控件,使用控件的SaveAs方法,需要绝对路径. 获取文件的绝对路径:Server.MapPath(相对路径); 或许要上传文件的本身名字用.FileNam ...
- mysql 性能测试工具 mysqlslap
原文链接: https://my.oschina.net/moooofly/blog/152547 连接数据库: # mysqlslap -h localhost -uroot -p123456 -- ...
- 1.5.7、CDH 搭建Hadoop在安装之前(定制安装解决方案---配置单用户模式)
配置单用户模式 在传统的Cloudera Manager部署中,管理每台主机上的Hadoop进程的Cloudera Manager Agent以root用户身份运行.但是,某些环境会限制对root帐户 ...
- Realtime Rendering 5
[Real Time Rendering 5] 1.In radiometry, the function that is used to describe how a surface reflect ...
- oracle 一致读原理
在Oracle数据库中,undo主要有三大作用:提供一致性读(Consistent Read).回滚事务(Rollback Transaction)以及实例恢复(Instance Recovery). ...
- CRM销售管理功能
联系项目project:-------是一个大的项目,比如通知开会之类 每个坐席需要分配自己的联系任务,每个联系任务,有自己的完成未完成状态.同时关联着通话记录等 销售计划----销售项目 销售流程: ...