劍道UI - 如何使用javascript

我已經創建了一個在我的劍道UI TabStrip控件打開一個新的標籤頁的功能添加和選擇新的選項卡（在TabStrip控件）：劍道UI - 如何使用javascript

function AddTab(targetUrl, title) { 
     $("#tabstrip").data("kendoTabStrip").append({ text: title, contentUrl: targetUrl }); 
    }

這將增加標籤到結尾，但不會選擇它。我怎樣才能選擇它成爲活動標籤！？創建選項卡時，是否需要設置ID，然後調用select（..）函數，還是可以在一行中執行？

我需要自動生成一個鏈接的負載，每個將採取不同的標題和targetUrl。

來源

2013-02-19 pfeds

試試這個

<div id="tabstrip"> 
    <ul> 
    <li class="k-state-active">First Tab</li> 
    <li>Second Tab</li> 
    </ul> 
    <div> 
    First text 
    </div> 
    <div> 
    Second text 
    </div> 
</div> 
<input type="button" value="Add Tab" onclick="AddTab('google', 'http://google.com')" /> 


<script> 
function AddTab(targetUrl, title) { 
    var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip"); 
    tabStrip.append({ text: title, contentUrl: targetUrl, content: "Your content" }); 
    tabStrip.select((tabStrip.tabGroup.children("li").length - 1)); 
} 
</script>

參考link

來源

2013-02-19 12:06:00 yogi

這個技巧。謝謝！ – pfeds 2013-02-19 12:36:43

注 - 您正在創建一個會導致錯誤的新標籤欄。你需要這個：var tabStrip = $（「＃tabstrip」）。data（「kendoTabStrip」）; – pfeds 2016-12-29 05:48:38

試試這個。 //從文檔Kendo Ui tabstrip

var tabStrip = $("#tabStrip").data("kendoTabStrip"); 
tabStrip.insertAfter(
    { text: "New Tab" }, 
    tabstrip.tabGroup.children("li:last") 
);

選擇使用kendoui..i希望它

$(document).ready(function(){ 
    var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip"); 
    tabstrip.select(yourIndexoftheTab); 
});

來源

2013-02-19 11:39:01

嗨Ravi，insertAfter（）似乎不適合我。我不知道爲什麼。謝謝，雖然，讚賞。 – pfeds 2013-02-19 12:37:48

要在當前選項卡後添加一個選項卡，我必須這樣做：var currentIndex = tabStrip.select（）。index（）; tabStrip.insertAfter（[{text：'New Tab'，content：result}]，tabStrip.tabGroup.children（）。eq（currentIndex））; – 2017-02-15 17:38:55

您可以添加和刪除動態標籤此代碼有助於一個

<html> 
<head> 
<title> testing remote data </title> 
<link href="styles/kendo.common.min.css" rel="stylesheet" /> 
<link href="styles/kendo.default.min.css" rel="stylesheet" /> 
<script src="js/jquery.min.js"></script> 
<script src="js/kendo.all.min.js"></script> 
</head> 

<input type='text' id='tabname' name='tabname'> 
<input type="button" value="Add Tab" onclick="AddTab()" /> 
<div id="tabstrip"> 
</div> 

<script> 
$(document).ready(function() { 
$("#tabstrip").kendoTabStrip({ 
      animation: { 
       open: { 
        effects: "fadeIn" 
       } 
      }, 
    select: function(element){selecttab(element)}   
     }); 

     }); 

function selecttab(element) { 
var tabStrip1 = $('#tabstrip').kendoTabStrip().data("kendoTabStrip"); 
var item = tabStrip1.element.find("li:contains("+$(element.item).text()+")"), 
itemIdx = item.index(); 
$("#tabstrip").data("kendoTabStrip").select(itemIdx);     
} 

function AddTab(targetUrl) { 
var title = jQuery("#tabname").val(); 
var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip"); 
    tabStrip.append({ text: title, 
     content: "<div class='showtabcontent dhtmlgoodies_aTab' style='height: auto; display: block;' id='tabViewsubtabname'><div style='float:right;'><input type='button' value='X' onClick='closeTab($(this).closest(\"li\"));'></div><br><label class='evtgrouplables'>Description</label><br><textarea name='dynamic_other_content[]' id='dynamic_other_content' class='textareaeditor'></textarea><input type='hidden' name='dynamic_other_title[]' value=''/></div>" 
    }); 
tabStrip.select((tabStrip.tabGroup.children("li").length - 1)); 
} 
function closeTab(vari){ 
var tabStrip = $('#tabstrip').kendoTabStrip().data("kendoTabStrip"); 
tabStrip.remove(tabStrip.select()); 
tabStrip.select((tabStrip.tabGroup.children("li").length - 1)); 
} 
</script>

來源

2013-07-27 08:42:06

代碼追加並選擇一個新的選項卡：

var tabs = $('#tabs').data('kendoTabStrip'); 
    var tabNum = tabs.items().length; 
    var closeButton = 
    "<span unselectable='on' class='k-icon k-delete'>delete</span>"; 

    tabs.append({ 
    encoded: false, //allow HTML 
    text: team.name + ' ' + closeButton, 
    contentUrl: 'teamschedule.html' 
    }); 
    // make new tab the active tab 
    tabs.select(tabNum); 

    var tab = $(tabs.items()[tabNum]); 
    //attach delete handler to the delete icon 
    tab.on('click','.k-delete', tab, $scope.removeTab);

這裏是去除選項卡並選擇前一個（如果選擇了被除去的標籤）的代碼：

$scope.removeTab = function(e) { 
    var tabs = $('#tabs').data('kendoTabStrip'); 
    if (e.data.hasClass('k-state-active')) { 
    //select previous tab if the active tab is removed 
    tabs.select(e.data.prev()); 
    } 
    tabs.remove(e.data); 
}

我正在使用角度，因此使用$範圍。

來源

2014-10-14 20:31:03

劍道UI - 如何使用javascript

回答

相關問題