我們可以通過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();
}

