jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
76 lines (72 loc) • 4.3 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jQuery Tabs, Tabs Widget, TabView" />
<meta name="description" content="The jqxTabs is breaking the content into multiple sections. You
can populate it from 'UL' for the tab titles and 'DIV' for it's contents." />
<title id='Description'>The jqxTabs 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>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.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="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var addButton,
addButtonWidth = 29,
index = 0;
// create jqxTabs.
$('#jqxTabs').jqxTabs({ height: 250, width: getWidth("Tabs"), showCloseButtons: true });
var index = 0;
$('#jqxTabs').on('tabclick', function (event) {
if (event.args.item == $('#unorderedList').find('li').length - 1) {
var length = $('#unorderedList').find('li').length;
$('#jqxTabs').jqxTabs('addAt', event.args.item, 'Sample title ' + index, 'Sample content number: ' + index);
index++;
}
});
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div id='jqxTabs' style="float: left;">
<ul style="margin-left: 30px;" id="unorderedList">
<li>Node.js</li>
<li>Active Server Pages</li>
<li canselect='false' hasclosebutton='false'>Add New Tab</li>
</ul>
<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>
<div>
ASP.NET is a web application framework developed and marketed by Microsoft to allow
programmers to build dynamic web sites, web applications and web services. It was
first released in January 2002 with version 1.0 of the .NET Framework, and is the
successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built
on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code
using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET
components to process SOAP messages.
</div>
<div>
</div>
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>