詳細的文檔請看下面兩個鏈接：
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數據庫等等。