Kendo UI を備えた 3 つのタブ付きタブストリップがあり、各タブには独自のフィルター可能なリストビューがあります。独自のタブが選択されているときにリストビューを作成するにはどうすればよいですか? 最初のリストビューにデータを入力することになっている mobilelistviewfiltering というメソッドがあるので、最初のタブが選択されたときに実行したいと思います。方法はありますか？
よかったです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="http://demos.telerik.com/kendo-ui/application/index">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1411/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
</head>
<body>
<div id="videos" style="height:100%;" data-role="view" data-show="videoShow">
<header data-role="header">
<div data-role="navbar">
<a data-role="backbutton" data-align="left">Geri</a>
<span data-role="view-title"></span>
</div>
</header>
<div class="test" style="width:100%;">
<div class="demo-section k-header">
<div id="tabstrip" class="whatever">
<ul>
<li class="k-state-active" style="width:18%;">
Hepsi
</li>
<li style="width:38%;">
En Beğenilenler
</li>
<li style="width:43%;">
En Çok İzlenenler
</li>
</ul>
<div class="realContent" data-init="mobileListViewFiltering">
<ul id="filterable-listview" data-bind="mobileListViewFiltering" data-role="listview" data-source="foo" data-pull-to-refresh="true" data-append-on-refresh="true" data-template="foo-template">
</ul>
</div>
<div class="realContent" data-init="mobileListViewFiltering">
<ul id="filterable-listview" data-role="listview" data-source="foo" data-pull-to-refresh="true" data-append-on-refresh="true" data-template="foo-template">
</ul>
</div>
<div class="realContent" data-init="mobileListViewFiltering">
<ul id="filterable-listview" data-role="listview" data-source="foo" data-pull-to-refresh="true" data-append-on-refresh="true" data-template="foo-template">
</ul>
</div>
</div>
</div>
<style scoped>
#tabstrip {
font-weight: lighter;
font-size: 0.9em;
line-height: 1;
padding: 0;
margin: 0;
}
</style>
</div>
<script>
$(document).ready(function() {
$("#tabstrip").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
}
});
$(".realContent").height($(document).height());
});
</script>
<script>
function videoShow(e) {
var dynoTitle = e.view.params.tit;
var navbar = app.view()
.header
.find(".km-navbar")
.data("kendoMobileNavBar");
navbar.title(dynoTitle);
}
</script>
<script type="text/x-kendo-template" id="foo-template">
<img src="content/#=ProductID#.jpg" alt="#=ProductName# image" class="pullImage"/>
<h3> #:ProductName# </h3>
#:UnitsInStock# adet mevcut
</script>
<script>
var i = 0;
// datasource below is customized for demo purposes.
function mobileListViewFiltering() {
var foo = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
},
requestStart: function() {
kendo.ui.progress($("#products"), true);
},
requestEnd: function() {
kendo.ui.progress($("#products"), false);
},
sort: {
field:"ProductName",
dir: "asc"
},
pageSize: 100
});
$("#filterable-listview").kendoMobileListView({
dataSource: foo,
template: $("#mobile-listview-filtering-template").text(),
filterable: {
field: "ProductName",
operator: "startswith"
},
endlessScroll: true
});
}
</script>
</div>
</body>
</html>