我們可以通過go-sciter給我們提供的方法,方便的對html,css編寫的UI界面進行增刪改查。
demo3.go代碼如下:
package main; import ( "github.com/sciter-sdk/go-sciter" "github.com/sciter-sdk/go-sciter/window" "log" "fmt" ) //一些基礎操作 func base(root *sciter.Element) { //通過ID選擇元素 ul, _ := root.SelectById("list"); //獲取元素的文本 text, _ := ul.Text(); fmt.Println("text:", text); //獲取元素的html //參數為真,則返回元素外部html //參數為假,則返回元素內部html text, _ = ul.Html(false); fmt.Println("html:", text); //獲取子元素個數 n, _ := ul.ChildrenCount(); fmt.Println(n); } //動態的添加元素 func addElement(root *sciter.Element) { //創建一個元素 add, _ := sciter.CreateElement("li", "444"); //設置元素的屬性 add.SetAttr("data", "add"); //通過標簽和ID來選擇元素,類似jquery ul, _ := root.SelectFirst("ul#list"); //插入元素,下標從0開始 err := ul.Insert(add, 3); if err != nil { log.Fatal("添加元素失敗"); } add2, _ := sciter.CreateElement("li", ""); err2 := ul.Insert(add2, 4); //注意這里,元素先insert后再去設置html才有效 //設置添加元素的html add2.SetHtml("<a href='http://www.baidu.com'>555</a>", sciter.SIH_REPLACE_CONTENT); if err2 != nil { log.Fatal("添加元素失敗"); } } //刪除元素 func delElement(root *sciter.Element) { ul, _ := root.SelectFirst("ul#list"); //獲取第一個子元素,下標從0開始 li, _ := ul.NthChild(0); //刪除元素 li.Delete(); //我們也可以用css選擇器直接選擇要刪除的元素 //注意css里面的nth-child(n)下標從1開始 li2, _ := root.SelectFirst("ul#list>li:nth-child(2)"); //刪除元素 li2.Delete(); } //修改元素 func updElement(root *sciter.Element) { li, _ := root.SelectFirst("ul#list>li:nth-child(1)"); //給元素設置樣式 li.SetStyle("color", "#f00"); //給元素設置html //參數一:html內容 //參數二:html放在哪里,SIH_REPLACE_CONTENT表示替換舊內容 li.SetHtml("<a href='http://www.baidu.com'>baidu.com</a>", sciter.SIH_REPLACE_CONTENT); //在最后面追加內容 li.SetHtml("哈哈", sciter.SIH_APPEND_AFTER_LAST); //設置元素屬性 li.SetAttr("test", "test"); li2, _ := root.SelectFirst("ul#list>li:nth-child(2)"); //設置文本 li2.SetText("我改我改"); } //查找元素 func selElement(root *sciter.Element) { //通過css選擇器選擇元素,會返回*Element的slice root.Select("ul#list>li"); //通過選擇器返回第一個元素 //也是調用的Select,不過只返回第一個元素 root.SelectFirst("ul#list>li"); //通過元素ID root.SelectById("list"); //選擇父元素 //參數二:表示深度 root.SelectParent("li", 1); //返回選擇器匹配唯一子元素,如果沒有或匹配多個,會引發Panic root.SelectUnique("ul#list>li:nth-child(1)"); } func main() { //創建一個新窗口 //這里參數一和參數二都使用的默認值 //DefaultWindowCreateFlag = SW_TITLEBAR | SW_RESIZEABLE | SW_CONTROLS | SW_MAIN | SW_ENABLE_DEBUG //DefaultRect = &Rect{0, 0, 300, 400} w, err := window.New(sciter.DefaultWindowCreateFlag, sciter.DefaultRect); if err != nil { log.Fatal(err); } //設置標題 w.SetTitle("文本html"); html := ` <html> <body> <ul id="list" name="list"> <li>111</li> <li>222</li> <li>333</li> </ul> </body> </html>`; //加載html,從一個字符串變量中 w.LoadHtml(html, ""); //窗口獲取根元素,這里應該是html root, _ := w.GetRootElement(); //這里把一些操作單獨寫成函數方便查看 base(root); addElement(root); delElement(root); updElement(root); selElement(root); //顯示窗口 w.Show(); //運行窗口,進入消息循環 w.Run(); }