Dynamic tabs on click event - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

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

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

Author

Dynamic tabs on click event Posts
October 26, 2016 at 6:57 pm Dynamic tabs on click event #88517

vsukhwal
Participant

Hello,

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?

Code:
<!DOCTYPE html>
<html ng-app=”demoApp”>
<head>
<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>’ +
‘</div>’;
$scope.addtab = function () {
tabs.addLast(‘Sample title’,loadPage(‘TOSview.html’,tabs.val()));
tabs.ensureVisible(-1);

};
});
</script>
</head>
<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.
</div>
</jqx-tabs>
</body>
</html>