jQuery UI Widgets Forums Plugins AngularJS Dynamic tabs on click event

Tagged: ,

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 7 years, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Dynamic tabs on click event #88517



    I am trying to create dynamic tabs using angularjs. I referred your example and implemented the following code:

    In the code below, I created the Node.js tab which is shown by default. However, according to my requirement, I do not want to see any tabs when I first launch the code. If I remove the Node.js tab, I get error saying addLast function not defined. I think I would have to instantiate the tabs in a different way. Can you please tell me, how can i implement this functionality?

    <!DOCTYPE html>
    <html ng-app=”demoApp”>
    <title id=’Description’>AngularJS Tabs can display a close button in each tab. This can
    be achieved by setting the ‘showCloseButtons’ property to true. In this demo we
    demonstrate how to show close buttons in all tabs and add an additional button next
    to the tabs.</title>
    <meta name=”description” content=”AngularJS Tabs example. This example demonstrates Tabs with Close Buttons.” />
    <link rel=”stylesheet” href=”./jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”./scripts/angular.min.js”></script>
    <script type=”text/javascript” src=”./scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxtabs.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”./jqwidgets/jqxangular.js”></script>
    <script type=”text/javascript” src=”./scripts/demos.js”></script>
    <script type=”text/javascript”>
    var demoApp = angular.module(“demoApp”, [“jqwidgets”]);
    demoApp.controller(“demoController”, function ($scope) {
    var addButton,
    addButtonWidth = 29,
    index = 0;

    var tabs = {};
    $scope.tabsSettings = {
    height: 220, width: 1000, showCloseButtons: true,reorder: true,
    created: function (args) {
    tabs = args.instance;

    var index = 0;

    var loadPage = function (url, tabIndex) {
    $.get(url, function (data) {
    // dynamically appends data returned from a server to a content element with ID equal to “content1”
    // for the first tab, “content2” for the second tab or “content3″ for the third tab.
    $(‘#content’ + tabIndex).html(data);

    var mrkUp = ‘<div>’ +
    ‘<div ng-include=”TOSview.html”></div>’ +
    $scope.addtab = function () {
    tabs.addLast(‘Sample title’,loadPage(‘TOSview.html’,tabs.val()));

    <body ng-controller=”demoController”>
    <jqx-button jqx-on-click=”addtab()”>Add tab</jqx-button>
    <jqx-tabs jqx-settings=”tabsSettings”>
    <ul style=’margin-left: 10px;’>

  • Node.js
  • <div>
    Node.js is an event-driven I/O server-side JavaScript environment based on V8. It is intended for writing scalable network programs such as web servers.
    It was created by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
    Similar environments written in other programming languages include Twisted for Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
    Unlike most JavaScript, it is not executed in a web browser, but is instead a form of server-side JavaScript. Node.js implements some CommonJS specifications.
    Node.js includes a REPL environment for interactive testing.

    • This topic was modified 7 years, 6 months ago by  vsukhwal.
Dynamic tabs on click event #88539


Hello vsukhwal,

You could use adding methods, could find more in our API Documentation to add tabs dynamically.
Also, if you do not want to see the Tabs for the first time could set style visibility: hidden; and when you would like to appear set visibility: visible;.

Best Regards,
Hristo Hristov

jQWidgets team

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.