Custom Elements Documentation

Getting Started

jqxTabs is a HTML Element which displays tabs that break the content into multiple sections.

Every UI element from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.

The first step is to create html page and add links to the javascript files and css dependencies to your project.

The jqxTabs element requires the following files: 

<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxtabs.js"></script>
The next step is to add the html element within the body of the html page.

<jqx-tabs settings="elementSettings"></jqx-tabs>
The last step is to initialize the element settings: 
<script type="text/javascript">
    JQXElements.settings["elementSettings"] =
    {
        animationType:"fade", theme:"light"
    }
</script>
To call a function(method), you need to pass the method name and parameters(if any) in the jqxTabs's instance. 
<script>
	window.onload = function () {
		var element = document.querySelector("jqx-tabs");
		element.addAt(1,'Title','Content');
	}
</script>
To get the result of a function after calling it, you can use the following syntax: 
<script>
	window.onload = function () {
		var element = document.querySelector("jqx-tabs");
		var result = element.getTitleAt();
	}
</script>
To set a property(option), you need to use the property name and value(s) along with the jqxTabs's instance. 
window.onload = function() {
	document.querySelector("jqx-tabs").animationType = 'none';
}
You can also set properties of HTML Elements by using Attributes. Traditionally, attributes are used to set the initial state of an element. Properties with camelCase naming have dash-based attributes. For example: A property "dataSource" will have an attribute called "data-source".

To get a property(option), you need to use the property name along with the jqxTabs's instance. 
window.onload = function() {
	var propertyValue = document.querySelector("jqx-tabs").animationType;
}

Event binding can be defined in the HTML as an attribute. The syntax is: 'on-' and the event's name. Event Names with camelCase naming have dash-based attributes. The attribute's value is the event handler's name. The addEventListener function can also be used for event binding. 

<script>
	window.onload = function () {
		var element = document.querySelector("jqx-tabs");
		element.addEventListener("add", function(event){
		// Your code here
		});
	}
</script>

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Tabs Custom Element</title>
    <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" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.light.css" type="text/css" />
    <link rel="stylesheet" href="../../styles/demos.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script>
        JQXElements.settings["tabsSettings"] =
        {
			animationType:"fade", theme:"light"
        }
       
    </script>
</head>
<body>
    <jqx-tabs settings="tabsSettings">
        <ul>
            <li style="margin-left: 30px;">Node.js</li>
            <li>JavaServer Pages</li>
            <li>Active Server Pages</li>
            <li>Python</li>
            <li>Perl</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>
            JavaServer Pages (JSP) is a Java technology that helps software developers serve
            dynamically generated web pages based on HTML, XML, or other document types. Released
            in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address
            the perception that the Java programming environment didn't provide developers with
            enough support for the Web. To deploy and run, a compatible web server with servlet
            container is required. The Java Servlet and the JavaServer Pages (JSP) specifications
            from Sun Microsystems and the JCP (Java Community Process) must both be met by the
            container.
        </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>
            Python is a general-purpose, high-level programming language[5] whose design philosophy
            emphasizes code readability. Python claims to '[combine] remarkable power with very
            clear syntax",[7] and its standard library is large and comprehensive. Its use of
            indentation for block delimiters is unique among popular programming languages.
            Python supports multiple programming paradigms, primarily but not limited to object-oriented,
            imperative and, to a lesser extent, functional programming styles. It features a
            fully dynamic type system and automatic memory management, similar to that of Scheme,
            Ruby, Perl, and Tcl. Like other dynamic languages, Python is often used as a scripting
            language, but is also used in a wide range of non-scripting contexts.
        </div>
        <div>
            Perl is a high-level, general-purpose, interpreted, dynamic programming language.
            Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting
            language to make report processing easier. Since then, it has undergone many changes
            and revisions and become widely popular amongst programmers. Larry Wall continues
            to oversee development of the core language, and its upcoming version, Perl 6. Perl
            borrows features from other programming languages including C, shell scripting (sh),
            AWK, and sed.[5] The language provides powerful text processing facilities without
            the arbitrary data length limits of many contemporary Unix tools, facilitating easy
            manipulation of text files.
        </div>  
    </jqx-tabs>
</body>
</html>

The result of the above code is: