Kendo UI - Jak dodać i wybierz nową kartę (w sprawie kontroli Pasek kart) przy użyciu javascript

I utworzeniu funkcji, która otwiera nową kartę w moim kontroli Kendo UI Pasek kart:Kendo UI - Jak dodać i wybierz nową kartę (w sprawie kontroli Pasek kart) przy użyciu javascript

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

To doda kartę do końca, ale jej nie wybierze. Jak mogę go wybrać, aby stać się aktywną zakładką !? Czy muszę ustawić identyfikator podczas tworzenia karty, a następnie wywołać funkcję select (..), czy mogę to zrobić w jednym wierszu?

Potrzebuję automatycznie wygenerować ładunek linków, każdy będzie miał inny tytuł i targetUrl.

Źródło

2013-02-19 pfeds

Spróbuj

<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>

Reference link

Źródło

2013-02-19 12:06:00 yogi

To wystarczyło. Dzięki! – pfeds

Uwaga - Tworzysz nowy tabulator, który spowoduje błędy. Potrzebujesz tego: var tabStrip = $ ("# tabstrip"). Data ("kendoTabStrip"); – pfeds

Spróbuj tego. // z dokumentacją Kendo Ui tabstrip

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

wyboru to

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

Źródło

2013-02-19 11:39:01

Cześć Ravi, insertAfter() nie działa dla mnie. Nie wiem dlaczego. Dzięki, docenione. – pfeds

Aby dodać zakładkę po aktualnej karcie, musiałem to zrobić: var currentIndex = tabStrip.select(). Index(); tabStrip.insertAfter ([{text: 'Nowa karta', treść: wynik}], tabStrip.tabGroup.children(). eq (currentIndex)); –

można dodawać i usuwać za pomocą dynamicznej zakładki kendoui..i nadziei ten kod pomaga niektórym

<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>

Źródło

2013-07-27 08:42:06

kod do dołączania i wybrać nową kartę:

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);

Oto kod, aby usunąć kartę i wybierz poprzednią (jeśli została wybrana karta usunięte):

$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); 
}

Używam kątowego, stąd użycie $ scope.

Źródło

2014-10-14 20:31:03

Kendo UI - Jak dodać i wybierz nową kartę (w sprawie kontroli Pasek kart) przy użyciu javascript

Odpowiedz

Powiązane problemy