165-template-148
/
blank
haarautettu lähteestä d8dfun/blank


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Juris 测试页面</title>
  <script src="https://unpkg.com/juris"></script>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    .card { border: 1px solid #ccc; padding: 20px; margin: 10px; border-radius: 5px; }
    .button { background: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; }
  </style>
</head>
<body>
  <h1>Juris 框架简单测试</h1>
  <div id="app"></div>

  <script>
    // 创建一个简单的Juris应用
    const app = new Juris({
      states: {
        count: 0,
        message: "Hello Juris!"
      },
      layout: {
        tag: "div",
        children: [
          {
            tag: "div",
            class: "card",
            children: [
              { tag: "h2", text: "计数器测试" },
              { tag: "p", text: () => `当前计数: ${app.getState("count")}` },
              {
                tag: "button",
                class: "button",
                text: "增加计数",
                onclick: () => app.setState("count", app.getState("count") + 1)
              }
            ]
          },
          {
            tag: "div",
            class: "card",
            children: [
              { tag: "h2", text: "消息测试" },
              { tag: "p", text: () => app.getState("message") },
              {
                tag: "input",
                type: "text",
                placeholder: "输入新消息",
                oninput: (e) => app.setState("message", e.target.value)
              }
            ]
          },
          {
            tag: "div",
            class: "card",
            children: [
              { tag: "h2", text: "简单表格测试" },
              {
                tag: "table",
                children: [
                  {
                    tag: "thead",
                    children: [
                      {
                        tag: "tr",
                        children: [
                          { tag: "th", text: "姓名" },
                          { tag: "th", text: "年龄" }
                        ]
                      }
                    ]
                  },
                  {
                    tag: "tbody",
                    children: [
                      {
                        tag: "tr",
                        children: [
                          { tag: "td", text: "张三" },
                          { tag: "td", text: "25" }
                        ]
                      },
                      {
                        tag: "tr",
                        children: [
                          { tag: "td", text: "李四" },
                          { tag: "td", text: "30" }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    });

    // 渲染应用
    app.render('#app');
  </script>
</body>
</html>