add some rough examples

RyanLiu0235 · Feb 9, 2018 · 46b1e2c · 46b1e2c
1 parent b737817
commit 46b1e2c
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 0 deletions.
diff --git a/examples/bookDetail/index.html 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
@@ -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>