From 46b1e2c7d1f1e141f02588396d2680c457733b0f Mon Sep 17 00:00:00 2001
From: stop2stare <emitremmus0235@163.com>
Date: Fri, 9 Feb 2018 12:24:40 +0800
Subject: [PATCH] add some rough examples

---
 examples/bookDetail/index.html | 68 ++++++++++++++++++++++++++++++++++
 examples/listview/index.html   | 26 +++++++++++++
 2 files changed, 94 insertions(+)
 create mode 100644 examples/bookDetail/index.html
 create mode 100644 examples/listview/index.html
diff --git a/examples/bookDetail/index.html b/examples/bookDetail/index.html
new file mode 100644
index 0000000..ff0012f
--- /dev/null
+++ b/examples/bookDetail/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>detail</title>
+  <script src="../../dist/leopard.js"></script>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="text/javascript">
+  var tpl = '<div>' +
+    '<img alt=\"<%= alt_title %>\" src=\"<%= image %>\" />' +
+    '<h3><a href=\"<%= alt %>\"><%= title %></a></h3>' +
+    '<p><%= summary %></p>' +
+    '<p>信息：</p>' +
+    '<ul>' +
+    '<% for (var attr in attrs) { %>' +
+    '<li><%= attrs[attr] %></li> ' +
+    '<% } %>' +
+    '</ul>' +
+    '<p>标签：</p>' +
+    '<ol>' +
+    '<% for (var i = 0; i < tags.length; i++) { %>' +
+    '<li><%= tags[i].name %></li> ' +
+    '<% } %>' +
+    '</ol>' +
+    '</div>'
+  var detail = {
+    "id": "1220562",
+    "alt": "https:\/\/book.douban.com\/book\/1220562",
+    "rating": { "max": 10, "average": "7.0", "numRaters": 282, "min": 0 },
+    "author": [{ "name": "片山恭一" }, { "name": "豫人" }],
+    "alt_title": "",
+    "image": "https://img3.doubanio.com\/spic\/s1747553.jpg",
+    "title": "满月之夜白鲸现",
+    "mobile_link": "https:\/\/m.douban.com\/book\/subject\/1220562\/",
+    "summary": "那一年，是听莫扎特、钓鲈鱼和家庭破裂的一年。说到家庭破裂，母亲怪自己当初没有找到好男人，父亲则认为当时是被狐狸精迷住了眼，失常的是母亲，但出问题的是父亲……。",
+    "attrs": {
+      "publisher": ["青岛出版社"],
+      "pubdate": ["2005-01-01"],
+      "author": ["片山恭一", "豫人"],
+      "price": ["18.00元"],
+      "title": ["满月之夜白鲸现"],
+      "binding": ["平装(无盘)"],
+      "translator": ["豫人"],
+      "pages": ["180"]
+    },
+    "tags": [
+      { "count": 106, "name": "片山恭一" },
+      { "count": 50, "name": "日本" },
+      { "count": 42, "name": "日本文学" },
+      { "count": 30, "name": "满月之夜白鲸现" },
+      { "count": 28, "name": "小说" },
+      { "count": 10, "name": "爱情" },
+      { "count": 7, "name": "純愛" },
+      { "count": 6, "name": "外国文学" }
+    ]
+  }
+
+  var html = Leopard(tpl, detail)
+  document.getElementById('app').innerHTML = html
+
+  </script>
+</body>
+
+</html>
diff --git a/examples/listview/index.html b/examples/listview/index.html
new file mode 100644
index 0000000..33620cb
--- /dev/null
+++ b/examples/listview/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>list view</title>
+  <script src="../../dist/leopard.js"></script>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="text/javascript">
+  var tpl = 'Now I repeat: ' +
+    '<ul>' +
+    '<% for (var i = 0; i < 20; i++) { %>' +
+    '<li><%= i %>: I am Leopard!</li>' +
+    '<% } %>' +
+    '</ul>'
+  var html = Leopard(tpl)
+
+  document.getElementById('app').innerHTML = html
+
+  </script>
+</body>
+
+</html>
