Last active
July 19, 2016 18:49
-
-
Save adriatic/725d23ea6b408d825f47cc0cc2b325ac to your computer and use it in GitHub Desktop.
Tooltip: content template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <require from="./content-template.css"></require> | |
| <div id="example"> | |
| <div class="demo-section k-content wide"> | |
| <ul id="products" | |
| class="dairy-photos" | |
| ak-tooltip="k-filter: a; k-content.call: getTemplate($event); k-width.bind: 400; k-height.bind: 200; k-position: top"> | |
| <li> | |
| <a href="#" data-id="11" title="A cheese made in the artisan tradition by rural dairy farmers in the north of Spain"><img src="http://demos.telerik.com/kendo-ui/content/web/foods/11.jpg" /> Queso de Cabrales</a> | |
| </li><li> | |
| <a href="#" data-id="12" title="A cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed"><img src="http://demos.telerik.com/kendo-ui/content/web/foods/12.jpg" /> Queso<br /> Manchego</a> | |
| </li><li> | |
| <a href="#" data-id="31" title="A veined Italian blue cheese, made from unskimmed cow's milk"><img src="http://demos.telerik.com/kendo-ui/content/web/foods/31.jpg" /> Gorgonzola Telino</a> | |
| </li><li> | |
| <a href="#" data-id="32" title="An Italian cheese made from cream"><img src="http://demos.telerik.com/kendo-ui/content/web/foods/32.jpg" /> Mascarpone Fabioli</a> | |
| </li><li> | |
| <a href="#" data-id="33" title="A white cheese made from goat milk"><img src="http://demos.telerik.com/kendo-ui/content/web/foods/33.jpg" /> Geitost</a> | |
| </li><li> | |
| <a href="#" data-id="59" title="A semi-firm, cow's milk cheese"><img src="http://demos.telerik.com/kendo-ui/content/web/foods/59.jpg" /> Raclette Courdavault</a> | |
| </li><li> | |
| <a href="#" data-id="60" title="A soft, creamy, surface-ripened cow's milk cheese"><img src="http://demos.telerik.com/kendo-ui/content/web/foods/60.jpg" /> Camembert Pierrott</a> | |
| </li><li> | |
| <a href="#" data-id="72" title="A fresh cheese, originally from southern Italy, made from either buffalo's or cow's milk by the pasta filata method"><img src="http://demos.telerik.com/kendo-ui/content/web/foods/72.jpg" /> Mozzarella di Giovanni</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <script ref="template" type="text/x-kendo-template"> | |
| <img src="https://demos.telerik.com/kendo-ui/content/web/foods/200/#=target.data('id')#.jpg" alt="#=target.data('title')#" /> | |
| <p>#=target.data('title')#</p> | |
| </script> | |
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class ContentTemplate { | |
| getTemplate(e) { | |
| return kendo.template($(this.template).html())(e); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| dairy-photos { | |
| list-style-type: none; | |
| margin: 15px 0 15px 10px; | |
| padding: 0; | |
| } | |
| .dairy-photos li { | |
| display: inline-block; | |
| margin: 5px; | |
| padding: 0; | |
| vertical-align: top; | |
| } | |
| .dairy-photos a { | |
| display: block; | |
| width: 100px; | |
| height: 155px; | |
| padding: 0 0 0 10px; | |
| font-size: .9em; | |
| line-height: 1.2em; | |
| text-transform: uppercase; | |
| color: #777; | |
| background-color: rgba(255,255,255,0.8); | |
| -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); | |
| -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); | |
| box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); | |
| } | |
| .dairy-photos a:hover { | |
| color: #fff; | |
| background-color: #000; | |
| } | |
| .dairy-photos a img { | |
| margin: 0 0 5px -10px; | |
| } | |
| .k-tooltip-content { | |
| vertical-align: middle; | |
| } | |
| .k-tooltip-content img, | |
| .k-tooltip-content p { | |
| float: left; | |
| } | |
| .k-tooltip-content p { | |
| font-size: 1.4em; | |
| padding: 20px; | |
| width: 160px; | |
| text-align: left; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Aurelia KendoUI bridge</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css"> | |
| <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css"> | |
| <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css"> | |
| <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css"> | |
| <script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script> | |
| </head> | |
| <body aurelia-app="main"> | |
| <h1>Loading...</h1> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script> | |
| <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script> | |
| <script> | |
| System.import('aurelia-bootstrapper'); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export function configure(aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging() | |
| .plugin('aurelia-kendoui-bridge', kendo => kendo.pro()); | |
| aurelia.start().then(a => a.setRoot()); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment