7
votes

Kendo UI - Comment ajouter et sélectionner un nouvel onglet (sur Tabstrip Control) à l'aide de JavaScript

J'ai créé une fonction qui ouvre un nouvel onglet dans My Kendo UI Tabtrip Control:

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

javascript jquery kendo-ui

0 commentaires

4 Réponses :

3
votes

Essayez comme ça. // de la documentation Kendo UI Tabstrip XXX

pour le sélectionner xxx

2 commentaires

Bonjour Ravi, l'insertimiste () n'a pas semblé travailler pour moi. Je ne sais pas pourquoi. Merci cependant, apprécié.

Pour ajouter un onglet après l'onglet Courant, je devais faire ceci: varccorIndex = tabstrip.select (). Index (); tabstrip.insertabilter ([{texte: nouvel onglet ', contenu: résultat}], tabstrip.tabgroup.children (). EQ (courantIndex));

8
votes

Essayez ceci xxx

référence lien

1 commentaires

Remarque - Vous créez une nouvelle Tabstrip qui provoquera des erreurs. Vous en avez besoin: var tabstrip = $ ("# tabstrip"). Données ("KendoBRStrip");

3
votes

Vous pouvez ajouter et supprimer une onglet dynamique à l'aide de Kendo UI..Je espoir que ce code aidez quelqu'un

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

0 commentaires

0
votes

code pour ajouter et sélectionner un nouvel onglet: xxx

Voici le code pour supprimer l'onglet et sélectionnez le précédent (si l'onglet supprimé a été sélectionné): < Pré> xxx

J'utilise angulaire, d'où l'utilisation de $ de portée.

0 commentaires