[Kimchi-devel] [v2 2/2] ui: grid sample

Thu Jan 29 11:07:36 UTC 2015

From: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>

Signed-off-by: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>
---
 ui/js/widgets/samples/grid.html |   80 +++++++++++++++++++++++++++++++++++++++
 1 files changed, 80 insertions(+), 0 deletions(-)
 create mode 100644 ui/js/widgets/samples/grid.html

diff --git a/ui/js/widgets/samples/grid.html b/ui/js/widgets/samples/grid.html
new file mode 100644
index 0000000..873a7db
--- /dev/null
+++ b/ui/js/widgets/samples/grid.html
@@ -0,0 +1,80 @@
+<!--
+ *
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2015
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+-->
+
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Kimchi</title>
+<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+
+<link rel="stylesheet" href="../../../libs/themes/base/jquery-ui.min.css">
+<link rel="stylesheet" href="../../../fontello/css/fontello.css">
+<link rel="stylesheet" href="../../../fontello/css/animation.css">
+<link rel="stylesheet" href="../../../css/theme-default.min.css">
+
+<script src="../../../libs/jquery-1.10.0.min.js"></script>
+<script src="../../../libs/jquery-ui.min.js"></script>
+<script src="../../../libs/jquery-ui-i18n.min.js"></script>
+<script src="../../../js/kimchi.min.js"></script>
+
+<style type="text/css">
+body {
+    background: none;
+}
+input {
+    float: right;
+}
+.name {
+    width: 30%;
+}
+.project {
+    width: 30%;
+}
+.role {
+    width: 39%;
+}
+</style>
+<script>
+function init(){
+    $('#ibmers').grid({enableSorting: true});
+    $('input').on('keyup', function(){
+        $('#ibmers').grid('filter', ($(this).val()));
+    });
+}
+</script>
+</head>
+<body onload="init()">
+<div style="height: 50px; padding-top: 10px; padding-right: 50px;"><input type='text' placeholder='Filter' style='padding-left: 5px; height: 20px;'></div>
+<div id="ibmers">
+<div><span class="name">Name</span><span class="project">Project</span><span class="role">Role</span></div>
+<div>
+<div><span class="name" val="tify">tify</span><span class="project" val="kimchi">kimchi</span><span class="role" val="designer">designer</span></div>
+<div><span class="name" val="rick">rick</span><span class="project" val="finance">finance</span><span class="role" val="sponsor">sponsor</span></div>
+<div><span class="name" val="icy">icy</span><span class="project" val="human resource">human resource</span><span class="role" val="administrator*">administrator</span></div>
+<div><span class="name" val="paul">paul</span><span class="project" val="tomcat">tomcat</span><span class="role" val="dev lead">dev lead</span></div>
+<div><span class="name" val="kapil">kapil</span><span class="project" val="apache">apache</span><span class="role" val="developer">developer</span></div>
+<div><span class="name" val="adam">adam</span><span class="name" val="mongodb">mongodb</span><span class="role" val="dev lead">dev lead</span></div>
+<div><span class="name" val="shikha">shikha</span><span class="project" val="mysql">mysql</span><span class="role" val="dev lead">dev lead</span></div>
+</div>
+</div>
+</body>
+</html>
-- 
1.7.1


