使用Kendo UI tabStrip小部件,我想做两件事:
1)自动选择第一个标签,因为它不会立即显示标签内容。
2)当然,在特定条件下,交换第一个标签的contentUrl。
有趣的是,当我在我的Html上使用k-content-urls指令时,第一个标签会立即加载内容。
EX /
<div kendo-tab-strip k-content-urls="['myTemplate.html', 'myTemplate2.html']">
但是,我不想这样做。我更喜欢下面的方法,如k-options="settings.tabOptions"
以下是我的控制器代码中的tabOptions,以及它下面的HTML标记:
settings.tabOptions = {
animation: { open: { effects: "fadeIn" } },
select: function (e) {
console.log("Selected: " + e.item.innerText);
// NOT WORKING..
e.sender.dataSource.options.data[0].contentUrl = "../myNewTemplate.html"
},
change: function (e) {
console.log("Changed: ");
},
activate: function (e) {
console.log("Activated: " + e.item.innerText);
},
show: function (e) {
console.log("Shown: " + e.item.innerText);
},
contentLoad: function (e) {
console.log("Content loaded in " + e.item.innerText);
},
dataTextField: "title",
dataContentUrlField: "contentUrl",
dataSource: [{
title: "Formatting",
contentUrl: '../app/shared/include/grid-config/gad-config-grid-prop.html'
},
{
title: "Dimensions",
contentUrl: '../app/shared/include/grid-config/gad-config-grid-dimen.html'
},
{
title: "Risk Measures",
contentUrl: '../app/shared/include/grid-config/gad-config-grid-riskmeasures.html'
}],
error: function (e) {
console.log("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
}
};
&#13;
<div id="Gadgettabs" kendo-tab-strip="tabstrip" k-options="settings.tabOptions">
<ul>
<li class="k-state-active">Formatting</li>
<li>Dimensions</li>
<li>Risk Measures</li>
</ul>
</div>
&#13;
同样,我需要立即显示第一个标签的内容;并且还要弄清楚如何动态更改第一个标签的内容。
提前致谢...
鲍勃
****更新****
我尝试动态更改上面select:
事件中的contentUrl,但它无效。
答案 0 :(得分:1)
最终解决方案:
注意:如果您不使用&#34;控制器作为&#34;你的ng-controller指令中的语法(就像我一样),然后在控制器代码中用"settings."
替换我的"$scope."
对象。当然在html中,只需删除"settings."
。
// KENDO TABSTRIP
settings.urls = ['../app/shared/include/grid-config/gad-config-grid-prop.html', '../app/shared/include/grid-config/gad-config-grid-dimen.html', '../app/shared/include/grid-config/gad-config-grid-riskmeasures.html'];
if ($scope.widget.gadgetType == "chart") {
settings.urls[0] = '../app/shared/include/barchart-config/gad-config-barchart-prop.html';
};
settings.tabOptions = {
//animation: { open: { effects: "fadeIn" } },
select: function (e) {
console.log("Selected: " + e.item.innerText);
},
change: function (e) {
console.log("Changed: ");
},
activate: function (e) {
console.log("Activated: " + e.item.innerText);
},
show: function (e) {
console.log("Shown: " + e.item.innerText);
},
contentLoad: function (e) {
console.log("Content loaded in " + e.item.innerText);
},
error: function (e) {
console.log("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
}
};
&#13;
<div id="Gadgettabs" kendo-tab-strip="settings.tabStrip"
k-rebind="settings.urls"
k-content-urls="settings.urls"
k-options="settings.tabOptions" >
<ul>
<li class="k-state-active">TAB1</li>
<li>TAB2</li>
<li>TAB3</li>
</ul>
</div>
&#13;