Search results

Getting started with JavaScript (ES5) Splitter control

The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework that can be directly used in latest web browsers.

Component initialization

The Essential JS 2 JavaScript controls can be initialized by using any of the following two ways:

  • Using local script and style references in an HTML page.
  • Using CDN link for script and style reference.

Using local script and style references in an HTML page

Step 1: Create an app folder myapp for Essential JS 2 JavaScript controls.

Step 2: You can get the global scripts and styles from the Essential Studio JavaScript (Essential JS 2) build installed location.

Syntax:

Script: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Styles: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/styles/material.css

Example:

Script: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.17/Essential JS 2/ej2-layouts/dist/global/ej2-layouts.min.js

Styles: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.17/Essential JS 2/ej2-layouts/styles/material.css

Step 3: Create a folder myapp/resources, and copy and paste the global scripts and styles from the above installed location to myapp/resources location.

Step 4: Create an HTML page (index.html) in myapp location and add the Essentials JS 2 script and style references.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
         <head>
            <title>Essential JS 2</title>
            <!-- Essential JS 2 material theme -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
            <link href="https://cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" type="text/css" />
            <!-- Essential JS 2 Dashboardlayout's global script -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-layouts/dist/global/ej2-layouts.min.js"
                type="text/javascript"></script>
        </head>
       <body>
       </body>
  </html>

Step 5: Now, create a div element to apply the Essential JS 2 splitter control in the index.html by using following code.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Essential JS 2</title>
            <!-- Essential JS 2 material theme -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
            <link href="https://cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" type="text/css" />
            <!-- Essential JS 2 Dashboardlayout's global script -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-layouts/dist/global/ej2-layouts.min.js"
                type="text/javascript"></script>
        </head>
       <body>
          <div id='container'>
              <!--element which is render as splitter-->
              <div id="splitter">
                  <!--list of splitter panes-->
                  <div></div>
                  <div></div>
                  <div></div>
              </div>
          </div>
       </body>
  </html>

Step 6: Now, run the index.html in web browser, it will render the Essential JS 2 splitter control.

Step 1: Create an app folder myapp for the Essential JS 2 JavaScript controls.

Step 2: The Essential JS 2 component’s global scripts and styles are already hosted in the following CDN link formats.

Syntax:

Script: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Styles: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css

Example:

Styles: http://cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css

Step 3: Create an HTML page (index.html) in myapp location and add the CDN link references. Now, add the div element and initiate the Essential JS 2 splitter control in the index.html by using the following code.

Load content to the pane

You can load the pane contents in either HTML element or string types using content property.

For detailed information, refer to the Pane Content section.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2</title>
            <!-- Essential JS 2 material theme -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
            <link href="https://cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" type="text/css" />
            <!-- Essential JS 2 Dashboardlayout's global script -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-layouts/dist/global/ej2-layouts.min.js"
                type="text/javascript"></script>
        </head>
       <script>
        // Initialize splitter control
        var splitObj = new ej.layouts.Splitter({
            paneSettings: [
                // Content for Pane 1
                { content:'Left Pane' },

                // Content for Pane 2
                { content:'Middle Pane' },

                // Content for Pane 3
                { content:'Right Pane' }
            ],
            height: '250px'
        });
        // Render initialized splitter
        splitObj.appendTo('#splitter');
       </script>
       <body>
          <div id='container'>
              <!--element which is render as splitter-->
              <div id="splitter">
                  <!--list of splitter panes-->
                  <div></div>
                  <div></div>
                  <div></div>
              </div>
          </div>
       </body>
  </html>
Source
Preview
index.js
index.html
// Initialize splitter control
var splitObj = new ej2_layouts_1.Splitter({
    paneSettings: [
        // Content for Pane 1
        { content: 'Left Pane' },
        // Content for Pane 2
        { content: 'Middle Pane' },
        // Content for Pane 3
        { content: 'Right Pane' }
    ],
    height: '250px'
});

// Render initialized splitter
splitObj.appendTo('#splitter');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Splitter </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 Uploader Component">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <!--element which is going to render the splitter-->
        <div id="splitter">
            <!--list of splitter panes-->
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

See Also