diff options
Diffstat (limited to 'examples/example8-alternative-display.html')
| -rw-r--r-- | examples/example8-alternative-display.html | 344 |
1 files changed, 173 insertions, 171 deletions
diff --git a/examples/example8-alternative-display.html b/examples/example8-alternative-display.html index 8fe622e..acf0f6b 100644 --- a/examples/example8-alternative-display.html +++ b/examples/example8-alternative-display.html @@ -1,174 +1,176 @@ <!DOCTYPE HTML> <html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> - <title>SlickGrid example 8: Alternative display</title> - <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" /> - <style> - .slick-cell { - background: white!important; - border-color: transparent!important; - line-height: 19px!important; - } - - /* alternating offsets */ - .slick-row .cell-inner { - margin-right: 60px; - } - - .slick-row[row$="1"] .cell-inner, .slick-row[row$="3"] .cell-inner, .slick-row[row$="5"] .cell-inner, - .slick-row[row$="7"] .cell-inner, .slick-row[row$="9"] .cell-inner { - margin-left: 60px; - margin-right: 0; - } - - .contact-card-cell { - border-color: transparent!important; - } - - .cell-inner { - height: 80px; - margin: 10px; - padding: 10px; - background: #fafafa; - border: 1px solid gray; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - -moz-box-shadow: 1px 1px 5px silver; - -webkit-box-shadow: 1px 1px 5px silver; - -webkit-transition: all 0.5s; - } - - .cell-inner:hover { - background: #f0f0f0; - } - - .cell-left { - width: 40px; - height: 100%; - float: left; - border-right: 1px dotted gray; - background: url("../images/user_identity.gif") no-repeat top center; - } - - .cell-main { - margin-left: 50px; - } - </style> - </head> - <body> - <table width="100%"> - <tr> - <td valign="top" width="50%"> - <div id="myGrid" style="width:600px;height:500px;"></div> - </td> - <td valign="top"> - <h2>Demonstrates:</h2> - - <ul> - <li>Template-based rendering using John Resig's <a href="http://ejohn.org/blog/javascript-micro-templating/" target=_blank>micro-templates</a> while still using SlickGrid's virtual rendering technology.</li> - </ul> - </td> - </tr> - </table> - - <!-- cell template --> - <script type="text/html" id="cell_template"> - <div class="cell-inner"> - <div class="cell-left"></div> - <div class="cell-main"> - <b><%=name%></b><br/> - <%=title%><br/> - <%=email%><br/> - <%=phone%> - </div> - </div> - </script> - - <script src="../lib/firebugx.js"></script> - - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery.event.drag-2.0.min.js"></script> - - <script src="../slick.core.js"></script> - <script src="../slick.grid.js"></script> - - <script> - // Simple JavaScript Templating - // John Resig - http://ejohn.org/ - MIT Licensed - (function(){ - var cache = {}; - - this.tmpl = function tmpl(str, data){ - // Figure out if we're getting a template, or if we need to - // load the template - and be sure to cache the result. - var fn = !/\W/.test(str) ? - cache[str] = cache[str] || - tmpl(document.getElementById(str).innerHTML) : - - // Generate a reusable function that will serve as a template - // generator (and which will be cached). - new Function("obj", - "var p=[],print=function(){p.push.apply(p,arguments);};" + - - // Introduce the data as local variables using with(){} - "with(obj){p.push('" + - - // Convert the template into pure JavaScript - str - .replace(/[\r\t\n]/g, " ") - .split("<%").join("\t") - .replace(/((^|%>)[^\t]*)'/g, "$1\r") - .replace(/\t=(.*?)%>/g, "',$1,'") - .split("\t").join("');") - .split("%>").join("p.push('") - .split("\r").join("\\'") - + "');}return p.join('');"); - - // Provide some basic currying to the user - return data ? fn( data ) : fn; - }; - })(); - - - var grid; - var data = []; - - var columns = [ - {id:"contact-card", name:"Contacts", formatter:renderCell, width:500, cssClass:"contact-card-cell"} - ]; - - var options = { - rowHeight: 140, - editable: false, - enableAddRow: false, - enableCellNavigation: false, - enableColumnReorder: false - }; - - var compiled_template = tmpl("cell_template"); - - function renderCell(row, cell, value, columnDef, dataContext) { - return compiled_template(dataContext); - } - - $(function() - { - for (var i=0; i<100; i++) { - var d = (data[i] = {}); - - d["name"] = "User " + i; - d["email"] = "test.user@nospam.org"; - d["title"] = "Regional sales manager"; - d["phone"] = "206-000-0000"; - } - - - grid = new Slick.Grid("#myGrid", data, columns, options); - }) - - </script> - </body> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>SlickGrid example 8: Alternative display</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + .slick-cell { + background: white !important; + border-color: transparent !important; + line-height: 19px !important; + } + + /* alternating offsets */ + .slick-row .cell-inner { + margin-right: 60px; + } + + .slick-row[row$="1"] .cell-inner, .slick-row[row$="3"] .cell-inner, .slick-row[row$="5"] .cell-inner, + .slick-row[row$="7"] .cell-inner, .slick-row[row$="9"] .cell-inner { + margin-left: 60px; + margin-right: 0; + } + + .contact-card-cell { + border-color: transparent !important; + } + + .cell-inner { + height: 80px; + margin: 10px; + padding: 10px; + background: #fafafa; + border: 1px solid gray; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -moz-box-shadow: 1px 1px 5px silver; + -webkit-box-shadow: 1px 1px 5px silver; + -webkit-transition: all 0.5s; + } + + .cell-inner:hover { + background: #f0f0f0; + } + + .cell-left { + width: 40px; + height: 100%; + float: left; + border-right: 1px dotted gray; + background: url("../images/user_identity.gif") no-repeat top center; + } + + .cell-main { + margin-left: 50px; + } + </style> +</head> +<body> +<table width="100%"> + <tr> + <td valign="top" width="50%"> + <div id="myGrid" style="width:600px;height:500px;"></div> + </td> + <td valign="top"> + <h2>Demonstrates:</h2> + + <ul> + <li>Template-based rendering using John Resig's <a href="http://ejohn.org/blog/javascript-micro-templating/" + target=_blank>micro-templates</a> while still using + SlickGrid's virtual rendering technology. + </li> + </ul> + </td> + </tr> +</table> + +<!-- cell template --> +<script type="text/html" id="cell_template"> + <div class="cell-inner"> + <div class="cell-left"></div> + <div class="cell-main"> + <b><%=name%></b><br/> + <%=title%><br/> + <%=email%><br/> + <%=phone%> + </div> + </div> +</script> + +<script src="../lib/firebugx.js"></script> + +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery.event.drag-2.0.min.js"></script> + +<script src="../slick.core.js"></script> +<script src="../slick.grid.js"></script> + +<script> + // Simple JavaScript Templating + // John Resig - http://ejohn.org/ - MIT Licensed + (function () { + var cache = {}; + + this.tmpl = function tmpl(str, data) { + // Figure out if we're getting a template, or if we need to + // load the template - and be sure to cache the result. + var fn = !/\W/.test(str) ? + cache[str] = cache[str] || + tmpl(document.getElementById(str).innerHTML) : + + // Generate a reusable function that will serve as a template + // generator (and which will be cached). + new Function("obj", + "var p=[],print=function(){p.push.apply(p,arguments);};" + + + // Introduce the data as local variables using with(){} + "with(obj){p.push('" + + + // Convert the template into pure JavaScript + str + .replace(/[\r\t\n]/g, " ") + .split("<%").join("\t") + .replace(/((^|%>)[^\t]*)'/g, "$1\r") + .replace(/\t=(.*?)%>/g, "',$1,'") + .split("\t").join("');") + .split("%>").join("p.push('") + .split("\r").join("\\'") + + "');}return p.join('');"); + + // Provide some basic currying to the user + return data ? fn(data) : fn; + }; + })(); + + + var grid; + var data = []; + + var columns = [ + {id:"contact-card", name:"Contacts", formatter:renderCell, width:500, cssClass:"contact-card-cell"} + ]; + + var options = { + rowHeight:140, + editable:false, + enableAddRow:false, + enableCellNavigation:false, + enableColumnReorder:false + }; + + var compiled_template = tmpl("cell_template"); + + function renderCell(row, cell, value, columnDef, dataContext) { + return compiled_template(dataContext); + } + + $(function () { + for (var i = 0; i < 100; i++) { + var d = (data[i] = {}); + + d["name"] = "User " + i; + d["email"] = "test.user@nospam.org"; + d["title"] = "Regional sales manager"; + d["phone"] = "206-000-0000"; + } + + + grid = new Slick.Grid("#myGrid", data, columns, options); + }) + +</script> +</body> </html> |