From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> Signed-off-by: Yu Xin Huo <huoyuxin@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