Getting Started

10 Aug 20172 minutes to read

This section explains briefly about how to create a Split Button in your application with JavaScript.The HTML button element and the <UL>, <LI> are easily configured as Essential JavaScript Split Button control. The basic rendering of Essential JavaScript Split Button is achieved by using default functionality. Initially the targetID is a mandatory one, without this field it does not act as normal button on two sides.

Split Button Creation

Create an HTML file and add the following template to HTML file for Split Button creation.

  • HTML
    • <!doctype html>
<html>
<head>
    <title>Getting Started Essential JS</title>
    <!-- Style sheet for default theme (flat azure) -->
    <link href="http://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
    <!--Scripts-->
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
    <script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js"></script>
    <!--Add custom scripts here -->
</head>
<body>
    <!--add button element here-->
</body>
</html>

    NOTE

    jQuery.easing external dependency has been removed from version 14.3.0.49 onwards. Kindly include this jQuery.easing dependency for versions lesser than 14.3.0.49 in order to support animation effects.

    Adding button element and <UL>, <LI> element for Split Button rendering.

  • HTML
    • <button id="splitButton">Save</button>
<ul id="target">
    <li><a href="#">Open..</a></li>
    <li><a href="#">Save</a></li>
    <li><a href="#">Delete</a></li>
</ul>

    Initialization of ejSplitButton in script

  • JAVASCRIPT
    • $(function () {
            // simple control creation
            $("#splitButton").ejSplitButton({
                width: "120px",
                height: "50px",
                showRoundedCorner: true,
                targetID: "target"
            });
        });

    Output of above steps