[英]add a button to close on a tabstrip dynamically - kendo ui
嗨,我需要您的幫助,我需要一個標簽條上的關閉按鈕,但是要動態地..我的按鈕有問題,請先選擇一個標簽然后再關閉...這是我的代碼,..我使用劍道 所有這些都是動態的,
<div class="configuration k-widget k-header">
<span class="configHead">API Functions</span>
<ul class="options">
<li>
<input type="text" value="0" id="tabIndex" class="k-textbox"/> <button class="selectTab k-button">Select</button>
</li>
<li>
<button class="removeItem k-button">Remove Selected</button>
</li>
<li>
<input type="text" value="" id="appendText" class="k-textbox"/> <button class="appendItem k-button">Append</button>
</li>
</ul>
<div>
<img src="../../Content/kendo/2013.1.514/images/icono_cerrar.gif" alt="cerrar_todo" id="close" onclick="cerrar(this)" align="right" style= 'valign:top; cursor: pointer;'/>
</div>
</div>
<div style="width: 1236px;">
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(tabstrip =>
{
tabstrip.Add().Text("Bsoft")
.Content(@<text>
<center>
<img src="../../Content/kendo/2013.1.514/images/bsoftLarge.jpg" alt="bsoft" />
</center>
</text>);
})
.SelectedIndex(0)
)
</div>
<script>
$(document).ready(function () {
var tabStrip = $("#tabstrip").data("kendoTabStrip");
var getItem = function (target) {
var itemIndex = target[0].value;
return tabStrip.tabGroup.children("li").eq(itemIndex);
},
select = function (e) {
if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
tabStrip.select(getItem($("#tabIndex")));
},
append = function (e) {
if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
tabStrip.append(
{
text:$("#appendText").val(),
// text: " <a href='#' data-bind='click: clear'> <span class='k-icon k-i-close'></span>",
//imageUrl: "/Content/kendo/2013.1.514/images/icono_cerrar.png"
// content: "<img src='/Content/kendo/2013.1.514/images/Penguins.jpg' alt=contenido /><br> Es una prueba del contenido"
});
};
$("#tabstrip").on("click", " .k-tabstrip-items .k-item img", function (ImgObj) {
debugger
var tab = tabStrip.select(),
otherTab = tab.next();
otherTab = otherTab.length ? otherTab : tab.prev();
tabStrip.remove(tab);
tabStrip.select(otherTab);
});
$(".toggleTab").click(function (e) {
var tab = tabStrip.select();
tabStrip.enable(tab, tab.hasClass("k-state-disabled"));
});
$(".removeItem").click(function (e) {
var tab = tabStrip.select(),
otherTab = tab.next();
otherTab = otherTab.length ? otherTab : tab.prev();
tabStrip.remove(tab);
tabStrip.select(otherTab);
});
$(".selectTab").click(select);
$("#tabIndex").keypress(select);
$(".appendItem").click(append); //text input
$("#appendText").keypress(append); // button
});
function cerrar(ImgObj) {
debugger
var aux=1;
var tabStrip = $("#tabstrip").data("kendoTabStrip");
var tabcount = tabStrip.contentAnimators.length;
while (aux >= 1 && aux < tabcount) {
var aa = $(ImgObj).closest("li").text();
tabStrip.remove($(ImgObj).closest("li").index());
aux = aux + 1;
}
}
</script>
<style scoped>
.configuration .k-textbox {
width: 40px;
}
.k-image
{
float:right;
margin-left:7px;
}
</style>
您必須在所有標簽頁的內容中創建關閉按鈕,因此當您單擊標簽頁的特定關閉按鈕然后關閉該標簽頁時。
<input type='button' value='X' onClick='closeTab($j(this).closest("li"));'>
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Events(events => events.Select("onSelect"))
.Items(tabstrip => {
tabstrip.Add().Text("Home")
.Content("").Visible(false);
})
)
JS:
function onSelect(e) {
$(e.item)[0].innerHTML = "<span class=\"k-loading k-complete\"></span>"+
"<span class=\"k-link\"style='font-size: 12px !important; padding-right:5px;'>" +
$(e.item).find("> .k-link").text()+
"<input class='pwButtonClose' type='button' onClick='closeTab($(this).closest(\"li\"));'></span>";
}
CSS:
.pwButtonClose {
border: 0;
background-color: transparent;
margin-left: 5px;
background-image: url(../content/images/close.png);
background-repeat: no-repeat;
height: 16px;
width: 16px;
padding: 0;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.