28 Jun 2017 / 3 minutes to read
Split Button Creation
- Create an HTML file and add the following template to HTML file for Split Button creation.
<!doctype html> <html lang="en" ng-app="SplitButtn"> <head> <title>Getting Started Essential JS</title> <!-- Style sheet for default theme (flat azure) --> <link href="http://cdn.syncfusion.com/18.104.22.168/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/22.214.171.124/js/web/ej.web.all.min.js"></script> <!--Add custom scripts here --> </head> <body ng-controller="SplitButton"> <!--add button element here--> </body> </html>
jQuery.easing external dependency has been removed from version 126.96.36.199 onwards. Kindly include this jQuery.easing dependency for versions lesser than 188.8.131.52 in order to support animation effects.
The ng-app directive explains the root element (<html> or <body> tags) of the application. You will assign a name to the ng-app directive, then you must create a module with that name. In this module, you will have to define your directives, services, filters and configurations.
Properties can be bind to ejSplitButton control using the prefix e- and particular property name as shown as below
Adding button element and <UL>, <LI> element for Split Button rendering.
<button id="save" ej-splitbutton e-showroundedcorner="true" e-targetid="menu1" e-text="Save" e-width="width" e-height="height" ></button> <ul id="menu1"> <li><a href="#">Open..</a></li> <li><a href="#">Save</a></li> <li><a href="#">Delete</a></li> </ul>
Add the angular module in script section as mentioned below.
Output of above steps