-
-
Save JeroenVinke/3e68125d8fe58fe04d96e1035aab5e91 to your computer and use it in GitHub Desktop.
Aurelia - JQueryUI DatePicker
This file contains hidden or 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
<!-- put your view here --> | |
<template> | |
<require from='./products.css'></require> | |
<ak-list-view k-data-source.bind="dataSource" | |
k-widget.bind="listview" | |
click.trigger="onListviewSelect($event.target)" | |
dblclick.trigger="onListItemDoubleClick($event.target)" | |
id="listview" ref="listviewref"> | |
<ak-template> | |
<div class="content"> | |
<input id="cb_${name}" type="checkbox" class="click" /> | |
<img src="https://demos.telerik.com/kendo-ui/content/web/foods/${ProductID}.jpg" alt="${ProductName}" /> | |
<a href="#/product/${ProductName}/content/${ProductID}"> | |
<h3 title="${ProductName}"> | |
${ProductName}</h3> | |
</a> | |
</div> | |
</ak-template> | |
<div ref="pager" class="k-pager-wrap"></div> | |
</template> |
This file contains hidden or 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 App { | |
pager; | |
dataSource = new kendo.data.DataSource({ | |
transport: { | |
read: { | |
url: '//demos.telerik.com/kendo-ui/service/Products', | |
dataType: 'jsonp' | |
} | |
}, | |
pageSize: 10 | |
}); | |
activate() | |
{ | |
} | |
attached() { | |
$(this.pager).kendoPager({ | |
dataSource: this.dataSource | |
}); | |
} | |
onListviewSelect(e) { | |
var target; | |
if (e.tagName == "DIV" || e.tagName == "H3" || e.tagName == "SPAN") { | |
target = $(e).closest('.content') | |
var checkbox = target.find("input:checkbox"); | |
console.log(checkbox); | |
if (checkbox.is(":checked")) { | |
checkbox.prop("checked", false); | |
} else { | |
checkbox.prop("checked", true); | |
} | |
} | |
this.highlightItems(); | |
return true; | |
} | |
highlightItems() { | |
var checkboxes = $('#listview').find("input:checkbox"); | |
$(checkboxes).each(function (i, checkbox) { | |
//checkbox = $(checkbox); | |
if ($(checkbox).is(":checked")) { | |
$(checkbox).parent().addClass("k-state-selected"); | |
} else { | |
$(checkbox).parent().removeClass("k-state-selected"); | |
} | |
}); | |
} | |
} |
This file contains hidden or 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.15/config2.js"></script> | |
<script> | |
System.import('aurelia-bootstrapper'); | |
</script> | |
</body> | |
</html> |
This file contains hidden or 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
/******************************************************************************* | |
* The following two lines enable async/await without using babel's | |
* "runtime" transformer. Uncomment the lines if you intend to use async/await. | |
* | |
* More info here: https://github.com/jdanyow/aurelia-plunker/issues/2 | |
*/ | |
//import regeneratorRuntime from 'babel-runtime/regenerator'; | |
//window.regeneratorRuntime = regeneratorRuntime; | |
/******************************************************************************/ | |
export function configure(aurelia) { | |
aurelia.use | |
.standardConfiguration() | |
.developmentLogging() | |
.plugin('aurelia-kendoui-bridge', kendo => kendo.pro()); | |
aurelia.start().then(a => a.setRoot()); | |
} |
This file contains hidden or 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
#listView { | |
padding: 10px 5px; | |
margin-bottom: -1px; | |
min-height: 510px; | |
} | |
.product { | |
width: 100%; | |
height: 50px; | |
float: left; | |
/*width: 220px; | |
height: 50px;*/ | |
margin: 0; | |
padding: 5px; | |
cursor: pointer; | |
} | |
/*#product .convert{ | |
width: 151px; | |
height: 10px; | |
}*/ | |
.product input | |
{ | |
float: left; | |
top: 0; | |
left: 100%; | |
} | |
.product img { | |
float: left; | |
width: 25x; | |
height: 25px; | |
} | |
.product a h3 { | |
margin: 0; | |
padding: 10px 0 0 10px; | |
font-size: .9em; | |
overflow: hidden; | |
font-weight: normal; | |
float: left; | |
width: 500px; | |
} | |
.product h3 | |
{ | |
margin: 0; | |
padding: 10px 0 0 10px; | |
font-size: .9em; | |
overflow: hidden; | |
font-weight: normal; | |
float: left; | |
width: 500px; | |
} | |
.product p { | |
visibility: hidden; | |
} | |
.product:hover p { | |
visibility: visible; | |
position: absolute; | |
width: 110px; | |
height: 110px; | |
top: 0; | |
margin: 0; | |
padding: 0; | |
line-height: 110px; | |
vertical-align: middle; | |
text-align: center; | |
color: #fff; | |
background-color: rgba(0,0,0,0.75); | |
transition: background .2s linear, color .2s linear; | |
-moz-transition: background .2s linear, color .2s linear; | |
-webkit-transition: background .2s linear, color .2s linear; | |
-o-transition: background .2s linear, color .2s linear; | |
} | |
.content { | |
width: 99%; | |
height: 50px; | |
float: left; | |
/*width: 220px; | |
height: 50px;*/ | |
margin: 0; | |
padding: 5px; | |
cursor: pointer; | |
} | |
/*#product .convert{ | |
width: 151px; | |
height: 10px; | |
}*/ | |
.content input | |
{ | |
padding: 2px 0 0 2px; | |
float:left; | |
top: 0; | |
left: 100%; | |
} | |
.content img { | |
float: left; | |
width: 25x; | |
height: 25px; | |
} | |
.content a h3 { | |
margin: 0; | |
padding: 10px 0 0 10px; | |
font-size: .9em; | |
overflow: hidden; | |
font-weight: normal; | |
float: left; | |
width: 500px; | |
color: black; | |
} | |
.content h3 | |
{ | |
margin: 0; | |
padding: 10px 0 0 10px; | |
font-size: .9em; | |
overflow: hidden; | |
font-weight: normal; | |
float: left; | |
width: 500px; | |
} | |
.content p { | |
visibility: hidden; | |
} | |
.content:hover p { | |
visibility: visible; | |
position: absolute; | |
width: 110px; | |
height: 110px; | |
top: 0; | |
margin: 0; | |
padding: 0; | |
line-height: 110px; | |
vertical-align: middle; | |
text-align: center; | |
color: #fff; | |
background-color: rgba(0,0,0,0.75); | |
transition: background .2s linear, color .2s linear; | |
-moz-transition: background .2s linear, color .2s linear; | |
-webkit-transition: background .2s linear, color .2s linear; | |
-o-transition: background .2s linear, color .2s linear; | |
} | |
.k-listview:after { | |
content: "."; | |
display: block; | |
height: 0; | |
clear: both; | |
visibility: hidden; | |
} | |
@media screen and (max-width: 620px) { | |
.content h3 { | |
max-width: 100px; | |
white-space: nowrap; | |
text-overflow: ellipsis; | |
height: 15px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment