Kendo UI - Come aggiungere e selezionare una nuova scheda (sul controllo TabStrip) utilizzando JavaScript

ho creato una funzione che si apre una nuova scheda nel mio controllo Kendo UI TabStrip:Kendo UI - Come aggiungere e selezionare una nuova scheda (sul controllo TabStrip) utilizzando JavaScript

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

Questo aggiungerà la scheda alla fine, ma non la selezionerà. Come posso selezionarlo per diventare la scheda attiva !? Devo impostare un ID quando creo la scheda, quindi chiamare la funzione select (..) oppure posso farlo in una riga?

Ho bisogno di generare automaticamente un carico di collegamenti, ognuno conterrà un titolo diverso e targetUrl.

fonte

2013-02-19 pfeds

Prova questa

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

Riferimento link

fonte

2013-02-19 12:06:00 yogi

Questo ha fatto il trucco. Grazie! – pfeds

Nota: stai creando una nuova scheda che causerà errori. Hai bisogno di questo: var tabStrip = $ ("# tabstrip"). Data ("kendoTabStrip"); – pfeds

provare in questo modo. // dalla documentazione Kendo Ui tabstrip

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

per selezionandolo

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

fonte

2013-02-19 11:39:01

Hi Ravi, l'insertAfter() non sembra funzionare per me. Non so perché. Grazie però, apprezzato. – pfeds

Per aggiungere una scheda dopo la scheda corrente, ho dovuto fare questo: var currentIndex = tabStrip.select(). Index(); tabStrip.insertAfter ([{text: 'New Tab', content: result}], tabStrip.tabGroup.children(). eq (currentIndex)); –

è possibile aggiungere e cancellare scheda dinamica con speranza kendoui..i questo codice aiuta alcuni uno

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

fonte

2013-07-27 08:42:06

codice per aggiungere e selezionare una nuova scheda:

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

Ecco il codice per rimuovere la scheda e selezionare quella precedente (se è stata selezionata la scheda rimossa):

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

Sto usando angolare, quindi l'uso di $ scope.

fonte

2014-10-14 20:31:03

Kendo UI - Come aggiungere e selezionare una nuova scheda (sul controllo TabStrip) utilizzando JavaScript

risposta

Problemi correlati