標籤：last ast efi 顯示 ble keycode print mysql option
詳細的文檔請看下面兩個連結：
https://sciter.com/docs/content/sciter/Element.htmhttps://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事件響應
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
